"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 { DataTableContracts } from "@/components/data-table-contracts"
import { ColumnDef, VisibilityState } from "@tanstack/react-table"
import { Badge } from "@/components/ui/badge"
import { format } from "date-fns"
import { IconCircleCheckFilled, IconLoader, IconCircleMinus, IconSearch, IconEye } from "@tabler/icons-react"
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;
  contractType: string;
  basicInfo: {
    sellerCompany: string;
    buyerCompany: string;
    goodsCode: string;
    goods: string;
    cropYear: string;
    origin: string;
    goodsFullDescription: string;
  };
  productInfo: {
    quantity: number;
    executedQuantity: number;
    remainingToBeExecuted: number;
    tolerance: number;
  };
  financialInfo: {
    pricePerMt: number;
    priceCurrency: string;
    paymentDays: number;
  };
  transportInfo: {
    deliveryDateFrom: string;
    deliveryDateTo: string;
    deliveryPlace: string;
    incoterms: string;
  };
  otherInfo: {
    pic: string;
  };
  externalContractNo: string;
}

export default function ContractListPage() {
  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((contracts) => {
        // Sort contracts by date in descending order (newest first)
        const sortedContracts = contracts.sort((a: Contract, b: Contract) => {
          const dateA = new Date(a.contractDate).getTime();
          const dateB = new Date(b.contractDate).getTime();
          return dateB - dateA;
        });
        setContracts(sortedContracts);
      });
  }, []);

  // 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
  })

  const getStatusColor = (status: string) => {
    switch (status.toLowerCase()) {
      case 'open':
        return 'default'
      case 'closed':
        return 'secondary'
      default:
        return 'secondary'
    }
  }

  const columns: ColumnDef<Contract>[] = [
    {
      id: "actions",
      header: t("contractlist.action"),
      cell: ({ row }) => (
        <div className="flex">
          <Link href={`/contracts/${row.original.id}`}>
            <Button size="sm" variant="outline"><IconEye className="h-4 w-4" /></Button>
          </Link>
        </div>
      ),
    },
    {
      accessorKey: "contractNumber",
      header: t("contractlist.contractnumber"),
      cell: ({ row }) => row.original.contractNumber || '-',
    },
    {
      accessorKey: "basicInfo.sellerCompany",
      header: t("contractlist.seller"),
      cell: ({ row }) => row.original.basicInfo?.sellerCompany || '-',
    },
    {
      accessorKey: "basicInfo.buyerCompany",
      header: t("contractlist.buyer"),
      cell: ({ row }) => row.original.basicInfo?.buyerCompany || '-',
    },
    {
      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: "basicInfo.goodsCode",
      header: t("contractlist.goodscode"),
      cell: ({ row }) => row.original.basicInfo?.goodsCode || '-',
    },
    {
      accessorKey: "basicInfo.origin",
      header: t("contractlist.origin"),
      cell: ({ row }) => row.original.basicInfo?.origin || '-',
    },
    {
      accessorKey: "basicInfo.cropYear",
      header: t("contractlist.cropyear"),
      cell: ({ row }) => row.original.basicInfo?.cropYear || '-',
    },
    {
      accessorKey: "basicInfo.goodsFullDescription",
      header: t("contractlist.qualityterms"),
      cell: ({ row }) => row.original.basicInfo?.goodsFullDescription || '-',
    },
    {
      accessorKey: "productInfo.quantity",
      header: t("contractlist.quantity"),
      cell: ({ row }) => {
        const quantity = row.original.productInfo?.quantity;
        return quantity ? `${quantity.toLocaleString()} MT` : '-';
      },
    },
    {
      accessorKey: "transportInfo.incoterms",
      header: t("contractlist.incoterms"),
      cell: ({ row }) => row.original.transportInfo?.incoterms || '-',
    },
    {
      accessorKey: "financialInfo",
      header: t("contractlist.price"),
      cell: ({ row }) => {
        const price = row.original.financialInfo?.pricePerMt;
        const currency = row.original.financialInfo?.priceCurrency;
        return price && currency ? `${price.toLocaleString()} ${currency}` : '-';
      },
    },
    {
      accessorKey: "productInfo.tolerance",
      header: t("contractlist.tolerance"),
      cell: ({ row }) => {
        const tolerance = row.original.productInfo?.tolerance;
        return tolerance ? `${tolerance}%` : '-';
      },
    },
    {
      accessorKey: "transportInfo.deliveryPlace",
      header: t("contractlist.deliveryplace"),
      cell: ({ row }) => row.original.transportInfo?.deliveryPlace || '-',
    },
    {
      accessorKey: "financialInfo.paymentDays",
      header: t("contractlist.paymentdays"),
      cell: ({ row }) => row.original.financialInfo?.paymentDays || '-',
    },
    {
      accessorKey: "transportInfo.deliveryDateFrom",
      header: t("contractlist.startdate"),
      cell: ({ row }) => {
        const date = row.original.transportInfo?.deliveryDateFrom;
        return date ? format(new Date(date), 'dd/MM/yyyy') : '-';
      },
    },
    {
      accessorKey: "transportInfo.deliveryDateTo",
      header: t("contractlist.enddate"),
      cell: ({ row }) => {
        const date = row.original.transportInfo?.deliveryDateTo;
        return date ? format(new Date(date), 'dd/MM/yyyy') : '-';
      },
    },
    {
      accessorKey: "externalContractNo",
      header: t("contractlist.externalcontractno"),
      cell: ({ row }) => row.original.externalContractNo || '-',
    },
  ]

  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("contractlist.contractlist")} />
        <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.contractlist")}</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/newcontract">
                    <Button>{t("contractlist.newcontract")}</Button>
                  </Link>
                </div>
              </div>
              <div className="px-4 lg:px-6 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>
                <Select value={selectedStatus} onValueChange={setSelectedStatus}>
                  <SelectTrigger className="w-[180px]">
                    <SelectValue placeholder="Select status" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Statuses</SelectItem>
                    {statuses.map(status => (
                      <SelectItem key={status} value={status.toLowerCase()}>
                        {status}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
                <Select value={selectedCompany} onValueChange={setSelectedCompany}>
                  <SelectTrigger className="w-[180px]">
                    <SelectValue placeholder="Select company" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Companies</SelectItem>
                    {companies.map(company => (
                      <SelectItem key={company} value={company}>
                        {company}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div className="px-4 lg:px-6">
                <DataTableContracts 
                  data={filteredContracts} 
                  columns={columns}
                  columnVisibility={columnVisibility}
                  onColumnVisibilityChange={setColumnVisibility}
                />
              </div>
            </div>
          </div>
        </div>
      </SidebarInset>
    </SidebarProvider>
  )
}