"use client"

import { Button } from "@/components/ui/button"
import { AppSidebar } from "@/components/app-sidebar"
import { SiteHeader } from "@/components/site-header"
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar"
import Link from "next/link"
import { useEffect, useState } from "react"
import { useTranslation } from "react-i18next"
import { DataTableWithSearch } from "@/components/data-table-with-search"
import { ColumnDef, VisibilityState } from "@tanstack/react-table"
import { Badge } from "@/components/ui/badge"
import { IconCircleCheckFilled, IconLoader, IconCircleMinus, IconCircleX, IconEye, IconSearch, IconCopyPlus } from "@tabler/icons-react"
import { EFacturaSimpleCards } from "@/components/efactura-simple-cards"
import { Input } from "@/components/ui/input"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Combobox } from "@/components/combobox"

interface Contract {
  id: number;
  contractNumber: string;
  contractDate: string;
  brokerageCompany: string;
  status: string;
  sellerBrokerCode: string;
  buyerBrokerCode: string;
  basicInfo: {
    sellerCompany: string;
    buyerCompany: string;
    goodsCode: string;
    goods: string;
    cropYear: string;
    origin: string;
    broker: string;
   
  };
  productInfo: {
    quantity: number;
    unit: string;
    tolerance: string;
    toleranceType: string;
    finalAt: string;
    quality: string;
    qualityFinalAt: string;
  };
  financialInfo: {
    pricePerMt: number;
    priceCurrency: string;
    priceType: string;
  };
  delivery: {
    parity: string;
    location: string;
    transport: string;
  };
  payment: {
    type: string;
    terms: string;
    documents: string;
  };
  guarantees: string;
  invoice: string;
  notes: string;
  general: {
    sellerBrokerCommission: string;
    buyerBrokerCommission: string;
  };
}

