"use client"

import { AppSidebar } from "@/components/app-sidebar"
import { SiteHeader } from "@/components/site-header"
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar"
import { useEffect, useState } from "react"
import Link from "next/link"
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 { 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 { Button } from "@/components/ui/button"
import { useRouter } from "next/navigation"
import { Combobox } from "@/components/combobox"

type Invoice = {
  id: number;
  "Contract number": string;
  "Company": string;
  "Seller Company": string;
  "Buyer Company": string;
  "Goods": string;
  "Basis": string;
  "Basis_1": string;
  "Price per mt": string;
  "Currency": string;
  "Payment Terms": string;
  "Invoice no": string;
  "Invoice date": string;
  "Invoice due date": string;
  " Invoice Quantity ": string;
  " Invoice Price ": string;
  " Invoice Total Value ": string;
  " Invoice Currency ": string;
  " Cashed in value "?: string;
  " Open amount ": string;
  " Invoice saved ": string;
  " Delay days ": string;
  " QTTY CONTRACT ": string;
  "MARGIN": string;
  " QTTY UNDER MARGIN ": string;
  "Details"?: string;
}

export default function DeliveryInvoicesInputPage() {
  const router = useRouter()
  const [invoices, setInvoices] = useState<Invoice[]>([])
  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
  const [search, setSearch] = useState("")
  const [selectedCompany, setSelectedCompany] = useState<string>("all")
  const { t } = useTranslation()

  useEffect(() => {
    console.log("Fetching data...");
    fetch("/execution-operations/api")
      .then(res => {
        console.log("Response status:", res.status);
        return res.json();
      })
      .then(data => {
        console.log("Received data:", data);
        setInvoices(data.invoices);
      })
      .catch(error => {
        console.error("Error fetching data:", error);
      });
  }, [])

  // Filter invoices based on search and filters
  const filteredInvoices = invoices.filter(invoice => {
    const matchesSearch = 
      (invoice["Contract number"]?.toLowerCase() || "").includes(search.toLowerCase()) ||
      (invoice["Invoice no"]?.toLowerCase() || "").includes(search.toLowerCase()) ||
      (invoice["Company"]?.toLowerCase() || "").includes(search.toLowerCase()) ||
      (invoice["Seller Company"]?.toLowerCase() || "").includes(search.toLowerCase()) ||
      (invoice["Buyer Company"]?.toLowerCase() || "").includes(search.toLowerCase())
    
      const matchesCompany =
      selectedCompany === "all" ||
      invoice["Company"] === selectedCompany ||
      invoice["Seller Company"] === selectedCompany ||
      invoice["Buyer Company"] === selectedCompany;

    return matchesSearch && matchesCompany
  })
   // Convert companies and statuses to the format expected by Combobox
   const companyOptions = [
    { value: "all", label: "All Companies" },
    ...[
      ...new Set(
        invoices.flatMap(c => [
          c["Company"] || "",
          c["Seller Company"] || "",
          c["Buyer Company"] || ""
        ]).filter(Boolean)
      )
    ].map(company => ({ value: company, label: company }))
  ];


  const columns: ColumnDef<Invoice>[] = [
    {
      accessorKey: "Contract number",
      header: "Contract Number",
    },
    {
      accessorKey: "Seller Company",
      header: "Seller",
    },
    {
      accessorKey: "Buyer Company",
      header: "Buyer",
    },
    {
      accessorKey: "Goods",
      header: "Goods",
    },
    {
      accessorKey: "Invoice due date",
      header: "Invoice Due Date",
      cell: ({ row }) => row.original["Invoice due date"] ? new Date(row.original["Invoice due date"]).toLocaleDateString() : "-",
    },
    {
      accessorKey: " Invoice Total Value ",
      header: "Invoice Total Value",
      cell: ({ row }) => {
        const value = row.original[" Invoice Total Value "]?.trim() || "-";
        const currency = row.original[" Invoice Currency "]?.trim() || "";
        return value === "-" ? "-" : `${value} ${currency}`;
      },
    },
    {
      accessorKey: " Invoice Quantity ",
      header: "Open Qtty",
      cell: ({ row }) => row.original[" Invoice Quantity "]?.trim() || "-",
    },
    {
      id: "actions",
      header: "View",
      cell: ({ row }) => (
        <div className="flex">
          <Link href={`/execution-operations/deliveryinvoicesinput/${row.original.id}`}>
            <Button size="sm" variant="outline"><IconEye className="h-4 w-4" />{t("products.view")}</Button>
          </Link>
        </div>
      ),
    },
  ]

  return (
    <SidebarProvider
      style={{
        "--sidebar-width": "calc(var(--spacing) * 72)",
        "--header-height": "calc(var(--spacing) * 12)",
      } as React.CSSProperties}
    >
      <AppSidebar variant="inset" />
      <SidebarInset>
        <SiteHeader />
        <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("deliveryInvoicesInput.title")}</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="/execution-operations/deliveryinvoicesinput/new">
                    <Button>{t("deliveryInvoicesInput.newDeliveryInvoice")}</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 invoices..."
                    value={search}
                    onChange={(e) => setSearch(e.target.value)}
                    className="pl-8"
                  />
                </div>
                <Combobox
                  items={companyOptions}
                  value={selectedCompany}
                  onValueChange={setSelectedCompany}
                  placeholder="Select company"
                  emptyText="No companies found"
                />
              </div>
              <div className="px-4 lg:px-6">
                  <DataTableContracts 
                    data={filteredInvoices} 
                    columns={columns}
                    columnVisibility={columnVisibility}
                    onColumnVisibilityChange={setColumnVisibility}
                  />
              </div>
            </div>
          </div>
        </div>
      </SidebarInset>
    </SidebarProvider>
  )
}