"use client"
import { AppSidebar } from "@/components/app-sidebar"
import { SiteHeader } from "@/components/site-header"
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar"
import { useRouter } from "next/navigation"
import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardDescription, CardTitle, CardHeader, CardContent, CardFooter } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { IconCircleCheckFilled, IconLoader, IconCircleX, IconPackage } from "@tabler/icons-react"
import { BuildingIcon, DollarIcon } from "@/components/ui/icons"
import { Scale } from "lucide-react"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import React from "react"
import { useTranslation } from "react-i18next"
import { Combobox } from "@/components/combobox"
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs"
import { ComboboxFull } from "@/components/combobox-full"
import { Calendar } from "@/components/ui/calendar"
import { format } from "date-fns"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { cn } from "@/lib/utils"
import { CalendarIcon } from "lucide-react"
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Plus } from "lucide-react"

export default function ContractDetailsPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = React.use(params);
  const router = useRouter()
  const { t } = useTranslation()
  const [contract, setContract] = useState<any>({
    status: "Draft",
    basicInfo: {},
    productInfo: {},
    financialInfo: {
      priceType: "Fixed"
    },
    payment: {},
    delivery: {},
    notes: "",
    brokerageCompany: "BNK",
    pic: ""
  });
  const [loading, setLoading] = useState(true)
  const [companies, setCompanies] = useState<string[]>([]);
  const [productCode, setProductCode] = useState<string[]>([]);
  const [cropYear, setCropYear] = useState<string[]>([]);
  const [origin, setOrigin] = useState<string[]>([]);
  const [selectedCompany, setSelectedCompany] = useState<string>("")
  const [selectedBuyerCompany, setSelectedBuyerCompany] = useState<string>("")
  const [selectedProductCode, setSelectedProductCode] = useState<string>("")
  const [selectedCropYear, setSelectedCropYear] = useState<string>("")
  const [selectedOrigin, setSelectedOrigin] = useState<string>("")
  const [currentTab, setCurrentTab] = useState("general")
  const [isMobile, setIsMobile] = useState(false)
  const [isMobileCheckComplete, setIsMobileCheckComplete] = useState(false)
  const [showCompanyDialog, setShowCompanyDialog] = useState(false)
  const [newCompanyName, setNewCompanyName] = useState("")
  const [isCreatingCompany, setIsCreatingCompany] = useState(false)
  const [companyNotes, setCompanyNotes] = useState<Record<string, { buyerNote: string; sellerNote: string }>>({})
  const [guaranteeStatus, setGuaranteeStatus] = useState<string>("not sent")
  const [locationOptions] = useState([
    { value: "Constanta", label: "Constanta, CT" },
    { value: "Bucuresti", label: "Bucuresti, B" },
    { value: "Brasov", label: "Brasov, BV" },
    { value: "Iasi", label: "Iasi, I" },
    { value: "Cluj Napoca", label: "Cluj Napoca, CJ" }
  ]);

  const [parityOptions] = useState([
    { value: "FCA", label: "FCA" },
    { value: "DAP", label: "DAP" },
    { value: "FOB", label: "FOB" },
    { value: "CIF", label: "CIF" }
  ]);

  const [transportOptions] = useState([
    { value: "by truck", label: "by truck" },
    { value: "by wagons", label: "by wagons" },
    { value: "by barge", label: "by barge" },
    { value: "by truck / by wagons / by barge", label: "by truck / by wagons / by barge" }
  ]);

  const [paymentTypeOptions] = useState([
    { value: "CAD", label: "CAD" },
    { value: "Avans", label: "Avans" },
    { value: "CD", label: "CD" },
    { value: "BO", label: "BO" }
  ]);

  const [paymentTermsOptions] = useState({
    CAD: [
      { value: "CAD 2", label: "CAD 2" },
      { value: "CAD 3", label: "CAD 3" },
      { value: "CAD 5", label: "CAD 5" }
    ],
    Avans: [
      { value: "AVANS 100%", label: "AVANS 100%" },
      { value: "AVANS 90%", label: "AVANS 90%" },
      { value: "AVANS 80%", label: "AVANS 80%" }
    ],
    CD: [
      { value: "CD95/5", label: "CD95/5" },
      { value: "CD90/10", label: "CD90/10" },
      { value: "CD85/15", label: "CD85/15" },
      { value: "CD80/20", label: "CD80/20" }
    ],
    BO: [
      { value: "BO 30 DAYS", label: "BO 30 DAYS" },
      { value: "BO 60 DAYS", label: "BO 60 DAYS" },
      { value: "BO 90 DAYS", label: "BO 90 DAYS" }
    ]
  });

  const [invoiceOptions] = useState([
    { value: "Commercial invoice", label: "Commercial invoice" },
    { value: "Advance", label: "Advance" }
  ]);

  const [toleranceOptions] = useState({
    percentage: [
      { value: "2", label: "2%" },
      { value: "5", label: "5%" },
      { value: "10", label: "10%" }
    ],
    tonnage: [
      { value: "25", label: "25 to" },
      { value: "min/max", label: "min/max" }
    ]
  });

  const [quantityOptions, setQuantityOptions] = useState<Array<{ value: string; label: string }>>([
    { value: "1000", label: "1000" },
    { value: "1500", label: "1500" },
    { value: "3000", label: "3000" }
  ]);

  const [showSendDialog, setShowSendDialog] = useState(false);

  const [qualityOptions, setQualityOptions] = useState<Array<{ value: string; label: string }>>([]);

  useEffect(() => {
    if (contract?.basicInfo?.goodsCode) {
      const goodsCode = contract.basicInfo.goodsCode;
      fetch("/contracts/api/contractsdata")
        .then(res => res.json())
        .then((contracts: any[]) => {
          // Get unique quality specs for the current goodsCode
          const uniqueQualities = [
            ...new Set(
              contracts
                .filter(c => c.basicInfo?.goodsCode === goodsCode)
                .map(c => c.productInfo?.quality)
                .filter(Boolean)
            )
          ];

          // Add the default quality option
          const defaultQuality = `USUAL SPECS ${goodsCode} (UM, CS, TW, PROT)`;
          const options = [
            { value: defaultQuality, label: defaultQuality },
            ...uniqueQualities.map(quality => ({
              value: quality,
              label: quality
            }))
          ];

          setQualityOptions(options);
        });
    }
  }, [contract?.basicInfo?.goodsCode]);

  useEffect(() => {
    fetch("/contracts/api/contractsdata")
      .then(res => res.json())
      .then((contracts) => {
        console.log('Fetched contracts:', contracts);
        console.log('Looking for contract with ID:', id);
        const contract = contracts.find((c: any) => String(c.id) === String(id));
        console.log('Found contract:', contract);
        
        if (contract && !contract.calculated) {
          const basePrice = Number(contract.financialInfo?.pricePerMt || 0);
          const spread1 = Number(contract.financialInfo?.spread1 || 12);
          const spread3 = Number(contract.financialInfo?.spread3 || 20);
          contract.calculated = {
            price1: basePrice.toString(),
            price2: (basePrice - spread1).toString(),
            price3: (basePrice - spread3).toString()
          };
        }
        setContract(contract)
        if (contract?.basicInfo?.sellerCompany) {
          setSelectedCompany(contract.basicInfo.sellerCompany)
        }
        if (contract?.basicInfo?.buyerCompany) {
          setSelectedBuyerCompany(contract.basicInfo.buyerCompany);
        }
        if (contract?.basicInfo?.goodsCode) {
          setSelectedProductCode(contract.basicInfo.goodsCode)
        }
        if (contract?.basicInfo?.cropYear) {
          setSelectedCropYear(contract.basicInfo.cropYear);
        }
        if (contract?.basicInfo?.origin) {
          setSelectedOrigin(contract.basicInfo.origin)
        }
        setLoading(false)
      })
  }, [id])
  
  /*Data combobox */
  useEffect(() => {
    fetch("/contracts/api/contractsdata")
      .then(res => res.json())
      .then((contracts: any[]) => {
        const uniqueCompanies = [
          ...new Set(
            contracts.flatMap(c => [
              c.basicInfo?.sellerCompany,
              c.basicInfo?.buyerCompany
            ]).filter(Boolean) 
          )
        ];
        setCompanies(uniqueCompanies);
        const uniqueProductCode = [
          ...new Set(
            contracts.flatMap(c => [
              c.basicInfo?.goodsCode,
            ]).filter(Boolean) 
          )
        ]
        setProductCode(uniqueProductCode);
        const uniqueCropYear = [
          ...new Set(
            contracts.flatMap(c => [
              c.basicInfo?.cropYear,
            ]).filter(Boolean) 
          )
        ]
        setCropYear(uniqueCropYear);
        const uniqueOrigin = [
          ...new Set(
            contracts.flatMap(c => [
              c.basicInfo?.origin,
            ]).filter(Boolean) 
          )
        ]
        setOrigin(uniqueOrigin);
      });
  }, []);

  const companyOptions = [
    { value: "", label: t("bizz.selectCompany") },
    ...companies.map(company => ({ value: company, label: company }))
  ];

  const productCodeOptions = [
    { value: "", label: t("bizz.selectProductCode") },
    ...productCode.map(productCode => ({ value: productCode, label: productCode }))
  ];

  const cropYearOptions = [
    { value: "", label: t("bizz.selectProductCode") },
    ...cropYear.map(cropYear => ({ value: cropYear, label: cropYear }))
  ];

  const originOptions = [
    { value: "", label: t("bizz.selectProductCode") },
    ...origin.map(origin => ({ value: origin, label: origin }))
  ];

  useEffect(() => {
    // Check if mobile
    const checkMobile = () => {
      setIsMobile(window.innerWidth < 768)
      setIsMobileCheckComplete(true)
    }
    checkMobile()
    window.addEventListener('resize', checkMobile)
    return () => window.removeEventListener('resize', checkMobile)
  }, [])

  const handleNext = () => {
    const tabs = ["general", "product", "delivery", "price", "payment", "delivery-condition", "notes"];
    const currentIndex = tabs.indexOf(currentTab);
    if (currentIndex < tabs.length - 1) {
      setCurrentTab(tabs[currentIndex + 1]);
    }
  };

  const handlePrevious = () => {
    const tabs = ["general", "product", "delivery", "price", "payment", "delivery-condition", "notes"];
    const currentIndex = tabs.indexOf(currentTab);
    if (currentIndex > 0) {
      setCurrentTab(tabs[currentIndex - 1]);
    }
  };

  const getTabTitle = (tab: string) => {
    switch(tab) {
      case "general": return t("bizz.general");
      case "product": return t("bizz.product");
      case "price": return t("bizz.price");
      case "delivery-condition": return t("bizz.deliverycondition");
      case "delivery": return t("bizz.deliveryperiod");
      case "payment": return t("bizz.paymentterms");
      case "notes": return t("bizz.notes");
      default: return "";
    }
  };

  const handleBack = () => {
    if (window.history.length > 1) {
      router.back();
    } else {
      router.push("/contracts/bizz");
    }
  }

  const handleSave = async () => {
    try {
      const response = await fetch('/contracts/api/contractsdata', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(contract)
      });
      if (!response.ok) throw new Error('Failed to save changes');
      alert('Contract saved!');
      router.refresh();
    } catch (error) {
      alert('Failed to save changes.');
    }
  };

  const handleSend = async () => {
    try {
      // First get all contracts to determine the next contract number
      const contractsResponse = await fetch('/contracts/api/contractsdata');
      const contracts = await contractsResponse.json();
      
      // Get the last contract number for the current brokerage company
      const lastContract = contracts
        .filter((c: any) => c.brokerageCompany === contract.brokerageCompany)
        .sort((a: any, b: any) => {
          const aNum = parseInt(a.contractNumber.slice(-4));
          const bNum = parseInt(b.contractNumber.slice(-4));
          return bNum - aNum;
        })[0];

      const lastContractNumber = lastContract ? lastContract.contractNumber.slice(-4) : "0000";
      const year = new Date().getFullYear().toString().slice(-2);
      const newContractNumber = `${contract.brokerageCompany}${year}${(parseInt(lastContractNumber) + 1).toString().padStart(4, '0')}`;

      // Update contract with new number and status
      const updatedContract = {
        ...contract,
        contractNumber: newContractNumber,
        status: "Open",
        contractDate: new Date().toISOString().split('T')[0]
      };

      // Save the updated contract
      const saveResponse = await fetch('/contracts/api/contractsdata', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(updatedContract)
      });
      
      if (!saveResponse.ok) throw new Error('Failed to save contract');

      // Then send the email
      const sendResponse = await fetch('/contracts/api/send-contract', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          contract: updatedContract,
          buyerEmail: contract.basicInfo?.buyerEmail,
          sellerEmail: contract.basicInfo?.sellerEmail
        })
      });
      
      if (!sendResponse.ok) throw new Error('Failed to send contract');

      alert('Contract saved and sent successfully!');
      router.push('/contracts/list');
    } catch (error) {
      console.error('Error:', error);
      alert('Failed to save and send contract.');
    }
  };

  const handleSendClick = () => {
    setShowSendDialog(true);
  };

  const getStatusBadge = (status: string) => (
    <Badge variant="outline" className="text-muted-foreground px-1.5">
      {status.toLowerCase() === "open" ? (
        <IconCircleCheckFilled className="fill-green-500 dark:fill-green-400 mr-2" />
      ) : status.toLowerCase() === "pending" ? (
        <IconLoader className="mr-2" />
      ) : (
        <IconCircleCheckFilled className="fill-gray-500 dark:fill-gray-400 mr-2" />
      )}
      {status}
    </Badge>
  )

  const handleCreateCompany = async (companyName: string) => {
    if (!companyName.trim()) return;
    
    setIsCreatingCompany(true);
    try {
      const updatedCompanies = [...companies, companyName];
      setCompanies(updatedCompanies);
      setSelectedCompany(companyName);
      setShowCompanyDialog(false);
      setNewCompanyName("");
    } catch (error) {
      alert('Failed to create company');
    } finally {
      setIsCreatingCompany(false);
    }
  };

  const getDeliveryConditionText = (parity: string, transport: string) => {
    switch(parity) {
      case "FCA":
        return `In cazul livrarilor folosind transportul ${transport} si incoterms FCA, marfa va fi livrata la adresa furnizorului.`;
      case "DAP":
        return `In cazul livrarilor folosind transportul ${transport} si incoterms DAP, marfa va fi livrata la adresa destinatarului.`;
      case "FOB":
        return `In cazul livrarilor folosind transportul ${transport} si incoterms FOB, marfa va fi livrata la portul de incarcare.`;
      case "CIF":
        return `In cazul livrarilor folosind transportul ${transport} si incoterms CIF, marfa va fi livrata la portul de descarcare.`;
      default:
        return "";
    }
  };

  useEffect(() => {
    if (contract?.delivery?.parity && contract?.delivery?.transport) {
      const conditionText = getDeliveryConditionText(contract.delivery.parity, contract.delivery.transport);
      setContract({
        ...contract,
        delivery: {
          ...contract.delivery,
          conditions: conditionText
        }
      });
    }
  }, [contract?.delivery?.parity, contract?.delivery?.transport]);

  if (loading) return <div className="p-8">Loading...</div>
  if (!contract) return <div className="p-8">Contract not found.</div>
  if (!isMobileCheckComplete) return <div className="p-8">Loading...</div>

  return (
    <SidebarProvider style={{
      "--sidebar-width": "calc(var(--spacing) * 72)",
      "--header-height": "calc(var(--spacing) * 12)",
    } as React.CSSProperties}>
      <AppSidebar variant="inset" />
      <SidebarInset>
        <SiteHeader title="contractlist.bizzcontract" />
        <div className="flex flex-1 flex-col">
          <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-4">
            <div className="flex justify-between items-center px-4 lg:px-6">
              <div className="flex items-center gap-4">
                <h2 className="text-2xl font-bold">{t("bizz.title")}</h2>
                {getStatusBadge(contract?.status || "Draft")}
              </div>
              <div className="flex gap-2">
                <Button variant="outline" onClick={handleBack}>{t("bizz.back")}</Button>
              </div>
            </div>

            {/* Mobile Tab Indicator */}
            {isMobile && (
              <div className="px-4 w-full h-12">
                <div className="bg-muted text-muted-foreground inline-flex h-12 w-full items-center justify-center rounded-lg p-[3px]">
                  <div className="data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-lg font-bold whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
                    {currentTab === "general" && <BuildingIcon className="h-4 w-4" />}
                    {currentTab === "product" && <IconPackage className="h-4 w-4" />}
                    {currentTab === "delivery-condition" && <Scale className="h-4 w-4" />}
                    {currentTab === "payment" && <DollarIcon className="h-4 w-4" />}
                    {currentTab === "delivery" && <Scale className="h-4 w-4" />}
                    {currentTab === "price" && <DollarIcon className="h-4 w-4" />}
                    {currentTab === "notes" && <IconPackage className="h-4 w-4" />}
                    {getTabTitle(currentTab)}
                  </div>
                </div>
              </div>
            )}

            <Tabs value={currentTab} onValueChange={setCurrentTab} className="w-full">
              
              {!isMobile && (
                <TabsList className="px-4 lg:px-6 lg:w-full lg:h-14">
                  <TabsTrigger value="general" className="flex items-center gap-2 lg:text-lg">
                    <BuildingIcon className="h-4 w-4" />
                    {t("bizz.general")}
                  </TabsTrigger>
                  <TabsTrigger value="product" className="flex items-center gap-2 lg:text-lg">
                    <IconPackage className="h-4 w-4" />
                    {t("bizz.product")}
                  </TabsTrigger>
                  <TabsTrigger value="delivery-condition" className="flex items-center gap-2 lg:text-lg">
                    <Scale className="h-4 w-4" />
                    {t("bizz.deliverycondition")}
                  </TabsTrigger>
                  <TabsTrigger value="delivery" className="flex items-center gap-2 lg:text-lg">
                    <Scale className="h-4 w-4" />
                    {t("bizz.deliveryperiod")}
                  </TabsTrigger>
                  <TabsTrigger value="payment" className="flex items-center gap-2 lg:text-lg">
                    <DollarIcon className="h-4 w-4" />
                    {t("bizz.paymentterms")}
                  </TabsTrigger>
                  <TabsTrigger value="notes" className="flex items-center gap-2 lg:text-lg">
                    <IconPackage className="h-4 w-4" />
                    {t("bizz.notes")}
                  </TabsTrigger>
                </TabsList>
              )}

              

              <div className={isMobile ? "block" : "contents"}>
                <TabsContent 
                  value="general" 
                  className="px-4 lg:px-6"
                  style={{ display: isMobile && currentTab !== "general" ? "none" : "block" }}
                >
                  <Card>
                    <CardHeader>
                      <CardTitle className="flex items-center gap-2">
                        <BuildingIcon className="h-5 w-5" />
                        {t("bizz.general")}
                      </CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-4">
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div className="flex flex-col gap-2">
                          <span className="font-medium">{t("bizz.seller")}</span>
                          <div className="flex gap-2">
                            <div className="flex-1">
                              <ComboboxFull 
                                items={companyOptions}
                                value={selectedCompany}
                                onValueChange={(value) => {
                                  setSelectedCompany(value)
                                  setContract({ 
                                    ...contract, 
                                    basicInfo: { 
                                      ...contract.basicInfo, 
                                      sellerCompany: value 
                                    } 
                                  })
                                }}
                                placeholder={t("bizz.selectCompany")}
                                emptyText={t("bizz.noCompanies")}
                                showCreateOption={true}
                                onCreateNew={handleCreateCompany}
                              />
                            </div>
                            <Dialog open={showCompanyDialog} onOpenChange={setShowCompanyDialog}>
                              <DialogTrigger asChild>
                                <Button variant="default" size="icon" className="h-10">
                                  <Plus className="h-4 w-4" />
                                </Button>
                              </DialogTrigger>
                              <DialogContent>
                                <DialogHeader>
                                  <DialogTitle>Add New Company</DialogTitle>
                                </DialogHeader>
                                <div className="space-y-4 py-4">
                                  <div className="space-y-2">
                                    <label className="text-sm font-medium">Company Name</label>
                                    <Input
                                      value={newCompanyName}
                                      onChange={(e) => setNewCompanyName(e.target.value)}
                                      placeholder="Enter company name"
                                    />
                                  </div>
                                  <div className="flex justify-end gap-2">
                                    <Button variant="outline" onClick={() => setShowCompanyDialog(false)}>
                                      Cancel
                                    </Button>
                                    <Button onClick={() => handleCreateCompany(newCompanyName)} disabled={isCreatingCompany}>
                                      {isCreatingCompany ? "Creating..." : "Create Company"}
                                    </Button>
                                  </div>
                                </div>
                              </DialogContent>
                            </Dialog>
                          </div>
                        </div>
                        <div className="flex flex-col gap-2">
                          <span className="font-medium">{t("bizz.sellerVATno")}</span>
                          <Input value={contract.general?.sellerVat || "-"} onChange={e => setContract({ ...contract, general: { ...contract.general, sellerVat: e.target.value } })}/>
                        </div>
                       
                        <div className="flex flex-col gap-2">
                          <span className="font-medium">{t("bizz.buyer")}</span>
                          <div className="flex gap-2">
                            <div className="flex-1">
                              <ComboboxFull 
                                items={companyOptions}
                                value={selectedBuyerCompany}
                                onValueChange={(value) => {
                                  setSelectedBuyerCompany(value)
                                  setContract({ 
                                    ...contract, 
                                    basicInfo: { 
                                      ...contract.basicInfo, 
                                      buyerCompany: value 
                                    } 
                                  })
                                }}
                                placeholder={t("bizz.selectCompany")}
                                emptyText={t("bizz.noCompanies")}
                                showCreateOption={true}
                                onCreateNew={handleCreateCompany}
                              />
                            </div>
                            <Dialog open={showCompanyDialog} onOpenChange={setShowCompanyDialog}>
                              <DialogTrigger asChild>
                                <Button variant="default" size="icon" className="h-10">
                                  <Plus className="h-4 w-4" />
                                </Button>
                              </DialogTrigger>
                              <DialogContent>
                                <DialogHeader>
                                  <DialogTitle>Add New Company</DialogTitle>
                                </DialogHeader>
                                <div className="space-y-4 py-4">
                                  <div className="space-y-2">
                                    <label className="text-sm font-medium">Company Name</label>
                                    <Input
                                      value={newCompanyName}
                                      onChange={(e) => setNewCompanyName(e.target.value)}
                                      placeholder="Enter company name"
                                    />
                                  </div>
                                  <div className="flex justify-end gap-2">
                                    <Button variant="outline" onClick={() => setShowCompanyDialog(false)}>
                                      Cancel
                                    </Button>
                                    <Button onClick={() => handleCreateCompany(newCompanyName)} disabled={isCreatingCompany}>
                                      {isCreatingCompany ? "Creating..." : "Create Company"}
                                    </Button>
                                  </div>
                                </div>
                              </DialogContent>
                            </Dialog>
                          </div>
                        </div>
                        <div className="flex flex-col gap-2">
                          <span className="font-medium">{t("bizz.buyerVATno")}</span>
                          <Input value={contract.general?.buyerVat || "-"} onChange={e => setContract({ ...contract, general: { ...contract.general, buyerVat: e.target.value } })} />
                        </div>
                        
                        <div className="flex flex-col gap-2">
                          <span className="font-medium">Broker's commission (Seller)</span>
                          <div className="flex gap-2">
                            <Input value={contract.general?.sellerBrokerCommission || "-"} onChange={e => setContract({ ...contract, general: { ...contract.general, sellerBrokerCommission: e.target.value } })} className="w-1/2" />
                            <Select value={contract.general?.sellerBrokerCommissionCurrency || "EUR"} onValueChange={val => setContract({ ...contract, general: { ...contract.general, sellerBrokerCommissionCurrency: val } })}>
                              <SelectTrigger className="w-1/2">
                                <SelectValue />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="EUR">EUR</SelectItem>
                                <SelectItem value="USD">USD</SelectItem>
                                <SelectItem value="RON">RON</SelectItem>
                              </SelectContent>
                            </Select>
                          </div>
                        </div>
                        <div className="flex flex-col gap-2">
                          <span className="font-medium">Broker's commission (Buyer)</span>
                          <div className="flex gap-2">
                            <Input value={contract.general?.buyerBrokerCommission || "-"} onChange={e => setContract({ ...contract, general: { ...contract.general, buyerBrokerCommission: e.target.value } })} className="w-1/2" />
                            <Select value={contract.general?.buyerBrokerCommissionCurrency || "USD"} onValueChange={val => setContract({ ...contract, general: { ...contract.general, buyerBrokerCommissionCurrency: val } })}>
                              <SelectTrigger className="w-1/2">
                                <SelectValue />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="EUR">EUR</SelectItem>
                                <SelectItem value="USD">USD</SelectItem>
                                <SelectItem value="RON">RON</SelectItem>
                              </SelectContent>
                            </Select>
                          </div>
                        </div>
                        <div className="flex flex-col gap-2">
                        <span className="font-medium">Broker Company</span>
                          <ComboboxFull
                            items={[
                              { value: "BNK", label: "BNK" },
                              { value: "BRO", label: "BRO" },
                              { value: "SMA", label: "SMA" }
                            ]}
                            value={contract.brokerageCompany || ""}
                            onValueChange={(value) => {
                              setContract({ 
                                ...contract, 
                                brokerageCompany: value 
                              });
                            }}
                            placeholder="Select broker company"
                            emptyText="No broker companies found"
                          />
                        </div>
                        <div className="flex flex-col gap-2">
                        <span className="font-medium">PIC</span>
                          <ComboboxFull
                            items={[
                              { value: "John Smith", label: "John Smith" },
                              { value: "Maria Garcia", label: "Maria Garcia" },
                              { value: "Alex Johnson", label: "Alex Johnson" }
                            ]}
                            value={contract.pic || ""}
                            onValueChange={(value) => {
                              setContract({ 
                                ...contract, 
                                pic: value 
                              });
                            }}
                            placeholder="Select PIC"
                            emptyText="No PICs found"
                          />
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </TabsContent>

                <TabsContent 
                  value="product" 
                  className="px-4 lg:px-6"
                  style={{ display: isMobile && currentTab !== "product" ? "none" : "block" }}
                >
                  <Card>
                    <CardHeader>
                      <CardTitle className="flex items-center gap-2">
                        <IconPackage className="h-5 w-5" />
                        {t("bizz.product")}
                      </CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-4">
                      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                        <div className="flex flex-col gap-2">
                          <span className="font-medium">{t("bizz.productCode")}</span>
                          <ComboboxFull 
                            items={productCodeOptions}
                            value={selectedProductCode}
                            onValueChange={(value) => {
                              setSelectedProductCode(value);
                              setContract({ 
                                ...contract, 
                                basicInfo: { 
                                  ...contract.basicInfo, 
                                  productCode: value 
                                } 
                              });
                            }}
                            placeholder={t("bizz.selectProductCode")}
                            emptyText={t("bizz.noProductCodes")}
                            showCreateOption={true}
                            onCreateNew={(value) => {
                              setProductCode([...productCode, value]);
                              setSelectedProductCode(value);
                            }}
                          />
                        </div>
                        <div className="flex flex-col gap-2">
                          <span className="font-medium">{t("bizz.product")}</span>
                          <Input value={contract.basicInfo?.goods || "-"} readOnly />
                        </div>
                        <div className="flex flex-col gap-2">
                          <span className="font-medium">{t("bizz.cropYear")}</span>
                          <ComboboxFull 
                            items={cropYearOptions}
                            value={selectedCropYear}
                            onValueChange={(value) => {
                              setSelectedCropYear(value);
                              setContract({ 
                                ...contract, 
                                basicInfo: { 
                                  ...contract.basicInfo, 
                                  cropYear: value 
                                } 
                              });
                            }}
                            placeholder={t("bizz.selectCropYear")}
                            emptyText={t("bizz.noCropYears")}
                            showCreateOption={true}
                            onCreateNew={(value) => {
                              setCropYear([...cropYear, value]);
                              setSelectedCropYear(value);
                            }}
                          />
                        </div>
                        <div className="flex flex-col gap-2">
                          <span className="font-medium">{t("bizz.origin")}</span>
                          <ComboboxFull 
                            items={originOptions}
                            value={selectedOrigin}
                            onValueChange={(value) => {
                              setSelectedOrigin(value);
                              setContract({ 
                                ...contract, 
                                basicInfo: { 
                                  ...contract.basicInfo, 
                                  origin: value 
                                } 
                              });
                            }}
                            placeholder={t("bizz.selectOrigin")}
                            emptyText={t("bizz.noOrigins")}
                            showCreateOption={true}
                            onCreateNew={(value) => {
                              setOrigin([...origin, value]);
                              setSelectedOrigin(value);
                            }}
                          />
                        </div>
                      </div>
                      <div className="border rounded p-4 mt-2 bg-muted/100">
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                          <div className="flex flex-col gap-2">
                            <span className="font-medium">Quantity</span>
                            <ComboboxFull 
                              items={quantityOptions}
                              value={contract.productInfo?.quantity?.toString() || ""}
                              onValueChange={(value) => {
                                setContract({ 
                                  ...contract, 
                                  productInfo: { 
                                    ...contract.productInfo, 
                                    quantity: value 
                                  } 
                                });
                              }}
                              placeholder="Select quantity"
                              emptyText="No quantity options"
                              showCreateOption={true}
                              onCreateNew={(value) => {
                                setQuantityOptions(prev => [...prev, { value, label: value }]);
                                setContract({ 
                                  ...contract, 
                                  productInfo: { 
                                    ...contract.productInfo, 
                                    quantity: value 
                                  } 
                                });
                              }}
                            />
                          </div>
                          <div className="flex flex-col gap-2">
                            <span className="font-medium">UM</span>
                            <Select value={contract.productInfo?.unit || "to"} onValueChange={val => setContract({ ...contract, productInfo: { ...contract.productInfo, unit: val } })}>
                              <SelectTrigger>
                                <SelectValue />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="to">to</SelectItem>
                                <SelectItem value="serv">serv</SelectItem>
                              </SelectContent>
                            </Select>
                          </div>
                          <div className="flex flex-col gap-2">
                            <span className="font-medium">Tolerance</span>
                            <div className="flex gap-2">
                              <Select 
                                value={contract.productInfo?.toleranceType || "percentage"} 
                                onValueChange={val => {
                                  const defaultTolerance = val === "percentage" ? "5" : "25";
                                  setContract({ 
                                    ...contract, 
                                    productInfo: { 
                                      ...contract.productInfo, 
                                      toleranceType: val,
                                      tolerance: defaultTolerance
                                    } 
                                  });
                                }}
                              >
                                <SelectTrigger className="w-1/2">
                                  <SelectValue />
                                </SelectTrigger>
                                <SelectContent>
                                  <SelectItem value="percentage">%</SelectItem>
                                  <SelectItem value="tonnage">to</SelectItem>
                                </SelectContent>
                              </Select>
                              <Select 
                                value={contract.productInfo?.tolerance || (contract.productInfo?.toleranceType === "percentage" ? "5" : "25")} 
                                onValueChange={val => setContract({ 
                                  ...contract, 
                                  productInfo: { 
                                    ...contract.productInfo, 
                                    tolerance: val 
                                  } 
                                })}
                              >
                                <SelectTrigger className="w-1/2">
                                  <SelectValue />
                                </SelectTrigger>
                                <SelectContent>
                                  {contract.productInfo?.toleranceType === "percentage" ? (
                                    toleranceOptions.percentage.map(option => (
                                      <SelectItem key={option.value} value={option.value}>
                                        {option.label}
                                      </SelectItem>
                                    ))
                                  ) : (
                                    toleranceOptions.tonnage.map(option => (
                                      <SelectItem key={option.value} value={option.value}>
                                        {option.label}
                                      </SelectItem>
                                    ))
                                  )}
                                </SelectContent>
                              </Select>
                            </div>
                          </div>
                          <div className="flex flex-col gap-2">
                            <span className="font-medium">Option</span>
                            <Select value={contract.productInfo?.quantityOption || "Seller"} onValueChange={val => setContract({ ...contract, productInfo: { ...contract.productInfo, quantityOption: val } })}>
                              <SelectTrigger>
                                <SelectValue />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="Seller">Seller</SelectItem>
                                <SelectItem value="Buyer">Buyer</SelectItem>
                              </SelectContent>
                            </Select>
                          </div>
                          <div className="flex flex-col gap-2">
                            <span className="font-medium">{t("bizz.finalAt")}</span>
                            <Select value={contract.productInfo?.finalAt || "Loading"} onValueChange={val => setContract({ ...contract, productInfo: { ...contract.productInfo, finalAt: val } })}>
                              <SelectTrigger>
                                <SelectValue />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="Loading">Loading</SelectItem>
                                <SelectItem value="Discharge">Discharge</SelectItem>
                              </SelectContent>
                            </Select>
                          </div>
                        </div>
                      </div>
                      <div className="border rounded p-4 mt-2 bg-muted/100">
                        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                          <div className="flex flex-col gap-2">
                            <span className="font-medium">Quality</span>
                            <ComboboxFull 
                              items={qualityOptions}
                              value={contract.productInfo?.quality || ""}
                              onValueChange={(value) => {
                                setContract({ 
                                  ...contract, 
                                  productInfo: { 
                                    ...contract.productInfo, 
                                    quality: value 
                                  } 
                                });
                              }}
                              placeholder="Select quality"
                              emptyText="No quality options"
                              showCreateOption={true}
                              onCreateNew={(value) => {
                                setQualityOptions(prev => [...prev, { value, label: value }]);
                                setContract({ 
                                  ...contract, 
                                  productInfo: { 
                                    ...contract.productInfo, 
                                    quality: value 
                                  } 
                                });
                              }}
                            />
                          </div>
                          <div className="flex flex-col gap-2">
                            <span className="font-medium">Option</span>
                            <Select value={contract.productInfo?.qualityOption || "Buyer"} onValueChange={val => setContract({ ...contract, productInfo: { ...contract.productInfo, qualityOption: val } })}>
                              <SelectTrigger>
                                <SelectValue />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="Seller">Seller</SelectItem>
                                <SelectItem value="Buyer">Buyer</SelectItem>
                              </SelectContent>
                            </Select>
                          </div>
                          <div className="flex flex-col gap-2">
                            <span className="font-medium">Final at</span>
                            <Select value={contract.productInfo?.qualityFinalAt || "Discharge"} onValueChange={val => setContract({ ...contract, productInfo: { ...contract.productInfo, qualityFinalAt: val } })}>
                              <SelectTrigger>
                                <SelectValue />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="Loading">Loading</SelectItem>
                                <SelectItem value="Discharge">Discharge</SelectItem>
                              </SelectContent>
                            </Select>
                          </div>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </TabsContent>

                <TabsContent 
                  value="delivery" 
                  className="px-4 lg:px-6"
                  style={{ display: isMobile && currentTab !== "delivery" ? "none" : "block" }}
                >
                  <Card>
                    <CardHeader>
                      <CardTitle className="flex items-center gap-2">
                        <Scale className="h-5 w-5" />
                        {t("bizz.deliveryperiod")}
                      </CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-4">
                      <div className="grid grid-cols-2 gap-4">
                        <div className="flex flex-col gap-2">
                          <span className="font-medium">Start</span>
                          <Popover>
                            <PopoverTrigger asChild>
                              <Button
                                variant={"outline"}
                                className={cn(
                                  "w-full justify-start text-left font-normal",
                                  !contract.deliveryDateFrom && "text-muted-foreground"
                                )}
                              >
                                <CalendarIcon className="mr-2 h-4 w-4" />
                                {contract.deliveryDateFrom ? format(new Date(contract.deliveryDateFrom.split('/').reverse().join('-')), "dd/MM/yyyy") : format(new Date(), "dd/MM/yyyy")}
                              </Button>
                            </PopoverTrigger>
                            <PopoverContent className="w-auto p-0">
                              <Calendar
                                mode="single"
                                selected={contract.deliveryDateFrom ? new Date(contract.deliveryDateFrom.split('/').reverse().join('-')) : new Date()}
                                onSelect={(date) => setContract({ 
                                  ...contract, 
                                  deliveryDateFrom: date ? format(date, "dd/MM/yy") : undefined
                                })}
                                initialFocus
                              />
                            </PopoverContent>
                          </Popover>
                        </div>
                        <div className="flex flex-col gap-2">
                          <span className="font-medium">End</span>
                          <Popover>
                            <PopoverTrigger asChild>
                              <Button
                                variant={"outline"}
                                className={cn(
                                  "w-full justify-start text-left font-normal",
                                  !contract.deliveryDateTo && "text-muted-foreground"
                                )}
                              >
                                <CalendarIcon className="mr-2 h-4 w-4" />
                                {contract.deliveryDateTo ? format(new Date(contract.deliveryDateTo.split('/').reverse().join('-')), "dd/MM/yyyy") : "Pick a date"}
                              </Button>
                            </PopoverTrigger>
                            <PopoverContent className="w-auto p-0">
                              <Calendar
                                mode="single"
                                selected={contract.deliveryDateTo ? new Date(contract.deliveryDateTo.split('/').reverse().join('-')) : undefined}
                                onSelect={(date) => setContract({ 
                                  ...contract, 
                                  deliveryDateTo: date ? format(date, "dd/MM/yy") : undefined
                                })}
                                initialFocus
                              />
                            </PopoverContent>
                          </Popover>
                        </div>
                        <div className="flex flex-col gap-2">
                          <span className="font-medium">Option</span>
                          <Select value={contract.productInfo?.deliveryOption || "Seller"} onValueChange={val => setContract({ ...contract, productInfo: { ...contract.productInfo, deliveryOption: val } })}>
                            <SelectTrigger>
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="Seller">Seller</SelectItem>
                              <SelectItem value="Buyer">Buyer</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                        <div className="flex flex-col gap-2">
                          <span className="font-medium">Extension</span>
                          <Select value={contract.productInfo?.deliveryExtension ? "Yes" : "No"} onValueChange={val => setContract({ ...contract, productInfo: { ...contract.productInfo, deliveryExtension: val === "Yes" } })}>
                            <SelectTrigger>
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="Yes">Yes</SelectItem>
                              <SelectItem value="No">No</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </TabsContent>

                <TabsContent 
                  value="price" 
                  className="px-4 lg:px-6"
                  style={{ display: isMobile && currentTab !== "price" ? "none" : "block" }}
                >
                  <Card>
                    <CardHeader>
                      <CardTitle className="flex items-center gap-2">
                        <DollarIcon className="h-5 w-5" />
                        {t("bizz.price")}
                      </CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-4">
                      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                        <div className="flex flex-col gap-2">
                          <span className="font-medium">{t("bizz.price")}</span>
                          <div className="flex gap-2">
                            <Input value={contract.financialInfo?.pricePerMt || "-"} onChange={e => setContract({ ...contract, financialInfo: { ...contract.financialInfo, pricePerMt: e.target.value } })} className="w-1/2" />
                            <Select value={contract.financialInfo?.priceCurrency || "EUR"} onValueChange={val => setContract({ ...contract, financialInfo: { ...contract.financialInfo, priceCurrency: val } })}>
                              <SelectTrigger className="w-1/2">
                                <SelectValue />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="EUR">EUR/to</SelectItem>
                                <SelectItem value="USD">USD/to</SelectItem>
                                <SelectItem value="RON">RON/to</SelectItem>
                              </SelectContent>
                            </Select>
                          </div>
                        </div>
                        <div className="flex flex-col gap-2">
                          <span className="font-medium">Price Type</span>
                          <Select 
                            value={contract.financialInfo?.priceType || "Fixed"}
                            onValueChange={val => setContract({ 
                              ...contract, 
                              financialInfo: { 
                                ...contract.financialInfo, 
                                priceType: val 
                              } 
                            })}
                          >
                            <SelectTrigger>
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="Fixed">Fixed</SelectItem>
                              <SelectItem value="MATIF">MATIF</SelectItem>
                              <SelectItem value="Carry">Carry to</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                      </div>
                      {contract.financialInfo?.priceType === "Fixed" && (
                        <div className="space-y-4">
                          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                            <div className="flex flex-col gap-2">
                              <span className="font-medium">Spread1</span>
                              <div className="flex gap-2">
                                <Input 
                                  value={contract.financialInfo?.spread1 || "12"} 
                                  onChange={e => {
                                    const basePrice = Number(contract.financialInfo?.pricePerMt || 0);
                                    const spread1 = Number(e.target.value || 12);
                                    const spread3 = Number(contract.financialInfo?.spread3 || 20);
                                    const calculated = {
                                      price1: basePrice.toString(),
                                      price2: (basePrice - spread1).toString(),
                                      price3: (basePrice - spread3).toString()
                                    };
                                    setContract({ 
                                      ...contract, 
                                      financialInfo: { 
                                        ...contract.financialInfo, 
                                        spread1: e.target.value
                                      },
                                      calculated
                                    });
                                  }} 
                                  className="w-1/2" 
                                />
                                <Select 
                                  value={contract.financialInfo?.spread1Currency || "EUR"} 
                                  onValueChange={val => setContract({ 
                                    ...contract, 
                                    financialInfo: { 
                                      ...contract.financialInfo, 
                                      spread1Currency: val 
                                    } 
                                  })}
                                >
                                  <SelectTrigger className="w-1/2">
                                    <SelectValue />
                                  </SelectTrigger>
                                  <SelectContent>
                                    <SelectItem value="EUR">EUR/to</SelectItem>
                                    <SelectItem value="USD">USD/to</SelectItem>
                                    <SelectItem value="RON">RON/to</SelectItem>
                                  </SelectContent>
                                </Select>
                              </div>
                            </div>
                            <div className="flex flex-col gap-2">
                              <span className="font-medium">Spread3</span>
                              <div className="flex gap-2">
                                <Input 
                                  value={contract.financialInfo?.spread3 || "20"} 
                                  onChange={e => {
                                    const basePrice = Number(contract.financialInfo?.pricePerMt || 0);
                                    const spread1 = Number(contract.financialInfo?.spread1 || 12);
                                    const spread3 = Number(e.target.value || 20);
                                    const calculated = {
                                      price1: basePrice.toString(),
                                      price2: (basePrice - spread1).toString(),
                                      price3: (basePrice - spread3).toString()
                                    };
                                    setContract({ 
                                      ...contract, 
                                      financialInfo: { 
                                        ...contract.financialInfo, 
                                        spread3: e.target.value
                                      },
                                      calculated
                                    });
                                  }} 
                                  className="w-1/2" 
                                />
                                <Select 
                                  value={contract.financialInfo?.spread3Currency || "EUR"} 
                                  onValueChange={val => setContract({ 
                                    ...contract, 
                                    financialInfo: { 
                                      ...contract.financialInfo, 
                                      spread3Currency: val 
                                    } 
                                  })}
                                >
                                  <SelectTrigger className="w-1/2">
                                    <SelectValue />
                                  </SelectTrigger>
                                  <SelectContent>
                                    <SelectItem value="EUR">EUR/to</SelectItem>
                                    <SelectItem value="USD">USD/to</SelectItem>
                                    <SelectItem value="RON">RON/to</SelectItem>
                                  </SelectContent>
                                </Select>
                              </div>
                            </div>
                          </div>
                          <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 mt-4">
                            <div className="flex flex-col gap-2">
                              <span className="font-medium">Price1 (Base Price)</span>
                              <Input 
                                value={contract.financialInfo?.pricePerMt || "0"} 
                                onChange={e => {
                                  const basePrice = Number(e.target.value || 0);
                                  const spread1 = Number(contract.financialInfo?.spread1 || 12);
                                  const spread3 = Number(contract.financialInfo?.spread3 || 20);
                                  const calculated = {
                                    price1: basePrice.toString(),
                                    price2: (basePrice - spread1).toString(),
                                    price3: (basePrice - spread3).toString()
                                  };
                                  setContract({ 
                                    ...contract, 
                                    financialInfo: { 
                                      ...contract.financialInfo, 
                                      pricePerMt: e.target.value
                                    },
                                    calculated
                                  });
                                }}
                              readOnly />
                            </div>
                            <div className="flex flex-col gap-2">
                              <span className="font-medium">Price2 (Price - Spread1)</span>
                              <Input value={contract.calculated?.price2 || "0"} readOnly />
                            </div>
                            <div className="flex flex-col gap-2">
                              <span className="font-medium">Price3 (Price - Spread3)</span>
                              <Input value={contract.calculated?.price3 || "0"} readOnly />
                            </div>
                          </div>
                        </div>
                      )}
                      {contract.financialInfo?.priceType === "MATIF" && (
                        <div className="space-y-4">
                          <div className="flex flex-col gap-2">
                            <span className="font-medium">Matif Euronext Exchange</span>
                            <Select 
                              value={contract.financialInfo?.matifExchange || "march-25"} 
                              onValueChange={val => setContract({ 
                                ...contract, 
                                financialInfo: { 
                                  ...contract.financialInfo, 
                                  matifExchange: val 
                                } 
                              })}
                            >
                              <SelectTrigger>
                                <SelectValue />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="march-25">March 2025</SelectItem>
                                <SelectItem value="september-25">September 2025</SelectItem>
                                <SelectItem value="december-25">December 2025</SelectItem>
                                <SelectItem value="march-26">March 2026</SelectItem>
                              </SelectContent>
                            </Select>
                          </div>
                          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                            <div className="flex flex-col gap-2">
                              <span className="font-medium">Matif Price</span>
                              <div className="flex gap-2">
                                <Input 
                                  value={contract.financialInfo?.matifPrice || "29.50"} 
                                  onChange={e => setContract({ 
                                    ...contract, 
                                    financialInfo: { 
                                      ...contract.financialInfo, 
                                      matifPrice: e.target.value 
                                    } 
                                  })} 
                                  className="w-1/2" 
                                />
                                <Select 
                                  value={contract.financialInfo?.matifPriceCurrency || "EUR"} 
                                  onValueChange={val => setContract({ 
                                    ...contract, 
                                    financialInfo: { 
                                      ...contract.financialInfo, 
                                      matifPriceCurrency: val 
                                    } 
                                  })}
                                >
                                  <SelectTrigger className="w-1/2">
                                    <SelectValue />
                                  </SelectTrigger>
                                  <SelectContent>
                                    <SelectItem value="EUR">EUR</SelectItem>
                                    <SelectItem value="USD">USD</SelectItem>
                                  </SelectContent>
                                </Select>
                              </div>
                            </div>
                            <div className="flex flex-col gap-2">
                              <span className="font-medium">Provisional Price</span>
                              <div className="flex gap-2">
                                <Input 
                                  value={contract.financialInfo?.provisionalPrice || "187.00"} 
                                  onChange={e => setContract({ 
                                    ...contract, 
                                    financialInfo: { 
                                      ...contract.financialInfo, 
                                      provisionalPrice: e.target.value 
                                    } 
                                  })} 
                                  className="w-1/2" 
                                />
                                <Select 
                                  value={contract.financialInfo?.provisionalPriceCurrency || "EUR"} 
                                  onValueChange={val => setContract({ 
                                    ...contract, 
                                    financialInfo: { 
                                      ...contract.financialInfo, 
                                      provisionalPriceCurrency: val 
                                    } 
                                  })}
                                >
                                  <SelectTrigger className="w-1/2">
                                    <SelectValue />
                                  </SelectTrigger>
                                  <SelectContent>
                                    <SelectItem value="EUR">EUR</SelectItem>
                                    <SelectItem value="USD">USD</SelectItem>
                                  </SelectContent>
                                </Select>
                              </div>
                            </div>
                            <div className="flex flex-col gap-2">
                              <span className="font-medium">Collateral</span>
                              <div className="flex gap-2">
                                <Input 
                                  value={contract.financialInfo?.collateral || "170.40"} 
                                  onChange={e => setContract({ 
                                    ...contract, 
                                    financialInfo: { 
                                      ...contract.financialInfo, 
                                      collateral: e.target.value 
                                    } 
                                  })} 
                                  className="w-1/2" 
                                />
                                <Select 
                                  value={contract.financialInfo?.collateralCurrency || "EUR"} 
                                  onValueChange={val => setContract({ 
                                    ...contract, 
                                    financialInfo: { 
                                      ...contract.financialInfo, 
                                      collateralCurrency: val 
                                    } 
                                  })}
                                >
                                  <SelectTrigger className="w-1/2">
                                    <SelectValue />
                                  </SelectTrigger>
                                  <SelectContent>
                                    <SelectItem value="EUR">EUR</SelectItem>
                                    <SelectItem value="USD">USD</SelectItem>
                                  </SelectContent>
                                </Select>
                              </div>
                            </div>
                            <div className="flex flex-col gap-2">
                              <span className="font-medium">Deposit</span>
                              <div className="flex gap-2">
                                <Input 
                                  value={contract.financialInfo?.deposit || "20"} 
                                  onChange={e => setContract({ 
                                    ...contract, 
                                    financialInfo: { 
                                      ...contract.financialInfo, 
                                      deposit: e.target.value 
                                    } 
                                  })} 
                                  className="w-1/2" 
                                />
                                <Select 
                                  value={contract.financialInfo?.depositCurrency || "EUR"} 
                                  onValueChange={val => setContract({ 
                                    ...contract, 
                                    financialInfo: { 
                                      ...contract.financialInfo, 
                                      depositCurrency: val 
                                    } 
                                  })}
                                >
                                  <SelectTrigger className="w-1/2">
                                    <SelectValue />
                                  </SelectTrigger>
                                  <SelectContent>
                                    <SelectItem value="EUR">EUR</SelectItem>
                                    <SelectItem value="USD">USD</SelectItem>
                                  </SelectContent>
                                </Select>
                              </div>
                            </div>
                          </div>
                          <div className="flex flex-col gap-2">
                            <span className="font-medium">Additional Mentions</span>
                            <textarea 
                              value={contract.financialInfo?.priceAdditionalMentions || ""} 
                              onChange={e => setContract({ 
                                ...contract, 
                                financialInfo: { 
                                  ...contract.financialInfo, 
                                  priceAdditionalMentions: e.target.value 
                                } 
                              })} 
                              className="border rounded p-2 min-h-[80px] w-full"
                            />
                          </div>
                        </div>
                      )}
                      {contract.financialInfo?.priceType === "Carry" && (
                        <div className="space-y-4">
                          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                            <div className="flex flex-col gap-2">
                              <span className="font-medium">Price</span>
                              <div className="flex gap-2">
                                <Input 
                                  value={contract.financialInfo?.carryPrice1 || "187"} 
                                  onChange={e => setContract({ 
                                    ...contract, 
                                    financialInfo: { 
                                      ...contract.financialInfo, 
                                      carryPrice1: e.target.value 
                                    } 
                                  })} 
                                  className="w-1/2" 
                                />
                                <Select 
                                  value={contract.financialInfo?.carryPrice1Currency || "EUR"} 
                                  onValueChange={val => setContract({ 
                                    ...contract, 
                                    financialInfo: { 
                                      ...contract.financialInfo, 
                                      carryPrice1Currency: val 
                                    } 
                                  })}
                                >
                                  <SelectTrigger className="w-1/2">
                                    <SelectValue />
                                  </SelectTrigger>
                                  <SelectContent>
                                    <SelectItem value="EUR">EUR/to</SelectItem>
                                    <SelectItem value="USD">USD/to</SelectItem>
                                  </SelectContent>
                                </Select>
                              </div>
                            </div>
                            <div className="flex flex-col gap-2">
                              <span className="font-medium">Carry</span>
                              <div className="flex gap-2">
                                <Input 
                                  value={contract.financialInfo?.carry || "2"} 
                                  onChange={e => setContract({ 
                                    ...contract, 
                                    financialInfo: { 
                                      ...contract.financialInfo, 
                                      carry: e.target.value 
                                    } 
                                  })} 
                                  className="w-1/2" 
                                />
                                <Select 
                                  value={contract.financialInfo?.carryCurrency || "EUR"} 
                                  onValueChange={val => setContract({ 
                                    ...contract, 
                                    financialInfo: { 
                                      ...contract.financialInfo, 
                                      carryCurrency: val 
                                    } 
                                  })}
                                >
                                  <SelectTrigger className="w-1/2">
                                    <SelectValue />
                                  </SelectTrigger>
                                  <SelectContent>
                                    <SelectItem value="EUR">EUR/to</SelectItem>
                                    <SelectItem value="USD">USD/to</SelectItem>
                                  </SelectContent>
                                </Select>
                              </div>
                            </div>
                          </div>
                        </div>
                      )}
                    </CardContent>
                  </Card>
                </TabsContent>

                <TabsContent 
                  value="payment" 
                  className="px-4 lg:px-6"
                  style={{ display: isMobile && currentTab !== "payment" ? "none" : "block" }}
                >
                  <Card>
                    <CardHeader>
                      <CardTitle className="flex items-center gap-2">
                        <DollarIcon className="h-5 w-5" />
                        {t("bizz.paymentterms")}
                      </CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-4">
                      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                        <div className="flex flex-col gap-2">
                          <span className="font-medium">Payment Type</span>
                          <ComboboxFull 
                            items={paymentTypeOptions}
                            value={contract.payment?.type || ""}
                            onValueChange={(value) => {
                              setContract({ 
                                ...contract, 
                                payment: { 
                                  ...contract.payment, 
                                  type: value,
                                  terms: "" // Reset terms when payment type changes
                                } 
                              });
                            }}
                            placeholder="Select payment type"
                            emptyText="No payment type options"
                          />
                        </div>
                        <div className="flex flex-col gap-2">
                          <span className="font-medium">Payment Terms</span>
                          <ComboboxFull 
                            items={contract.payment?.type ? paymentTermsOptions[contract.payment.type as keyof typeof paymentTermsOptions] || [] : []}
                            value={contract.payment?.terms || ""}
                            onValueChange={(value) => {
                              setContract({ 
                                ...contract, 
                                payment: { 
                                  ...contract.payment, 
                                  terms: value 
                                } 
                              });
                            }}
                            placeholder="Select payment terms"
                            emptyText="No payment terms available"
                            disabled={!contract.payment?.type}
                          />
                        </div>
                        <div>
                        <span className="font-medium">Payment Moment</span>
                          <Select value={contract.payment?.moment ? "Before Discharge" : "After Discharge"} onValueChange={val => setContract({ ...contract, payment: { ...contract.payment, moment: val === "Before Discharge" } })}>
                            <SelectTrigger>
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="Before Discharge">Before Discharge</SelectItem>
                              <SelectItem value="After Discharge">After Discharge</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                        <div className="flex flex-col gap-2">
                          <span className="font-medium">Payment Invoice</span>
                          <ComboboxFull 
                            items={invoiceOptions}
                            value={contract.payment?.invoice || ""}
                            onValueChange={(value) => {
                              setContract({ 
                                ...contract, 
                                payment: { 
                                  ...contract.payment, 
                                  invoice: value 
                                } 
                              });
                            }}
                            placeholder="Select invoice type"
                            emptyText="No invoice options"
                          />
                        </div>
                        <div className="flex flex-col gap-2">
                          <span className="font-medium">Guarantees</span>
                          <Select 
                            value={contract.productInfo?.guarantees === false ? "No" : "Yes"} 
                            onValueChange={val => setContract({ 
                              ...contract, 
                              productInfo: { 
                                ...contract.productInfo, 
                                guarantees: val === "Yes" 
                              } 
                            })}
                          >
                            <SelectTrigger>
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="No">No</SelectItem>
                              <SelectItem value="Yes">Yes</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                      </div>

                      {contract.productInfo?.guarantees && (
                        <div className="border rounded p-4 mt-4 bg-muted/100">
                          <div className="space-y-4">
                            <div className="flex flex-col gap-2">
                              <span className="font-medium">Guarantee Title</span>
                              <Input 
                                value={contract.productInfo?.guaranteeTitle || ""} 
                                onChange={e => setContract({ 
                                  ...contract, 
                                  productInfo: { 
                                    ...contract.productInfo, 
                                    guaranteeTitle: e.target.value 
                                  } 
                                })}
                                placeholder="Enter guarantee title"
                              />
                            </div>
                            <div className="flex flex-col gap-2">
                              <span className="font-medium">Guarantee Status</span>
                              <Select 
                                value={guaranteeStatus}
                                onValueChange={setGuaranteeStatus}
                              >
                                <SelectTrigger>
                                  <SelectValue />
                                </SelectTrigger>
                                <SelectContent>
                                  <SelectItem value="not sent">Not Sent</SelectItem>
                                  <SelectItem value="on the way">On The Way</SelectItem>
                                  <SelectItem value="at us">At Us</SelectItem>
                                </SelectContent>
                              </Select>
                            </div>
                          </div>
                        </div>
                      )}
                    </CardContent>
                  </Card>
                </TabsContent>

                <TabsContent 
                  value="delivery-condition" 
                  className="px-4 lg:px-6"
                  style={{ display: isMobile && currentTab !== "delivery-condition" ? "none" : "block" }}
                >
                  <Card>
                    <CardHeader>
                      <CardTitle className="flex items-center gap-2">
                        <Scale className="h-5 w-5" />
                        {t("bizz.deliverycondition")}
                      </CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-4">
                      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                        <div className="flex flex-col gap-2">
                          <span className="font-medium">Incoterms</span>
                          <ComboboxFull 
                            items={parityOptions}
                            value={contract.delivery?.parity || ""}
                            onValueChange={(value) => {
                              setContract({ 
                                ...contract, 
                                delivery: { 
                                  ...contract.delivery, 
                                  parity: value 
                                } 
                              });
                            }}
                            placeholder="Select incoterms"
                            emptyText="No incoterms options"
                          />
                        </div>
                        <div className="flex flex-col gap-2">
                          <span className="font-medium">Location</span>
                          <ComboboxFull 
                            items={locationOptions}
                            value={contract.delivery?.location || ""}
                            onValueChange={(value) => {
                              setContract({ 
                                ...contract, 
                                delivery: { 
                                  ...contract.delivery, 
                                  location: value 
                                } 
                              });
                            }}
                            placeholder="Select location"
                            emptyText="No location options"
                          />
                        </div>
                        <div className="flex flex-col gap-2">
                          <span className="font-medium">Means of Transport</span>
                          <ComboboxFull 
                            items={transportOptions}
                            value={contract.delivery?.transport || ""}
                            onValueChange={(value) => {
                              setContract({ 
                                ...contract, 
                                delivery: { 
                                  ...contract.delivery, 
                                  transport: value 
                                } 
                              });
                            }}
                            placeholder="Select means of transport"
                            emptyText="No transport options"
                          />
                        </div>
                        <div className="flex flex-col gap-2">
                          <span className="font-medium">Delivery Option</span>
                          <Select value={contract.productInfo?.deliveryOption ? "Buyer" : "Seller"} onValueChange={val => setContract({ ...contract, productInfo: { ...contract.productInfo, deliveryOption: val === "Buyer" } })}>
                            <SelectTrigger>
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="Buyer">Buyer</SelectItem>
                              <SelectItem value="Seller">Seller</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                      </div>
                      <div className="flex flex-col gap-2 mt-2">
                        <span className="font-medium">Delivery Conditions</span>
                        <textarea 
                          value={contract.delivery?.conditions || ""} 
                          onChange={e => setContract({ 
                            ...contract, 
                            delivery: { 
                              ...contract.delivery, 
                              conditions: e.target.value 
                            } 
                          })} 
                          className="border rounded p-2 min-h-[80px] w-full"
                        />
                      </div>
                    </CardContent>
                  </Card>
                </TabsContent>

                <TabsContent 
                  value="notes" 
                  className="px-4 lg:px-6"
                  style={{ display: isMobile && currentTab !== "notes" ? "none" : "block" }}
                >
                  <Card>
                    <CardHeader>
                      <CardTitle className="flex items-center gap-2">
                        <IconPackage className="h-5 w-5" />
                        {t("bizz.notes")}
                      </CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-4">
                      <div className="flex flex-col gap-2">
                        <span className="font-medium">Buyer Notes</span>
                        <textarea 
                          value={companyNotes[selectedBuyerCompany]?.buyerNote || ""} 
                          onChange={e => {
                            setCompanyNotes(prev => ({
                              ...prev,
                              [selectedBuyerCompany]: {
                                ...prev[selectedBuyerCompany],
                                buyerNote: e.target.value
                              }
                            }));
                          }}
                          className="border rounded p-2 min-h-[80px] w-full"
                        />
                      </div>
                      <div className="flex flex-col gap-2">
                        <span className="font-medium">Seller Notes</span>
                        <textarea 
                          value={companyNotes[selectedCompany]?.sellerNote || ""} 
                          onChange={e => {
                            setCompanyNotes(prev => ({
                              ...prev,
                              [selectedCompany]: {
                                ...prev[selectedCompany],
                                sellerNote: e.target.value
                              }
                            }));
                          }}
                          className="border rounded p-2 min-h-[80px] w-full"
                        />
                      </div>
                      <div className="flex flex-col gap-2">
                        <span className="font-medium">Internal Notes</span>
                        <textarea 
                          value={contract.notes || ""} 
                          onChange={e => setContract({ ...contract, notes: e.target.value })} 
                          className="border rounded p-2 min-h-[80px] w-full"
                        />
                      </div>
                    </CardContent>
                  </Card>
                </TabsContent>
              </div>
            </Tabs>
          </div>
          <div className="flex justify-between px-4 lg:px-6 pb-2">
            {isMobile ? (
              <>
                <Button 
                  variant="outline" 
                  onClick={handlePrevious} 
                  disabled={currentTab === "general"}
                  className="flex-1 mx-1"
                >
                  Previous
                </Button>
                <Button 
                  variant="outline"
                  onClick={handleSave}
                  className="flex-1 mx-1"
                >
                  Save
                </Button>
                <Button 
                  onClick={handleSendClick}
                  className="flex-1 mx-1"
                >
                  Send
                </Button>
                <Button 
                  onClick={handleNext} 
                  disabled={currentTab === "notes"}
                  className="flex-1 mx-1"
                >
                  Next
                </Button>
              </>
            ) : (
              <div className="flex gap-2">
                <Button variant="outline" onClick={handleSave}>Save Draft</Button>
                <Button onClick={handleSendClick}>Send Bizz</Button>
              </div>
            )}
          </div>

          <Dialog open={showSendDialog} onOpenChange={setShowSendDialog}>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>Confirm Send</DialogTitle>
              </DialogHeader>
              <div className="py-4">
                <p>Are you sure you want to send this contract? This action cannot be undone.</p>
              </div>
              <div className="flex justify-end gap-2">
                <Button variant="outline" onClick={() => setShowSendDialog(false)}>
                  Cancel
                </Button>
                <Button onClick={() => {
                  setShowSendDialog(false);
                  handleSend();
                }}>
                  Send
                </Button>
              </div>
            </DialogContent>
          </Dialog>
        </div>
      </SidebarInset>
    </SidebarProvider>
  )
}