"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 { DataTableContracts } from "@/components/data-table-contracts"
import { ColumnDef, VisibilityState } from "@tanstack/react-table"
import { Badge } from "@/components/ui/badge"
import { IconSearch, IconEye, IconCircleCheckFilled, IconLoader, IconCircleMinus } from "@tabler/icons-react"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import Link from "next/link"
import { Combobox } from "@/components/combobox"
import { EFacturaSimpleCards } from "@/components/efactura-simple-cards"
import { useRouter } from "next/navigation"

interface DeliveryOrder {
  id: number;
  orderId: string;
  contractNumber: string;
  status: string;
  personInCharge: string;
  deliveryPeriod: {
    Delivery_date_from: string;
    Delivery_date_to: string;
    Delivery_period_Option_Code: string;
    Delivery_period_Option_RO: string;
    Delivery_period_Option_ENG: string;
  };
}

export default function PeriodOptionPage() {
  const [deliveryOrders, setDeliveryOrders] = useState<DeliveryOrder[]>([])
  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
  const [search, setSearch] = useState("")
  const [selectedStatus, setSelectedStatus] = useState<string>("all")
  const [selectedContract, setSelectedContract] = useState<string>("all")
  const { t } = useTranslation()
  const router = useRouter()

  useEffect(() => {
    fetch("/delivery-conditions/api/delivery")
      .then(res => res.json())
      .then((data: any[]) => {
        const ordersWithId = data.map((order, index) => ({
          ...order,
          id: index + 1
        }));
        setDeliveryOrders(ordersWithId);
      })
      .catch(error => console.error("Error fetching delivery orders:", error))
  }, [])

  const uniqueStatuses = [
    { value: "all", label: t("common.all") },
    ...Array.from(new Set(deliveryOrders.map(order => order.status)))
      .map(status => ({ value: status.toLowerCase(), label: status }))
  ]

  const uniqueContracts = [
    { value: "all", label: t("common.all") },
    ...Array.from(new Set(deliveryOrders.map(order => order.contractNumber)))
      .map(contract => ({ value: contract, label: contract }))
  ]

  const filteredOrders = deliveryOrders.filter(order => {
    const matchesSearch =
      order.contractNumber.toLowerCase().includes(search.toLowerCase()) ||
      order.orderId.toLowerCase().includes(search.toLowerCase()) ||
      order.status.toLowerCase().includes(search.toLowerCase())

    const matchesStatus = selectedStatus === "all" || order.status.toLowerCase() === selectedStatus
    const matchesContract = selectedContract === "all" || order.contractNumber === selectedContract

    return matchesSearch && matchesStatus && matchesContract
  })

  const cardData = filteredOrders.map(order => ({
    id: order.id,
    title: order.orderId,
    contract: order.contractNumber,
    date: order.deliveryPeriod.Delivery_date_from,
    status: order.status,
    amount: 0,
    currency: order.deliveryPeriod.Delivery_period_Option_Code,
    company: order.personInCharge
  }))

  const columns: ColumnDef<DeliveryOrder>[] = [
    {
      accessorKey: "contractNumber",
      header: t("deliveryorders.contractid"),
    },
    {
      accessorKey: "orderId",
      header: t("deliveryorders.orderid"),
    },
    {
      accessorKey: "status",
      header: t("deliveryorders.status"),
      cell: ({ row }) => {
        const status = row.original.status.toLowerCase();
        let icon = <IconCircleMinus className="fill-gray-950 dark:fill-gray-950 mr-2" />;
        if (status === "pending") {
          icon = <IconLoader className="mr-2" />;
        } else if (status === "completed" || status === "active") {
          icon = <IconCircleCheckFilled className="fill-green-500 dark:fill-green-400 mr-2" />;
        }
        return (
          <Badge variant="outline" className="text-muted-foreground px-1.5">
            {icon}
            {row.original.status}
          </Badge>
        );
      },
    },
    {
      accessorKey: "personInCharge",
      header: t("deliveryorders.personincharge"),
    },
    {
      accessorKey: "deliveryPeriod.Delivery_date_from",
      header: "From Date",
      cell: ({ row }) => row.original.deliveryPeriod.Delivery_date_from || "-",
    },
    {
      accessorKey: "deliveryPeriod.Delivery_date_to",
      header: "To Date",
      cell: ({ row }) => row.original.deliveryPeriod.Delivery_date_to || "-",
    },
    {
      accessorKey: "deliveryPeriod.Delivery_period_Option_Code",
      header: "Option Code",
      cell: ({ row }) => row.original.deliveryPeriod.Delivery_period_Option_Code || "-",
    },
    {
      id: "actions",
      header: t("deliveryorders.action"),
      cell: ({ row }) => (
        <div className="flex">
          <Link href={`/delivery-conditions/period-option/${row.original.orderId}`}>
            <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 title={t("deliveryperiodoption.title")} />
        <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("deliveryperiodoption.title")}</h2>
                <Button onClick={() => router.push('/delivery-conditions/period-option/new')}>
                  New Period Option
                </Button>
              </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("deliveryorders.searchplaceholder")}
                    value={search}
                    onChange={(e) => setSearch(e.target.value)}
                    className="pl-8"
                  />
                </div>
                <Combobox
                  items={uniqueStatuses}
                  value={selectedStatus}
                  onValueChange={setSelectedStatus}
                  placeholder={t("deliveryorders.selectstatus")}
                  emptyText={t("deliveryorders.nostatusesfound")}
                />
                <Combobox
                  items={uniqueContracts}
                  value={selectedContract}
                  onValueChange={setSelectedContract}
                  placeholder={t("deliveryorders.selectcontract")}
                  emptyText={t("deliveryorders.nocontractsfound")}
                />
              </div>
              <div className="hidden lg:block px-4 lg:px-6">
                <DataTableContracts
                  data={filteredOrders}
                  columns={columns}
                  columnVisibility={columnVisibility}
                  onColumnVisibilityChange={setColumnVisibility}
                />
              </div>
              <div className="block lg:hidden mt-8">
                <EFacturaSimpleCards
                  invoices={cardData}
                  onView={(id) => window.location.href = `/delivery-conditions/period-option/${id}`}
                />
              </div>
            </div>
          </div>
        </div>
      </SidebarInset>
    </SidebarProvider>
  )
}