"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 { useTranslation } from "react-i18next"
import { DataTableSimple } from "@/components/data-table-simple"
import { ColumnDef, VisibilityState } from "@tanstack/react-table"
import { Badge } from "@/components/ui/badge"
import { IconSearch, IconUpload, IconPlus, IconEye, IconCircleCheckFilled, IconCircleMinus, IconLoader } from "@tabler/icons-react"
import { Input } from "@/components/ui/input"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import Link from "next/link"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

interface Transport {
  id: number;
  contractNumber: string;
  noticeNumber: string;
  noticeDate: string;
  supplier: string;
  buyer: string;
  product: string;
  loadingPlace: string;
  unloadingPlace: string;
  quantity: number;
  transportContractNumber: string;
  transportInvoiceNumber: string;
  transportInvoiceDate: string;
  transportPrice: number;
  transportCurrency: string;
  isInvoiced: boolean;
  status: "OPEN" | "PENDING" | "CLOSED";
}

export default function TransportPage() {
  const router = useRouter()
  const [transports, setTransports] = useState<Transport[]>([])
  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
  const [search, setSearch] = useState("")
  const [selectedStatus, setSelectedStatus] = useState<string>("all")
  const [selectedInvoiced, setSelectedInvoiced] = useState<string>("all")
  const { t } = useTranslation()

  useEffect(() => {
    fetch("/api/execution-operations/transport")
      .then(res => res.json())
      .then((data) => {
        // Map JSON fields to Transport interface
        const mapped = data.map((item: any, idx: number) => ({
          id: idx + 1,
          contractNumber: item.nr_contract_achizitie,
          noticeNumber: item.numar_aviz_vanzar,
          noticeDate: item.data_aviz_achizitie,
          supplier: item.denumire_furnizor,
          buyer: item.denumire_cumparator,
          product: item.produs,
          loadingPlace: item.loc_incarcare,
          unloadingPlace: item.loc_descarcare,
          quantity: item.cantitate_avizata_incarcata,
          transportContractNumber: item.contract_transport,
          transportInvoiceNumber: item.factura_bordereu_transport,
          transportInvoiceDate: item.data_aviz_achizitie, // No explicit field, fallback to notice date
          transportPrice: item.tarif_transport_to_ron,
          transportCurrency: item.currency_transport_anexa,
          isInvoiced: !!item.factura_bordereu_transport,
          status: "OPEN", // Default, as not present in JSON
        }))
        setTransports(mapped)
      })
  }, [])

  const filteredTransports = transports.filter(transport => {
    const matchesSearch = 
      transport.contractNumber.toLowerCase().includes(search.toLowerCase()) ||
      transport.noticeNumber.toLowerCase().includes(search.toLowerCase()) ||
      transport.supplier.toLowerCase().includes(search.toLowerCase())
    
    const matchesStatus = selectedStatus === "all" || transport.status === selectedStatus
    const matchesInvoiced = selectedInvoiced === "all" || 
      (selectedInvoiced === "invoiced" && transport.isInvoiced) ||
      (selectedInvoiced === "not_invoiced" && !transport.isInvoiced)

    return matchesSearch && matchesStatus && matchesInvoiced
  })

  const columns: ColumnDef<Transport>[] = [
    {
      accessorKey: "contractNumber",
      header: t("transport.contractNumber"),
    },
    {
      accessorKey: "noticeNumber",
      header: t("transport.noticeNumber"),
    },
    {
      accessorKey: "noticeDate",
      header: t("transport.noticeDate"),
      cell: ({ row }) => new Date(row.original.noticeDate).toLocaleDateString(),
    },
    {
      accessorKey: "supplier",
      header: t("transport.supplier"),
    },
    {
      accessorKey: "buyer",
      header: t("transport.buyer"),
    },
    {
      accessorKey: "product",
      header: t("transport.product"),
    },
    {
      accessorKey: "quantity",
      header: t("transport.quantity"),
    },
    {
      accessorKey: "transportContractNumber",
      header: t("transport.transportContractNumber"),
    },
    {
      accessorKey: "isInvoiced",
      header: t("transport.isInvoiced"),
      cell: ({ row }) => (
        <Badge variant="outline" className="text-muted-foreground px-1.5">
          {row.original.isInvoiced ? (
            <IconCircleCheckFilled className="fill-green-500 dark:fill-green-400 mr-2" />
          ) : (
            <IconCircleMinus className="fill-gray-950 dark:fill-gray-950 mr-2" />
          )}
          {row.original.isInvoiced ? t("common.yes") : t("common.no")}
        </Badge>
      ),
    },
    {
      accessorKey: "status",
      header: t("transport.status"),
      cell: ({ row }) => (
        <Badge variant="outline" className="text-muted-foreground px-1.5">
          {row.original.status === "OPEN" ? (
            <IconCircleCheckFilled className="fill-green-500 dark:fill-green-400 mr-2" />
          ) : row.original.status === "PENDING" ? (
            <IconLoader className="mr-2" />
          ) : (
            <IconCircleMinus className="fill-gray-950 dark:fill-gray-950 mr-2" />
          )}
          {t(`transport.status.${row.original.status.toLowerCase()}`)}
        </Badge>
      ),
    },
    {
      id: "actions",
      header: t("transport.actions"),
      cell: ({ row }) => (
        <div className="flex">
          <Link href={`/execution-operations/transport/${row.original.id}`}>
            <Button size="sm" variant="outline">
              <IconEye className="h-4 w-4 mr-2" />
              {t("common.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("transport.title")}</h2>
                <div className="flex items-center gap-2">
                  <Button variant="outline" onClick={() => router.push("/execution-operations/transport/new")}>
                    <IconPlus className="h-4 w-4 mr-2" />
                    {t("transport.new")}
                  </Button>
                  <Button variant="outline">
                    <IconUpload className="h-4 w-4 mr-2" />
                    {t("transport.import")}
                  </Button>
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button variant="outline">
                        {t("common.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>
                </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={t("transport.searchPlaceholder")}
                    value={search}
                    onChange={(e) => setSearch(e.target.value)}
                    className="pl-8"
                  />
                </div>
                <Select value={selectedStatus} onValueChange={setSelectedStatus}>
                  <SelectTrigger className="w-[180px]">
                    <SelectValue placeholder={t("transport.selectStatus")} />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">{t("transport.status.all")}</SelectItem>
                    <SelectItem value="OPEN">{t("transport.status.open")}</SelectItem>
                    <SelectItem value="PENDING">{t("transport.status.pending")}</SelectItem>
                    <SelectItem value="CLOSED">{t("transport.status.closed")}</SelectItem>
                  </SelectContent>
                </Select>
                <Select value={selectedInvoiced} onValueChange={setSelectedInvoiced}>
                  <SelectTrigger className="w-[180px]">
                    <SelectValue placeholder={t("transport.selectInvoiced")} />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">{t("transport.invoiced.all")}</SelectItem>
                    <SelectItem value="invoiced">{t("transport.invoiced.yes")}</SelectItem>
                    <SelectItem value="not_invoiced">{t("transport.invoiced.no")}</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="px-4 lg:px-6">
                <DataTableSimple 
                  data={filteredTransports} 
                  columns={columns}
                  columnVisibility={columnVisibility}
                  onColumnVisibilityChange={setColumnVisibility}
                />
              </div>
            </div>
          </div>
        </div>
      </SidebarInset>
    </SidebarProvider>
  )
}