"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 } from "@/components/ui/card"
import { SectionCards } from "@/components/section-cards"
import { Input } from "@/components/ui/input"
import {  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger, } from "@/components/ui/alert-dialog"
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
} from "@/components/ui/dropdown-menu"
import { CardHeader, CardContent, CardFooter } from "@/components/ui/card"
import { useTranslation } from "react-i18next"
import React from "react"
import { Badge } from "@/components/ui/badge"
import { format } from "date-fns"
import Link from "next/link"
import { FileIcon, LinkIcon, UserIcon, BuildingIcon, CalendarIcon, DollarIcon } from "@/components/ui/icons"
import { Truck, Scale, Eye, FileText, Globe, Percent, FileSignature, ClipboardCheck } from "lucide-react"
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Label } from "@/components/ui/label"
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs"
import { Combobox } from "@/components/combobox"
import { Calendar } from "@/components/ui/calendar"
import { Textarea } from "@/components/ui/textarea"

interface Contract {
  id: number;
  contractNumber: string;
  contractDate: string;
  brokerageCompany: string;
  status: string;
  basicInfo: {
    sellerCompany?: string;
    buyerCompany?: string;
    goodsCode?: string;
    cropYear?: string;
    origin?: string;
    buyerEmail?: string;
    sellerEmail?: string;
  };
  productInfo: {
    quantity?: string;
    unit?: string;
    toleranceType?: string;
    tolerance?: string;
    quantityOption?: string;
    finalAt?: string;
    quality?: string;
    qualityOption?: string;
    qualityFinalAt?: string;
    deliveryOption?: string;
    deliveryExtension?: boolean;
    guarantees?: boolean;
    guaranteeTitle?: string;
  };
  financialInfo: {
    priceType?: string;
    pricePerMt?: string;
    priceCurrency?: string;
    spread1?: string;
    spread1Currency?: string;
    spread3?: string;
    spread3Currency?: string;
    matifExchange?: string;
    matifPrice?: string;
    matifPriceCurrency?: string;
    provisionalPrice?: string;
    provisionalPriceCurrency?: string;
    collateral?: string;
    collateralCurrency?: string;
    deposit?: string;
    depositCurrency?: string;
    priceAdditionalMentions?: string;
    carryPrice1?: string;
    carryPrice1Currency?: string;
    carry?: string;
    carryCurrency?: string;
  };
  payment: {
    type?: string;
    moment?: boolean;
    invoice?: string;
  };
  delivery: {
    parity?: string;
    location?: string;
    transport?: string;
    conditions?: string;
  };
  // Section 1: Contract & Product Details
  sellerCompany: string;
  buyerCompany: string;
  goodsCode: string;
  goods: string;
  cropYear: string;
  origin: string;
  goodsFullDescription: string;
  qualityTerms: string;
  quantitymts: number;
  "quantitytolerances-basis": number;
  incoterms: string;
  deliveryPlace: string;
  pricePerMT: number;
  priceCurrency: string;
  carryOrSpreadPrice: string;
  paymentDays: number;
  paymentTerms: string;
  deliveryDateFrom: string;
  deliveryDateTo: string;
  deliveryTermSBOption: string;
  otherTerms: string;
  externalContractNo: string;

  // Section 2: English Details
  goodsFullDescriptionENG: string;
  qualityTermsENG: string;
  quantityToleranceENG: string;
  deliveryPlaceENG: string;
  priceCurrencyENG: string;
  carryOrSpreadPriceENG: string;
  paymentTermsENG: string;
  deliveryTermSBOptionENG: string;
  otherTermsENG: string;

  // Section 3: Commission Details
  whoIsPayingCommission: string;
  sellerCommission: number;
  sellerCommissionCurrency: string;
  buyerCommission: string;
  buyerCommissionCurrency: string;

  // Section 4: Document Types
  contractDraft: string;
  addTypeLb: string;
  artTypeLb: string;

  // Section 5: Broker & Signatures
  sellerBrokerCode: string;
  buyerBrokerCode: string;
  initialQuantity: number;
  guaranteesBO: string;
  statusBO: string;
  sellerSigned: string;
  buyerSigned: string;
  brokerSigned: string;

  // Section 6: Execution & Status
  executedQuantity: number;
  remainingToBeExecuted: number;
  commissionInvoice: number;
  "totalCommisionEUR/mt": number;
  totalValueCommissionEUR: number;
  sellerBrokerCommission: number;
  buyerBrokerCommission: number;
  contractCurrencyDate: string;
  sellerExchangeRate: number;
  buyerExchangeRate: string;
  defaultQTY: string;
  executionYear: string;
  pic: string;
  contractSignedStatus: string;
  contractDateCheck: string;
}