export default function BizzListPage() {
  const [contracts, setContracts] = useState<Contract[]>([])
  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
  const [search, setSearch] = useState("")
  const [selectedStatus, setSelectedStatus] = useState<string>("all")
  const [selectedCompany, setSelectedCompany] = useState<string>("all")
  const { t } = useTranslation()

  useEffect(() => {
    fetch("/contracts/api/contractsdata")
      .then(res => res.json())
      .then(setContracts)
  }, [])

  // Get unique companies and statuses for filters
  const companies = [...new Set(contracts.map(c => c.brokerageCompany))]
  const statuses = [...new Set(contracts.map(c => c.status))]

  // Filter contracts based on search and filters
  const filteredContracts = contracts
    .filter(contract => {
      const matchesSearch = 
        contract.contractNumber.toLowerCase().includes(search.toLowerCase()) ||
        contract.brokerageCompany.toLowerCase().includes(search.toLowerCase())
      
      const matchesStatus = selectedStatus === "all" || contract.status.toLowerCase() === selectedStatus.toLowerCase()
      const matchesCompany = selectedCompany === "all" || contract.brokerageCompany === selectedCompany

      return matchesSearch && matchesStatus && matchesCompany
    })
    .sort((a, b) => new Date(b.contractDate).getTime() - new Date(a.contractDate).getTime())

  // Convert contracts to card format
  const cardData = filteredContracts.map(contract => ({
    id: contract.id,
    title: contract.contractNumber,
    company: contract.brokerageCompany,
    contract: contract.basicInfo.goods,
    date: new Date(contract.contractDate).toLocaleDateString(),
    status: contract.status,
    amount: contract.productInfo.quantity,
    currency: "MT",
   
  }))

  // Convert companies and statuses to the format expected by Combobox
  const companyOptions = [
    { value: "all", label: "All Companies" },
    ...companies.map(company => ({ value: company, label: company }))
  ]

  const statusOptions = [
    { value: "all", label: "All Statuses" },
    ...statuses.map(status => ({ value: status.toLowerCase(), label: status }))
  ]

  const columns: ColumnDef<Contract>[] = [
    {
      id: "actions",
      cell: ({ row }) => (
        <div className="flex gap-2">
          <Link href={`/contracts/bizz/${row.original.id}`}>
            <Button size="sm" variant="outline"><IconEye className="h-4 w-4" /></Button>
          </Link>
          <Button 
            size="sm" 
            variant="outline" 
            onClick={() => handleDuplicateContract(row.original)}
          >
            <IconCopyPlus className="h-4 w-4" />
          </Button>
        </div>
      ),
    },
    {
      accessorKey: "status",
      header: t("contractlist.status"),
      cell: ({ row }) => (
        <Badge variant="outline" className="text-muted-foreground px-1.5">
          {row.original.status.toLowerCase() === "open" ? (
            <IconCircleCheckFilled className="fill-green-500 dark:fill-green-400 mr-2" />
          ) : row.original.status.toLowerCase() === "pending" ? (
            <IconLoader className="mr-2" />
          ) : (
            <IconCircleMinus className="fill-gray-950 dark:fill-gray-950 mr-2" />
          )}
          {row.original.status}
        </Badge>
      ),
    },
    {
      accessorKey: "brokerageCompany",
      header: t("bizz.brokerageCompany"),
    },
    {
      accessorKey: "basicInfo.sellerCompany",
      header: t("bizz.seller"),
    },
    {
      accessorKey: "basicInfo.buyerCompany",
      header: t("bizz.buyer"),
    },
    
    {
      accessorKey: "basicInfo.goodsCode",
      header: t("bizz.productCode"),
    },
    {
      accessorKey: "basicInfo.goods",
      header: t("bizz.product"),
    },
    {
      accessorKey: "basicInfo.cropYear",
      header: t("bizz.cropYear"),
    },
    {
      accessorKey: "basicInfo.origin",
      header: t("bizz.origin"),
    },
    {
      accessorKey: "productInfo.quantity",
      header: t("bizz.quantity"),
    },
    {
      accessorKey: "productInfo.tolerance",
      header: "Tolerance",
      cell: ({ row }) => {
        const tolerance = row.original.productInfo?.tolerance || '';
        const toleranceType = row.original.productInfo?.toleranceType || '';
        if (!tolerance) return '';
        return `${tolerance}${toleranceType === 'percentage' ? '%' : ' to'}`;
      }
    },
    {
      accessorKey: "productInfo.finalAt",
      header: t("bizz.finalAt"),
    },
    {
      accessorKey: "productInfo.quality",
      header: "Quality Specs",
    },
    {
      accessorKey: "productInfo.qualityFinalAt",
      header: "Quality Final At",
    },
    {
      accessorKey: "financialInfo.pricePerMt",
      header: t("bizz.price"),
    },
    {
      accessorKey: "financialInfo.priceCurrency",
      header: "Currency",
    },
    {
      accessorKey: "financialInfo.priceType",
      header: "Price Type",
    },
    {
      accessorKey: "delivery.parity",
      header: "Parity",
    },
    {
      accessorKey: "delivery.location",
      header: "Location",
    },
    {
      accessorKey: "delivery.transport",
      header: "Means of Transport",
    },
    {
      accessorKey: "payment.type",
      header: "Payment Type",
    },
    {
      accessorKey: "payment.terms",
      header: "Payment Terms",
    },
    {
      accessorKey: "payment.documents",
      header: "Payment Documents",
      cell: ({ row }) => {
        const goods = row.original.basicInfo?.goods || '';
        const origin = row.original.basicInfo?.origin || '';
        const parity = row.original.delivery?.parity || '';
        const transport = row.original.delivery?.transport || '';
        const status = row.original.status || '';
        
        return `${goods} + ${origin} + ${parity} + ${transport} + ${status}`;
      }
    },
    {
      accessorKey: "general.sellerBrokerCommission",
      header: "Seller Commission",
      cell: ({ row }) => {
        const commission = row.original.general?.sellerBrokerCommission || '';
        const currency = row.original.financialInfo?.priceCurrency || 'EUR';
        if (!commission) return '';
        return `${commission} ${currency}`;
      }
    },
    {
      accessorKey: "general.buyerBrokerCommission",
      header: "Buyer Commission",
      cell: ({ row }) => {
        const commission = row.original.general?.buyerBrokerCommission || '';
        const currency = row.original.financialInfo?.priceCurrency || 'EUR';
        if (!commission) return '';
        return `${commission} ${currency}`;
      }
    },
    {
      accessorKey: "sellerBrokerCode",
      header: "Seller Broker Code",
    },
    {
      accessorKey: "buyerBrokerCode",
      header: "Buyer Broker Code",
    },
    {
      accessorKey: "notes",
      header: "Internal Notes",
    },
  ]
  
  const handleDuplicateContract = async (contract: Contract) => {
    try {
      // Create a new contract object with current date
      const newContract = {
        ...contract,
        id: undefined, // Let the backend assign a new ID
        contractNumber: `${contract.contractNumber}-COPY`,
        contractDate: new Date().toISOString().split('T')[0], // Current date
        basicInfo: {
          ...contract.basicInfo,
          sellerBrokerCode: contract.sellerBrokerCode || "",
          buyerBrokerCode: contract.buyerBrokerCode || "",
        },
        productInfo: {
          ...contract.productInfo,
          tolerance: contract.productInfo?.tolerance || "",
          toleranceType: contract.productInfo?.toleranceType || "percentage",
        },
        payment: {
          type: contract.payment?.type || "",
          terms: contract.payment?.terms || "",
          documents: contract.payment?.documents || "",
        },
        delivery: {
          parity: contract.delivery?.parity || "",
          location: contract.delivery?.location || "",
          transport: contract.delivery?.transport || "",
        },
        general: {
          sellerBrokerCommission: contract.general?.sellerBrokerCommission || "",
          buyerBrokerCommission: contract.general?.buyerBrokerCommission || "",
        }
      }

      // Send POST request to create new contract
      const response = await fetch("/contracts/api/contractsdata", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(newContract),
      })

      if (!response.ok) {
        throw new Error("Failed to duplicate contract")
      }

      const createdContract = await response.json()
      
      // Update the contracts list
      setContracts(prev => [...prev, createdContract])

      // Optionally redirect to the new contract
      window.location.href = `/contracts/bizz/${createdContract.id}`
    } catch (error) {
      console.error("Error duplicating contract:", error)
      // You might want to show an error message to the user here
    }
  }

  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.bizzconf" />
        <div className="flex flex-1 flex-col">
          <div className="@container/main flex flex-1 flex-col gap-2">
            <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
              <div className="flex justify-between items-center px-4 lg:px-6">
                <h2 className="text-2xl font-bold">{t("contractlist.bizzconf")}</h2>
                <div className="flex items-center gap-2">
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button variant="outline">
                        Columns
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end" className="w-[150px]">
                      {columns.map((column) => {
                        const columnId = typeof column.id === 'string' ? column.id : 
                          'accessorKey' in column ? column.accessorKey as string : null;
                        if (!columnId) return null;
                        return (
                          <DropdownMenuCheckboxItem
                            key={columnId}
                            checked={columnVisibility[columnId]}
                            onCheckedChange={(value) =>
                              setColumnVisibility((prev) => ({
                                ...prev,
                                [columnId]: value,
                              }))
                            }
                          >
                            {column.header?.toString()}
                          </DropdownMenuCheckboxItem>
                        );
                      })}
                    </DropdownMenuContent>
                  </DropdownMenu>
                  <Link href={"/contracts/bizz/new"}>
                    <Button variant="default">{t("bizz.addNewBizz")}</Button>
                  </Link>                    
                </div>
              </div>
              <div className="md:py-0 px-4 lg:px-6 md:flex gap-4 items-center">
                <div className="flex-1 relative">
                  <IconSearch className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
                  <Input
                    placeholder="Search contracts..."
                    value={search}
                    onChange={(e) => setSearch(e.target.value)}
                    className="pl-8"
                  />
                </div> 
                <div className="py-4 md:py-0 flex gap-4">
                <Combobox
                  items={statusOptions}
                  value={selectedStatus}
                  onValueChange={setSelectedStatus}
                  placeholder="Select status"
                  emptyText="No statuses found"
                />
                <Combobox
                  items={companyOptions}
                  value={selectedCompany}
                  onValueChange={setSelectedCompany}
                  placeholder="Select company"
                  emptyText="No companies found"
                />
                </div>
              </div>
              <div className="block px-4 lg:px-6">
                <DataTableWithSearch 
                  data={filteredContracts} 
                  columns={columns}
                  columnVisibility={columnVisibility}
                  onColumnVisibilityChange={setColumnVisibility}
                />
              </div>

            </div>
          </div>
        </div>
      </SidebarInset>
    </SidebarProvider>
  )
}