"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 { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { IconCircleCheckFilled, IconLoader, IconCircleMinus } from "@tabler/icons-react"
import { useTranslation } from "react-i18next"
import { DataTableContracts } from "@/components/data-table-contracts"
import { ColumnDef, VisibilityState } from "@tanstack/react-table"
import { Combobox } from "@/components/combobox"
import Link from "next/link"
import { IconEye } from "@tabler/icons-react"

interface DeliveryOrder {
  id: string;
  orderId: string;
  contractNumber: string;
  status: string;
  personInCharge: string;
  incoterms: {
    Incoterms_Code: string;
    Propunere_unit_masura_RO: string;
    Propunere_unit_masura_ENG: string;
  };
}

export default function ParityPage() {
  const router = useRouter()
  const { t } = useTranslation()
  const [deliveryOrders, setDeliveryOrders] = useState<DeliveryOrder[]>([])
  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
  const [searchInput, setSearchInput] = useState("")
  const [selectedStatus, setSelectedStatus] = useState<string | null>(null)
  const [selectedContract, setSelectedContract] = useState<string | null>(null)

  useEffect(() => {
    fetch('/delivery-conditions/api/delivery')
      .then(res => res.json())
      .then(data => {
        const ordersWithId = data.map((order: DeliveryOrder, index: number) => ({
          ...order,
          id: (index + 1).toString()
        }))
        setDeliveryOrders(ordersWithId)
      })
  }, [])

  const uniqueStatuses = Array.from(new Set(deliveryOrders.map(order => order.status)))
  const uniqueContracts = Array.from(new Set(deliveryOrders.map(order => order.contractNumber)))

  const filteredOrders = deliveryOrders.filter(order => {
    const matchesSearch = 
      order.contractNumber.toLowerCase().includes(searchInput.toLowerCase()) ||
      order.orderId.toLowerCase().includes(searchInput.toLowerCase()) ||
      order.personInCharge.toLowerCase().includes(searchInput.toLowerCase())
    const matchesStatus = !selectedStatus || order.status === selectedStatus
    const matchesContract = !selectedContract || order.contractNumber === selectedContract
    return matchesSearch && matchesStatus && matchesContract
  })

  const columns: ColumnDef<DeliveryOrder>[] = [
    {
      accessorKey: "contractNumber",
      header: "Contract Number",
    },
    {
      accessorKey: "orderId",
      header: "Order ID",
    },
    {
      accessorKey: "status",
      header: "Status",
      cell: ({ row }) => {
        const status = row.getValue("status") as string
        return (
          <Badge variant="outline" className="text-muted-foreground px-1.5">
            {status.toLowerCase() === "completed" ? (
              <IconCircleCheckFilled className="fill-green-500 dark:fill-green-400 mr-2" />
            ) : status.toLowerCase() === "pending" ? (
              <IconLoader className="mr-2" />
            ) : (
              <IconCircleMinus className="fill-gray-950 dark:fill-gray-950 mr-2" />
            )}
            {status}
          </Badge>
        )
      },
    },
    {
      accessorKey: "personInCharge",
      header: "Person in Charge",
    },
    {
      accessorKey: "incoterms.Incoterms_Code",
      header: "Incoterms Code",
    },
    {
      accessorKey: "incoterms.Propunere_unit_masura_RO",
      header: "Unit Measure RO",
    },
    {
      accessorKey: "incoterms.Propunere_unit_masura_ENG",
      header: "Unit Measure ENG",
    },
    {
      id: "actions",
      cell: ({ row }) => {
        const order = row.original
        return (
        <Link href={`/delivery-conditions/parity/${row.original.orderId}`}>
          <Button size="sm" variant="outline"><IconEye className="h-4 w-4" />{t("products.view")}</Button>
        </Link>
        )
      },
    },
  ]

  return (
    <SidebarProvider style={{
      "--sidebar-width": "calc(var(--spacing) * 72)",
      "--header-height": "calc(var(--spacing) * 12)",
    } as React.CSSProperties}>
      <AppSidebar variant="inset" />
      <SidebarInset>
        <SiteHeader title="Parity" />
        <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">
              <h2 className="text-2xl font-bold">Parity List</h2>
              <Button onClick={() => router.push("/delivery-conditions/parity/new")}>
                New Parity
              </Button>
            </div>
            <div className="flex flex-col gap-4 px-4 lg:px-6">
              <div className="flex flex-col gap-4 md:flex-row md:items-center">
                <Input
                  placeholder="Search by contract number, order ID, or person in charge..."
                  value={searchInput}
                  onChange={(e) => setSearchInput(e.target.value)}
                  className="md:w-[400px]"
                />
                <div className="flex gap-4">
                  <Combobox
                    items={uniqueStatuses.map(status => ({ label: status, value: status }))}
                    value={selectedStatus}
                    onChange={setSelectedStatus}
                    placeholder="Filter by status"
                    className="w-[200px]"
                  />
                  <Combobox
                    items={uniqueContracts.map(contract => ({ label: contract, value: contract }))}
                    value={selectedContract}
                    onChange={setSelectedContract}
                    placeholder="Filter by contract"
                    className="w-[200px]"
                  />
                </div>
              </div>
              <DataTableContracts
                data={filteredOrders}
                columns={columns}
                columnVisibility={columnVisibility}
                onColumnVisibilityChange={setColumnVisibility}
              />
            </div>
          </div>
        </div>
      </SidebarInset>
    </SidebarProvider>
  )
}