interface TruncatedTextProps {
  text: string;
  maxLength?: number;
}

export default function ContractDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = React.use(params)
  const router = useRouter()
  const { t } = useTranslation()
  const [contract, setContract] = useState<Contract | null>(null)
  const [loading, setLoading] = useState(true)
  const [isMobile, setIsMobile] = useState(false)
  const [isMobileCheckComplete, setIsMobileCheckComplete] = useState(false)
  const [currentTab, setCurrentTab] = useState("contract-details")

  const [isDatePickerOpen, setIsDatePickerOpen] = useState(false);

  const [selectedPic, setSelectedPic] = useState("");
  const [selectedGoodCode, setSelectedGoodCode] = useState("");
  const [selectedGood, setSelectedGood] = useState("");
  const [selectedSellerCompany, setSelectedSellerCompany] = useState("");
  const [selectedBuyerCompany, setSelectedBuyerCompany] = useState("");

  const cropYears = contract ? [contract.cropYear] : [];
  const goods = contract ? [contract.goods] : [];
  const goodsCode = contract ? [contract.goodsCode] : [];
  const companies = contract ? [contract.sellerCompany, contract.buyerCompany] : [];
  const pic = contract ? [contract.pic] : [];

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

  const goodsOptions = [
    {value: "", label: t("contracts.fields.goods")},
    ...goods.map(good => ({value: good, label:good}))
  ]

  const goodsCodeOptions = [
    {value: "", label: t("contracts.fields.goodsCode") },
    ...goodsCode.map(goodCode => ({value: goodCode, label:goodCode}))
  ]

  const personInChargeOptions = [
    {value: "", label: t("contracts.fields.pic")},
    ...pic.map(pic => ({value: pic, label:pic}))
  ]

  const paymentDaysList = ["7", "14", "30", "60"]; 

  const priceCurrencies = ["USD", "EUR", "RON"]; 

  const statuses = ["Open", "Pending", "Closed"]; // Example statuses

  useEffect(() => {
    fetch("/contracts/api/contractsdata")
      .then(res => res.json())
      .then((contracts) => {
        const found = contracts.find((c: Contract) => c.id === Number(id));
        setContract(found);
        setLoading(false);
        if (found) {
          setSelectedPic(found.pic);
          setSelectedSellerCompany(found.sellerCompany);
          setSelectedBuyerCompany(found.buyerCompany);
          setSelectedGoodCode(found.goodsCode);
          setSelectedGood(found.goods);
        }
        console.log(found);
      });
  }, [id]);

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

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

  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 handleNext = () => {
    const tabs = ["contract-details", "english-details", "commission-details", "document-types", "broker-signatures", "execution-status"];
    const currentIndex = tabs.indexOf(currentTab);
    if (currentIndex < tabs.length - 1) {
      setCurrentTab(tabs[currentIndex + 1]);
    }
  };

  const handlePrevious = () => {
    const tabs = ["contract-details", "english-details", "commission-details", "document-types", "broker-signatures", "execution-status"];
    const currentIndex = tabs.indexOf(currentTab);
    if (currentIndex > 0) {
      setCurrentTab(tabs[currentIndex - 1]);
    }
  };

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

  const getTabTitle = (tab: string) => {
    switch(tab) {
      case "contract-details": return t("contracts.sections.contractProductDetails");
      case "english-details": return t("contracts.sections.englishDetails");
      case "commission-details": return t("contracts.sections.commissionDetails");
      case "document-types": return t("contracts.sections.documentTypes");
      case "broker-signatures": return t("contracts.sections.brokerSignatures");
      case "execution-status": return t("contracts.sections.executionStatus");
      default: return "";
    }
  };

  const getStatusBadge = (status: string) => (
    <Badge variant="outline" className="text-muted-foreground px-1.5">
      {status?.toLowerCase() === "open" ? (
        <span className="inline-block w-2 h-2 bg-green-500 rounded-full mr-2" />
      ) : status?.toLowerCase() === "pending" ? (
        <span className="inline-block w-2 h-2 bg-yellow-500 rounded-full mr-2" />
      ) : (
        <span className="inline-block w-2 h-2 bg-gray-400 rounded-full mr-2" />
      )}
      {status}
    </Badge>
  )

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

  // Helper for controlled input
  const handleChange = (field: string, value: any) => {
    setContract((prev: any) => ({ ...prev, [field]: value }))
  }

  const handleDateChange = (date: Date) => {
    const utcDate = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
    setContract((prev: any) => ({ ...prev, contractDate: utcDate.toISOString().split('T')[0] }));
    setIsDatePickerOpen(false);
  };

  return (
    <SidebarProvider
      style={{
        "--sidebar-width": "calc(var(--spacing) * 72)",
        "--header-height": "calc(var(--spacing) * 12)",
      } as React.CSSProperties}
    >
      <AppSidebar variant="inset" />
      <SidebarInset>
        <SiteHeader title={t("contracts.contractdetails")} />
        <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("contracts.contractdetails")}</h2>
                {getStatusBadge(contract.status)}
              </div>
              <div className="flex gap-2">
                <Button variant="outline" onClick={handleBack}>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 === "contract-details" && <BuildingIcon className="h-4 w-4" />}
                    {currentTab === "english-details" && <Globe className="h-4 w-4" />}
                    {currentTab === "commission-details" && <Percent className="h-4 w-4" />}
                    {currentTab === "document-types" && <FileIcon className="h-4 w-4" />}
                    {currentTab === "broker-signatures" && <FileSignature className="h-4 w-4" />}
                    {currentTab === "execution-status" && <ClipboardCheck 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="contract-details" className="flex items-center gap-2 lg:text-lg">
                    <BuildingIcon className="h-4 w-4" />
                    {t("contracts.sections.contractProductDetails")}
                  </TabsTrigger>
                  <TabsTrigger value="english-details" className="flex items-center gap-2 lg:text-lg">
                    <Globe className="h-4 w-4" />
                    {t("contracts.sections.englishDetails")}
                  </TabsTrigger>
                  <TabsTrigger value="commission-details" className="flex items-center gap-2 lg:text-lg">
                    <Percent className="h-4 w-4" />
                    {t("contracts.sections.commissionDetails")}
                  </TabsTrigger>
                  <TabsTrigger value="document-types" className="flex items-center gap-2 lg:text-lg">
                    <FileIcon className="h-4 w-4" />
                    {t("contracts.sections.documentTypes")}
                  </TabsTrigger>
                  <TabsTrigger value="broker-signatures" className="flex items-center gap-2 lg:text-lg">
                    <FileSignature className="h-4 w-4" />
                    {t("contracts.sections.brokerSignatures")}
                  </TabsTrigger>
                  <TabsTrigger value="execution-status" className="flex items-center gap-2 lg:text-lg">
                    <ClipboardCheck className="h-4 w-4" />
                    {t("contracts.sections.executionStatus")}
                  </TabsTrigger>
                </TabsList>
              )}

              <div className={isMobile ? "block" : "contents"}>
                <TabsContent 
                  value="contract-details" 
                  className="px-4 lg:px-6"
                  style={{ display: isMobile && currentTab !== "contract-details" ? "none" : "block" }}
                >
                  <Card>
                    <CardHeader>
                      <CardTitle className="flex items-center gap-2">
                        <FileText className="h-5 w-5" />
                        {t("contracts.sections.contractProductDetails")}
                      </CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-4">
                        <div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
                        <div className="flex flex-col gap-2">
                            <Label>{t("contracts.fields.contractNumber")}</Label>
                            <Input value={contract.contractNumber} readOnly />
                          </div>
                          <div className="flex flex-col gap-2">
                            <Label>{t("contracts.fields.brokerageCompany")}</Label>
                            <Input value={contract.brokerageCompany} readOnly />
                          </div>
                          
                          <div className="flex flex-col gap-2">
                            <Label>{t("contracts.fields.contractDate")}</Label>
                            <button 
                              className="inline-flex items-center gap-2 whitespace-nowrap rounded-md text-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2 w-[260px] justify-start text-left font-normal" 
                              id="date" 
                              type="button" 
                              aria-haspopup="dialog" 
                              aria-expanded={isDatePickerOpen} 
                              aria-controls="date-picker-dialog" 
                              data-state={isDatePickerOpen ? "open" : "closed"}
                              onClick={() => setIsDatePickerOpen(true)}
                            >
                              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-calendar mr-2 h-4 w-4">
                                <path d="M8 2v4"></path>
                                <path d="M16 2v4"></path>
                                <rect width="18" height="18" x="3" y="4" rx="2"></rect>
                                <path d="M3 10h18"></path>
                              </svg>
                              {contract.contractDate}
                            </button>
                          </div>
                          <div className="flex flex-col gap-2">
                            <Label>{t("contracts.fields.status")}</Label>
                            <Select value={contract.status} onValueChange={v => handleChange("status", v)}>
                              <SelectTrigger><SelectValue /></SelectTrigger>
                              <SelectContent>
                                {statuses.map(s => (
                                  <SelectItem key={s} value={s}>{s}</SelectItem>
                                ))}
                              </SelectContent>
                            </Select>
                          </div>
                          <div className="flex flex-col gap-2">
                            <Label>{t("contracts.fields.sellerCompany")}</Label>
                            <Combobox 
                            items={companyOptions}
                            value={selectedSellerCompany}
                            onValueChange={(value) => {
                              setSelectedSellerCompany(value)
                              setContract({ 
                                ...contract, 
                                sellerCompany: value 
                              })
                            }}
                            placeholder={t("bizz.selectCompany")}
                            emptyText={t("bizz.noCompanies")} 
                          />
                          </div>
                          <div className="flex flex-col gap-2">
                            <Label>{t("contracts.fields.buyerCompany")}</Label>
                            <Combobox 
                            items={companyOptions}
                            value={selectedBuyerCompany}
                            onValueChange={(value) => {
                              setSelectedBuyerCompany(value)
                              setContract({ 
                                ...contract, 
                                buyerCompany: value 
                              })
                            }}
                            placeholder={t("bizz.selectCompany")}
                            emptyText={t("bizz.noCompanies")} 
                          />
                          </div>
                          <div className="flex flex-col gap-2">
                            <Label>{t("contracts.fields.goodsCode")}</Label>
                            <Combobox 
                            items={goodsCodeOptions}
                            value={selectedGoodCode}
                            onValueChange={(value) => {
                              setSelectedGoodCode(value)
                              setContract({ 
                                ...contract, 
                                goodsCode: value 
                              })
                            }}
                            placeholder={t("contracts.fields.goodsCode")}
                            emptyText={t("bizz.noCompanies")} 
                          />
                          </div>
                          <div className="flex flex-col gap-2">
                            <Label>{t("contracts.fields.goods")}</Label>
                            <Combobox 
                            items={goodsOptions}
                            value={selectedGood}
                            onValueChange={(value) => {
                              setSelectedGood(value)
                              setContract({ 
                                ...contract, 
                                goods: value 
                              })
                            }}
                            placeholder={t("contracts.fields.goods")}
                            emptyText={t("bizz.noCompanies")} 
                          />
                          </div>
                          <div className="flex flex-col gap-2">
                            <Label>{t("contracts.fields.cropYear")}</Label>
                            <Select value={contract.cropYear} onValueChange={v => handleChange("cropYear", v)}>
                              <SelectTrigger><SelectValue /></SelectTrigger>
                              <SelectContent>
                                {cropYears.map(y => <SelectItem key={y} value={y}>{y}</SelectItem>)}
                              </SelectContent>
                            </Select>
                          </div>
                          <div className="flex flex-col gap-2">
                            <Label>{t("contracts.fields.origin")}</Label>
                            <Input value={contract.origin} onChange={e => handleChange("origin", e.target.value)} />
                          </div>
                        </div>
                        <div className="flex flex-col gap-2 mt-2">
                          <Label>{t("contracts.fields.goodsFullDescription")}</Label>
                          <Textarea value={contract.goodsFullDescription} onChange={e => handleChange("goodsFullDescription", e.target.value)} />
                        </div>
                        <div className="flex flex-col gap-2 mt-2">
                          <Label>{t("contracts.fields.qualityTerms")}</Label>
                          <Textarea value={contract.qualityTerms} onChange={e => handleChange("qualityTerms", e.target.value)} />
                        </div>
                        <div className="grid grid-cols-2 gap-4 mt-2">
                          <div className="flex flex-col gap-2">
                            <Label>{t("contracts.fields.quantitymts")}</Label>
                            <Input type="number" value={contract.quantitymts} onChange={e => handleChange("quantitymts", e.target.value)} />
                          </div>
                          <div className="flex flex-col gap-2">
                            <Label>{t("contracts.fields.quantitytolerances-basis")}</Label>
                            <Input type="number" value={contract["quantitytolerances-basis"]} onChange={e => handleChange("quantitytolerances-basis", e.target.value)} />
                          </div>
                          <div className="flex flex-col gap-2">
                            <Label>{t("contracts.fields.incoterms")}</Label>
                            <Input value={contract.incoterms} onChange={e => handleChange("incoterms", e.target.value)} />
                          </div>
                          <div className="flex flex-col gap-2">
                            <Label>{t("contracts.fields.deliveryPlace")}</Label>
                            <Input value={contract.deliveryPlace} onChange={e => handleChange("deliveryPlace", e.target.value)} />
                          </div>
                          <div className="flex flex-col gap-2">
                            <Label>{t("contracts.fields.pricePerMT")}</Label>
                            <Input type="number" value={contract.pricePerMT} onChange={e => handleChange("pricePerMT", e.target.value)} />
                          </div>
                          <div className="flex flex-col gap-2">
                            <Label>{t("contracts.fields.priceCurrency")}</Label>
                            <Select value={contract.priceCurrency} onValueChange={v => handleChange("priceCurrency", v)}>
                              <SelectTrigger><SelectValue /></SelectTrigger>
                              <SelectContent>
                                {priceCurrencies.map(c => <SelectItem key={c} value={c}>{c}</SelectItem>)}
                              </SelectContent>
                            </Select>
                          </div>
                          <div className="flex flex-col gap-2">
                            <Label>{t("contracts.fields.carryOrSpreadPrice")}</Label>
                            <Input value={contract.carryOrSpreadPrice} onChange={e => handleChange("carryOrSpreadPrice", e.target.value)} />
                          </div>
                          <div className="flex flex-col gap-2">
                            <Label>{t("contracts.fields.paymentDays")}</Label>
                            <Select value={String(contract.paymentDays)} onValueChange={v => handleChange("paymentDays", Number(v))}>
                              <SelectTrigger><SelectValue /></SelectTrigger>
                              <SelectContent>
                                {paymentDaysList.map(d => <SelectItem key={d} value={d}>{d}</SelectItem>)}
                              </SelectContent>
                            </Select>
                          </div>
                        </div>
                        <div className="flex flex-col gap-2 mt-2">
                          <Label>{t("contracts.fields.paymentTerms")}</Label>
                          <Textarea value={contract.paymentTerms} onChange={e => handleChange("paymentTerms", e.target.value)} />
                        </div>
                        <div className="grid grid-cols-2 gap-4 mt-2">
                          <div className="flex flex-col gap-2">
                            <Label>{t("contracts.fields.deliveryDateFrom")}</Label>
                            <Input type="date" value={contract.deliveryDateFrom} onChange={e => handleChange("deliveryDateFrom", e.target.value)} />
                          </div>
                          <div className="flex flex-col gap-2">
                            <Label>{t("contracts.fields.deliveryDateTo")}</Label>
                            <Input type="date" value={contract.deliveryDateTo} onChange={e => handleChange("deliveryDateTo", e.target.value)} />
                          </div>
                        </div>
                        <div className="flex flex-col gap-2 mt-2">
                          <Label>{t("contracts.fields.deliveryTermSBOption")}</Label>
                          <Input value={contract.deliveryTermSBOption} onChange={e => handleChange("deliveryTermSBOption", e.target.value)} />
                        </div>
                        <div className="flex flex-col gap-2 mt-2">
                          <Label>{t("contracts.fields.otherTerms")}</Label>
                          <Textarea value={contract.otherTerms} onChange={e => handleChange("otherTerms", e.target.value)} />
                        </div>
                        <div className="flex flex-col gap-2 mt-2">
                          <Label>{t("contracts.fields.externalContractNo")}</Label>
                          <Input value={contract.externalContractNo} onChange={e => handleChange("externalContractNo", e.target.value)} />
                        </div>
                      </CardContent>
                  </Card>
                </TabsContent>

                <TabsContent 
                  value="english-details" 
                  className="px-4 lg:px-6"
                  style={{ display: isMobile && currentTab !== "english-details" ? "none" : "block" }}
                >
                  <Card>
                    <CardHeader>
                      <CardTitle className="flex items-center gap-2">
                        <Globe className="h-5 w-5" />
                        {t("contracts.sections.englishDetails")}
                      </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("contracts.fields.goodsFullDescriptionENG")}</span><textarea value={contract.goodsFullDescriptionENG || "-"} onChange={e => handleChange("goodsFullDescriptionENG", e.target.value)} className="border rounded p-2 min-h-[60px] w-full"></textarea></div>
                        <div className="flex flex-col gap-2 mt-2"><span className="font-medium">{t("contracts.fields.qualityTermsENG")}</span><textarea value={contract.qualityTermsENG || "-"} onChange={e => handleChange("qualityTermsENG", e.target.value)} className="border rounded p-2 min-h-[60px] w-full"></textarea></div>
                        <div className="flex flex-col gap-2 mt-2"><span className="font-medium">{t("contracts.fields.quantityToleranceENG")}</span><Input value={contract.quantityToleranceENG || "-"} onChange={e => handleChange("quantityToleranceENG", e.target.value)} /></div>
                        <div className="flex flex-col gap-2 mt-2"><span className="font-medium">{t("contracts.fields.deliveryPlaceENG")}</span><Input value={contract.deliveryPlaceENG || "-"} onChange={e => handleChange("deliveryPlaceENG", e.target.value)} /></div>
                        <div className="flex flex-col gap-2 mt-2"><span className="font-medium">{t("contracts.fields.priceCurrencyENG")}</span><Input value={contract.priceCurrencyENG || "-"} onChange={e => handleChange("priceCurrencyENG", e.target.value)} /></div>
                        <div className="flex flex-col gap-2 mt-2"><span className="font-medium">{t("contracts.fields.carryOrSpreadPriceENG")}</span><Input value={contract.carryOrSpreadPriceENG || "-"} onChange={e => handleChange("carryOrSpreadPriceENG", e.target.value)} /></div>
                        <div className="flex flex-col gap-2 mt-2"><span className="font-medium">{t("contracts.fields.paymentTermsENG")}</span><textarea value={contract.paymentTermsENG || "-"} onChange={e => handleChange("paymentTermsENG", e.target.value)} className="border rounded p-2 min-h-[60px] w-full"></textarea></div>
                        <div className="flex flex-col gap-2 mt-2"><span className="font-medium">{t("contracts.fields.deliveryTermSBOptionENG")}</span><Input value={contract.deliveryTermSBOptionENG || "-"} onChange={e => handleChange("deliveryTermSBOptionENG", e.target.value)} /></div>
                        <div className="flex flex-col gap-2 mt-2"><span className="font-medium">{t("contracts.fields.otherTermsENG")}</span><textarea value={contract.otherTermsENG || "-"} onChange={e => handleChange("otherTermsENG", e.target.value)} className="border rounded p-2 min-h-[60px] w-full"></textarea></div>
                      </div>
                    </CardContent>
                  </Card>
                </TabsContent>

                <TabsContent 
                  value="commission-details" 
                  className="px-4 lg:px-6"
                  style={{ display: isMobile && currentTab !== "commission-details" ? "none" : "block" }}
                >
                  <Card>
                    <CardHeader>
                      <CardTitle className="flex items-center gap-2">
                        <Percent className="h-5 w-5" />
                        {t("contracts.sections.commissionDetails")}
                      </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("contracts.fields.whoIsPayingCommission")}</span><Input value={contract.whoIsPayingCommission || "-"} onChange={e => handleChange("whoIsPayingCommission", e.target.value)} /></div>
                        <div className="flex flex-col gap-2"><span className="font-medium">{t("contracts.fields.sellerCommission")}</span><Input value={contract.sellerCommission || "-"} onChange={e => handleChange("sellerCommission", e.target.value)} /></div>
                        <div className="flex flex-col gap-2"><span className="font-medium">{t("contracts.fields.sellerCommissionCurrency")}</span><Input value={contract.sellerCommissionCurrency || "-"} onChange={e => handleChange("sellerCommissionCurrency", e.target.value)} /></div>
                        <div className="flex flex-col gap-2"><span className="font-medium">{t("contracts.fields.buyerCommission")}</span><Input value={contract.buyerCommission || "-"} onChange={e => handleChange("buyerCommission", e.target.value)} /></div>
                        <div className="flex flex-col gap-2"><span className="font-medium">{t("contracts.fields.buyerCommissionCurrency")}</span><Input value={contract.buyerCommissionCurrency || "-"} onChange={e => handleChange("buyerCommissionCurrency", e.target.value)} /></div>
                      </div>
                    </CardContent>
                  </Card>
                </TabsContent>

                <TabsContent 
                  value="document-types" 
                  className="px-4 lg:px-6"
                  style={{ display: isMobile && currentTab !== "document-types" ? "none" : "block" }}
                >
                  <Card>
                    <CardHeader>
                      <CardTitle className="flex items-center gap-2">
                        <FileIcon className="h-5 w-5" />
                        {t("contracts.sections.documentTypes")}
                      </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("contracts.fields.contractDraft")}</span><Input value={contract.contractDraft || "-"} onChange={e => handleChange("contractDraft", e.target.value)} /></div>
                        <div className="flex flex-col gap-2"><span className="font-medium">{t("contracts.fields.addTypeLb")}</span><Input value={contract.addTypeLb || "-"} onChange={e => handleChange("addTypeLb", e.target.value)} /></div>
                        <div className="flex flex-col gap-2"><span className="font-medium">{t("contracts.fields.artTypeLb")}</span><Input value={contract.artTypeLb || "-"} onChange={e => handleChange("artTypeLb", e.target.value)} /></div>
                      </div>
                    </CardContent>
                  </Card>
                </TabsContent>

                <TabsContent 
                  value="broker-signatures" 
                  className="px-4 lg:px-6"
                  style={{ display: isMobile && currentTab !== "broker-signatures" ? "none" : "block" }}
                >
                  <Card>
                    <CardHeader>
                      <CardTitle className="flex items-center gap-2">
                        <FileSignature className="h-5 w-5" />
                        {t("contracts.sections.brokerSignatures")}
                      </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("contracts.fields.sellerBrokerCode")}</span><Input value={contract.sellerBrokerCode || "-"} onChange={e => handleChange("sellerBrokerCode", e.target.value)} /></div>
                        <div className="flex flex-col gap-2"><span className="font-medium">{t("contracts.fields.buyerBrokerCode")}</span><Input value={contract.buyerBrokerCode || "-"} onChange={e => handleChange("buyerBrokerCode", e.target.value)} /></div>
                        <div className="flex flex-col gap-2"><span className="font-medium">{t("contracts.fields.initialQuantity")}</span><Input value={contract.initialQuantity || "-"} onChange={e => handleChange("initialQuantity", e.target.value)} /></div>
                        <div className="flex flex-col gap-2"><span className="font-medium">{t("contracts.fields.guaranteesBO")}</span><Input value={contract.guaranteesBO || "-"} onChange={e => handleChange("guaranteesBO", e.target.value)} /></div>
                        <div className="flex flex-col gap-2"><span className="font-medium">{t("contracts.fields.statusBO")}</span><Input value={contract.statusBO || "-"} onChange={e => handleChange("statusBO", e.target.value)} /></div>
                        <div className="flex flex-col gap-2"><span className="font-medium">{t("contracts.fields.sellerSigned")}</span><Input value={contract.sellerSigned || "-"} onChange={e => handleChange("sellerSigned", e.target.value)} /></div>
                        <div className="flex flex-col gap-2"><span className="font-medium">{t("contracts.fields.buyerSigned")}</span><Input value={contract.buyerSigned || "-"} onChange={e => handleChange("buyerSigned", e.target.value)} /></div>
                        <div className="flex flex-col gap-2"><span className="font-medium">{t("contracts.fields.brokerSigned")}</span><Input value={contract.brokerSigned || "-"} onChange={e => handleChange("brokerSigned", e.target.value)} /></div>
                      </div>
                    </CardContent>
                  </Card>
                </TabsContent>

                <TabsContent 
                  value="execution-status" 
                  className="px-4 lg:px-6"
                  style={{ display: isMobile && currentTab !== "execution-status" ? "none" : "block" }}
                >
                  <Card>
                    <CardHeader>
                      <CardTitle className="flex items-center gap-2">
                        <ClipboardCheck className="h-5 w-5" />
                        {t("contracts.sections.executionStatus")}
                      </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("contracts.fields.executedQuantity")}</span>
                          <Input value={contract.executedQuantity || "-"} onChange={e => handleChange("executedQuantity", e.target.value)} /></div>
                        <div className="flex flex-col gap-2">
                          <span className="font-medium">{t("contracts.fields.remainingToBeExecuted")}</span>
                          <Input value={contract.remainingToBeExecuted || "-"} onChange={e => handleChange("remainingToBeExecuted", e.target.value)} /></div>
                        <div className="flex flex-col gap-2">
                          <span className="font-medium">{t("contracts.fields.commissionInvoice")}</span>
                          <Input value={contract.commissionInvoice || "-"} onChange={e => handleChange("commissionInvoice", e.target.value)} /></div>
                        <div className="flex flex-col gap-2">
                          <span className="font-medium">{t("contracts.fields.totalCommisionEUR/mt")}</span>
                          <Input value={contract["totalCommisionEUR/mt"] || "-"} onChange={e => handleChange("totalCommisionEUR/mt", e.target.value)} /></div>
                        <div className="flex flex-col gap-2">
                          <span className="font-medium">{t("contracts.fields.totalValueCommissionEUR")}</span>
                          <Input value={contract.totalValueCommissionEUR || "-"} onChange={e => handleChange("totalValueCommissionEUR", e.target.value)} /></div>
                        <div className="flex flex-col gap-2">
                          <span className="font-medium">{t("contracts.fields.sellerBrokerCommission")}</span>
                          <Input value={contract.sellerBrokerCommission || "-"} onChange={e => handleChange("sellerBrokerCommission", e.target.value)} /></div>
                        <div className="flex flex-col gap-2">
                          <span className="font-medium">{t("contracts.fields.buyerBrokerCommission")}</span>
                          <Input value={contract.buyerBrokerCommission || "-"} onChange={e => handleChange("buyerBrokerCommission", e.target.value)} /></div>
                        <div className="flex flex-col gap-2">
                          <span className="font-medium">{t("contracts.fields.contractCurrencyDate")}</span>
                          <Input value={contract.contractCurrencyDate || "-"} onChange={e => handleChange("contractCurrencyDate", e.target.value)} /></div>
                        <div className="flex flex-col gap-2">
                          <span className="font-medium">{t("contracts.fields.sellerExchangeRate")}</span>
                          <Input value={contract.sellerExchangeRate || "-"} onChange={e => handleChange("sellerExchangeRate", e.target.value)} /></div>
                        <div className="flex flex-col gap-2">
                          <span className="font-medium">{t("contracts.fields.buyerExchangeRate")}</span>
                          <Input value={contract.buyerExchangeRate || "-"} onChange={e => handleChange("buyerExchangeRate", e.target.value)} /></div>
                        <div className="flex flex-col gap-2">
                          <span className="font-medium">{t("contracts.fields.defaultQTY")}</span>
                          <Input value={contract.defaultQTY || "-"} onChange={e => handleChange("defaultQTY", e.target.value)} /></div>
                        <div className="flex flex-col gap-2">
                        <Label>{t("contracts.fields.executionYear")}</Label>
                            <Select value={contract.executionYear} onValueChange={v => handleChange("executionYear", v)}>
                              <SelectTrigger><SelectValue /></SelectTrigger>
                              <SelectContent>
                                {cropYears.map(y => <SelectItem key={y} value={y}>{y}</SelectItem>)}
                              </SelectContent>
                            </Select>
                        </div>
                        <div className="flex flex-col gap-2">
                          <Label>{t("contracts.fields.pic")}</Label>
                          <Combobox 
                          items={personInChargeOptions}
                          value={selectedPic}
                          onValueChange={(value) => {
                            setSelectedPic(value);
                            setContract({ 
                              ...contract, 
                              pic: value 
                            });
                          }}
                          placeholder={t("contracts.fields.pic")}
                          emptyText={t("bizz.noCompanies")} 
                          />
                        </div>
                        <div className="flex flex-col gap-2">
                          <span className="font-medium">{t("contracts.fields.contractSignedStatus")}</span>
                          <Input value={contract.contractSignedStatus || "-"} onChange={e => handleChange("contractSignedStatus", e.target.value)} /></div>
                        <div className="flex flex-col gap-2">
                          <span className="font-medium">{t("contracts.fields.contractDateCheck")}</span>
                          <Input value={contract.contractDateCheck || "-"} onChange={e => handleChange("contractDateCheck", e.target.value)} /></div>
                      </div>
                    </CardContent>
                  </Card>
                </TabsContent>
              </div>
            </Tabs>
          </div>
          <div className="flex justify-between px-4 mt-4 lg:px-6 pb-2">
            {isMobile ? (
              <>
                <Button 
                  variant="outline" 
                  onClick={handlePrevious}
                  disabled={currentTab === "contract-details"}
                  className="flex-1 mx-1"
                  type="button"
                >
                  Previous
                </Button>
                <Button 
                  variant="outline"
                  onClick={handleSave}
                  className="flex-1 mx-1"
                  type="submit"
                >
                  Save
                </Button>
                <Button 
                  onClick={handleSend}
                  className="flex-1 mx-1"
                  type="button"
                >
                  Send
                </Button>
                <Button 
                  onClick={handleNext}
                  disabled={currentTab === "execution-status"}
                  className="flex-1 mx-1"
                  type="button"
                >
                  Next
                </Button>
              </>
            ) : (
              <div className="flex gap-2">
                <Button variant="outline" onClick={handleSave}>Save Draft</Button>
                <Button onClick={handleSend}>Send Contract</Button>
              </div>
            )}
          </div>
        </div>
         {/* Date Picker Dialog */}
         <AlertDialog open={isDatePickerOpen} onOpenChange={setIsDatePickerOpen}>
          <AlertDialogContent className="max-w-sm p-4">
            <AlertDialogHeader>
              <AlertDialogTitle>Selecteaza Data</AlertDialogTitle>
              <AlertDialogDescription>Selecteaza data pentru contract.</AlertDialogDescription>
            </AlertDialogHeader>
            <Calendar 
              mode="single"
              selected={new Date(contract.contractDate)} 
              onSelect={(date) => {
                if (date) {
                  handleDateChange(date);
                }
              }} 
              className="rounded-md border"
            />
            <AlertDialogFooter>
              <AlertDialogCancel onClick={() => setIsDatePickerOpen(false)}>Cancel</AlertDialogCancel>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialog>
      </SidebarInset>
    </SidebarProvider>
  )
}