"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 } from "@tanstack/react-table"
import { Badge } from "@/components/ui/badge"
import { IconCircleCheckFilled, IconLoader, IconEye } from "@tabler/icons-react"
import { Input } from "@/components/ui/input"
import { Combobox } from "@/components/combobox"

export default function TransportContractListPage() {
  type TransportContract = {
    id: number;
    contractNumber: string;
    company: string;
    status: string;
    type: string;
    createdDate: string;
    validUntil: string;
    signedBy: string;
    transportType: string;
    fromLocation: string;
    toLocation: string;
    distance: number;
    price: number;
    currency: string;
  }

  const [transportContracts, setTransportContracts] = useState<TransportContract[]>([])
  const [searchQuery, setSearchQuery] = useState("")
  const { t } = useTranslation()
  const [selectedCompany, setSelectedCompany] = useState("all")

  useEffect(() => {
    // TODO: Replace with actual API endpoint
    fetch("/contracts/api/transport")
      .then(res => res.json())
      .then(setTransportContracts)
  }, [])

  const companies = [...new Set(transportContracts.map(transport => transport.company))];

  const filteredDrafts = transportContracts.filter(transport => {
    const matchesSearch = 
    transport.contractNumber.toLowerCase().includes(searchQuery.toLowerCase()) ||
    transport.company.toLowerCase().includes(searchQuery.toLowerCase()) ||
    transport.type.toLowerCase().includes(searchQuery.toLowerCase());

    const matchesCompany = selectedCompany === "all" || transport.company === selectedCompany; // Check for selected company

    return matchesSearch && matchesCompany; // Combine filters
  });

  const columns: ColumnDef<TransportContract>[] = [
    {
      accessorKey: "contractNumber",
      header: t("transport.contractnumber"),
    },
    {
      accessorKey: "company",
      header: t("transport.company"),
    },
    {
      accessorKey: "status",
      header: t("transport.status"),
      cell: ({ row }) => (
        <Badge variant="outline" className="flex items-center gap-1">
          {row.original.status === "Active" ? (
            <>
              <IconCircleCheckFilled className="h-4 w-4 text-green-500" />
              {t("transport.active")}
            </>
          ) : (
            <>
              <IconLoader className="h-4 w-4 text-yellow-500 animate-spin" />
              {t("transport.pending")}
            </>
          )}
        </Badge>
      ),
    },
    {
      accessorKey: "type",
      header: t("transport.type"),
    },
    {
      accessorKey: "transportType",
      header: t("transport.transporttype"),
    },
    {
      accessorKey: "fromLocation",
      header: t("transport.fromlocation"),
    },
    {
      accessorKey: "toLocation",
      header: t("transport.tolocation"),
    },
    {
      accessorKey: "distance",
      header: t("transport.distance"),
    },
    {
      accessorKey: "price",
      header: t("transport.price"),
    },
    {
      accessorKey: "currency",
      header: t("transport.currency"),
    },
    {
      id: "actions",
      header: t("transport.action"),
      cell: ({ row }) => (
        <div className="flex">
          <Link href={`/contracts/transport/${row.original.id}`}>
            <Button size="sm" variant="outline"><IconEye className="h-4 w-4" />{t("drafts.view")}</Button>
          </Link>
        </div>
      ),
    },
  ]

  const companyOptions = [
    { value: "all", label: "All Companies" },
    ...companies.map(company => ({ value: company, label: company }))
  ];

  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("transport.transportlist")}/>
        <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.transportlist")}</h2>
                <Link href="/contracts/transport/new">
                  <Button>{t("transport.newtransport")}</Button>
                </Link>
              </div>
              
              <div className="px-4 lg:px-6">
                <div className="flex items-center gap-4 mb-4 justify-between">
                    <Input
                      placeholder={t("drafts.search")}
                      value={searchQuery}
                      onChange={(e) => setSearchQuery(e.target.value)}
                      className="max-w-sm"
                    />
                    <Combobox
                      items={companyOptions}
                      value={selectedCompany}
                      onValueChange={setSelectedCompany}
                      placeholder="Select company"
                      emptyText="No companies found"
                    />
                  </div>
                <DataTableContracts data={transportContracts} columns={columns} />
              </div>
            </div>
          </div>
        </div>
      </SidebarInset>
    </SidebarProvider>
  )
}