"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 } from "@tabler/icons-react"
import { Input } from "@/components/ui/input"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { IconEye, IconFileDownload } from "@tabler/icons-react"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import * as z from "zod"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

// Form schema for UIT details
const uitFormSchema = z.object({
  contractType: z.enum(["purchase", "sale"]),
  contractNumber: z.string(),
  transporter: z.string(),
  loadingLocation: z.string(),
  unloadingLocation: z.string(),
  grossQuantity: z.number(),
  netQuantity: z.number(),
  vehicleNumber: z.string(),
  purchaseNoticeNumber: z.string().optional(),
  saleNoticeNumber: z.string().optional(),
  customsPoint: z.string(),
  customsCode: z.string(),
})

type UitFormValues = z.infer<typeof uitFormSchema>

type UitCode = {
  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 UitCodePage() {
  const router = useRouter()
  const [uitCodes, setUitCodes] = useState<UitCode[]>([])
  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
  const [search, setSearch] = useState("")
  const [selectedCompany, setSelectedCompany] = useState<string>("all")
  const { t } = useTranslation()

  // Form setup
  const form = useForm<UitFormValues>({
    resolver: zodResolver(uitFormSchema),
    defaultValues: {
      contractType: "purchase",
      contractNumber: "",
      transporter: "",
      loadingLocation: "",
      unloadingLocation: "",
      grossQuantity: 0,
      netQuantity: 0,
      vehicleNumber: "",
      customsPoint: "",
      customsCode: "",
    },
  })

  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);
        setUitCodes(data.invoices);
      })
      .catch(error => {
        console.error("Error fetching data:", error);
      });
  }, [])

  // Get unique companies for filter
  const companies = [...new Set(uitCodes.map(c => c["Company"] || "").filter(Boolean))]
  console.log("Companies:", companies);

  // Filter uit codes based on search and filters
  const filteredUitCodes = uitCodes.filter(uitCode => {
    const matchesSearch = 
      (uitCode["Contract number"]?.toLowerCase() || "").includes(search.toLowerCase()) ||
      (uitCode["Invoice no"]?.toLowerCase() || "").includes(search.toLowerCase()) ||
      (uitCode["Company"]?.toLowerCase() || "").includes(search.toLowerCase())
    
    const matchesCompany = selectedCompany === "all" || uitCode["Company"] === selectedCompany

    return matchesSearch && matchesCompany
  })

  const columns: ColumnDef<UitCode>[] = [
    {
      accessorKey: "Contract number",
      header: "Contract Number",
    },
    {
      accessorKey: "Company",
      header: "Company",
    },
    {
      accessorKey: "Invoice no",
      header: "Invoice No",
    },
    {
      accessorKey: "Invoice date",
      header: "Invoice Date",
      cell: ({ row }) => row.original["Invoice date"] ? new Date(row.original["Invoice date"]).toLocaleDateString() : "-",
    },
    {
      accessorKey: "Invoice due date",
      header: "Due Date",
      cell: ({ row }) => row.original["Invoice due date"] ? new Date(row.original["Invoice due date"]).toLocaleDateString() : "-",
    },
    {
      accessorKey: " Invoice Quantity ",
      header: "Quantity",
      cell: ({ row }) => row.original[" Invoice Quantity "]?.trim() || "-",
    },
    {
      accessorKey: " Invoice Total Value ",
      header: "Total Value",
      cell: ({ row }) => {
        const value = row.original[" Invoice Total Value "]?.trim() || "-";
        const currency = row.original[" Invoice Currency "]?.trim() || "";
        return value === "-" ? "-" : `${value} ${currency}`;
      },
    },
    {
      accessorKey: " Open amount ",
      header: "Open Amount",
      cell: ({ row }) => {
        const amount = row.original[" Open amount "]?.trim() || "-";
        const currency = row.original[" Invoice Currency "]?.trim() || "";
        return amount === "-" ? "-" : `${amount} ${currency}`;
      },
    },
    {
      accessorKey: " Delay days ",
      header: "Delay Days",
      cell: ({ row }) => {
        const days = row.original[" Delay days "]?.trim() || "0";
        return (
          <Badge variant={parseInt(days) > 30 ? "destructive" : "default"}>
            {days}
          </Badge>
        );
      },
    },
    {
      id: "actions",
      header: "Actions",
      cell: ({ row }) => {
        return (
          <Button
            variant="ghost"
            size="icon"
            onClick={() => router.push(`/execution-operations/uitcode/${row.original.id}`)}
          >
            <IconEye className="h-4 w-4" />
          </Button>
        )
      },
    },
  ]

  const onSubmit = (data: UitFormValues) => {
    console.log("Form submitted:", data);
    // TODO: Implement PDF generation
  }

  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("uitCode.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>
                </div>
              </div>

              <Tabs defaultValue="list" className="px-4 lg:px-6">
                <TabsList>
                  <TabsTrigger value="list">UIT Codes List</TabsTrigger>
                  <TabsTrigger value="generate">Generate UIT Code</TabsTrigger>
                </TabsList>

                <TabsContent value="list">
                  <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 uit codes..."
                        value={search}
                        onChange={(e) => setSearch(e.target.value)}
                        className="pl-8"
                      />
                    </div>
                    <Select value={selectedCompany} onValueChange={setSelectedCompany}>
                      <SelectTrigger className="w-[180px]">
                        <SelectValue placeholder="Select company" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all">All Companies</SelectItem>
                        {companies.map(company => (
                          <SelectItem key={company} value={company}>
                            {company}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="px-4 lg:px-6 pt-2">
                    {uitCodes.length === 0 ? (
                      <div className="text-center py-4">Loading data...</div>
                    ) : (
                      <DataTableSimple 
                        data={filteredUitCodes} 
                        columns={columns}
                        columnVisibility={columnVisibility}
                        onColumnVisibilityChange={setColumnVisibility}
                      />
                    )}
                  </div>
                </TabsContent>

                <TabsContent value="generate">
                  <Card>
                    <CardHeader>
                      <CardTitle>Generate UIT Code</CardTitle>
                    </CardHeader>
                    <CardContent>
                      <Form {...form}>
                        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
                          <div className="grid grid-cols-2 gap-4">
                            <FormField
                              control={form.control}
                              name="contractType"
                              render={({ field }) => (
                                <FormItem>
                                  <FormLabel>Contract Type</FormLabel>
                                  <Select onValueChange={field.onChange} defaultValue={field.value}>
                                    <FormControl>
                                      <SelectTrigger>
                                        <SelectValue placeholder="Select contract type" />
                                      </SelectTrigger>
                                    </FormControl>
                                    <SelectContent>
                                      <SelectItem value="purchase">Purchase</SelectItem>
                                      <SelectItem value="sale">Sale</SelectItem>
                                    </SelectContent>
                                  </Select>
                                  <FormMessage />
                                </FormItem>
                              )}
                            />

                            <FormField
                              control={form.control}
                              name="contractNumber"
                              render={({ field }) => (
                                <FormItem>
                                  <FormLabel>Contract Number</FormLabel>
                                  <FormControl>
                                    <Input {...field} />
                                  </FormControl>
                                  <FormMessage />
                                </FormItem>
                              )}
                            />

                            <FormField
                              control={form.control}
                              name="transporter"
                              render={({ field }) => (
                                <FormItem>
                                  <FormLabel>Transporter</FormLabel>
                                  <FormControl>
                                    <Input {...field} />
                                  </FormControl>
                                  <FormMessage />
                                </FormItem>
                              )}
                            />

                            <FormField
                              control={form.control}
                              name="vehicleNumber"
                              render={({ field }) => (
                                <FormItem>
                                  <FormLabel>Vehicle Number</FormLabel>
                                  <FormControl>
                                    <Input {...field} />
                                  </FormControl>
                                  <FormMessage />
                                </FormItem>
                              )}
                            />

                            <FormField
                              control={form.control}
                              name="loadingLocation"
                              render={({ field }) => (
                                <FormItem>
                                  <FormLabel>Loading Location</FormLabel>
                                  <FormControl>
                                    <Input {...field} />
                                  </FormControl>
                                  <FormMessage />
                                </FormItem>
                              )}
                            />

                            <FormField
                              control={form.control}
                              name="unloadingLocation"
                              render={({ field }) => (
                                <FormItem>
                                  <FormLabel>Unloading Location</FormLabel>
                                  <FormControl>
                                    <Input {...field} />
                                  </FormControl>
                                  <FormMessage />
                                </FormItem>
                              )}
                            />

                            <FormField
                              control={form.control}
                              name="grossQuantity"
                              render={({ field }) => (
                                <FormItem>
                                  <FormLabel>Gross Quantity</FormLabel>
                                  <FormControl>
                                    <Input type="number" {...field} />
                                  </FormControl>
                                  <FormMessage />
                                </FormItem>
                              )}
                            />

                            <FormField
                              control={form.control}
                              name="netQuantity"
                              render={({ field }) => (
                                <FormItem>
                                  <FormLabel>Net Quantity</FormLabel>
                                  <FormControl>
                                    <Input type="number" {...field} />
                                  </FormControl>
                                  <FormMessage />
                                </FormItem>
                              )}
                            />

                            <FormField
                              control={form.control}
                              name="purchaseNoticeNumber"
                              render={({ field }) => (
                                <FormItem>
                                  <FormLabel>Purchase Notice Number</FormLabel>
                                  <FormControl>
                                    <Input {...field} />
                                  </FormControl>
                                  <FormMessage />
                                </FormItem>
                              )}
                            />

                            <FormField
                              control={form.control}
                              name="saleNoticeNumber"
                              render={({ field }) => (
                                <FormItem>
                                  <FormLabel>Sale Notice Number</FormLabel>
                                  <FormControl>
                                    <Input {...field} />
                                  </FormControl>
                                  <FormMessage />
                                </FormItem>
                              )}
                            />

                            <FormField
                              control={form.control}
                              name="customsPoint"
                              render={({ field }) => (
                                <FormItem>
                                  <FormLabel>Customs Point</FormLabel>
                                  <FormControl>
                                    <Input {...field} />
                                  </FormControl>
                                  <FormMessage />
                                </FormItem>
                              )}
                            />

                            <FormField
                              control={form.control}
                              name="customsCode"
                              render={({ field }) => (
                                <FormItem>
                                  <FormLabel>Customs Code</FormLabel>
                                  <FormControl>
                                    <Input {...field} />
                                  </FormControl>
                                  <FormMessage />
                                </FormItem>
                              )}
                            />
                          </div>

                          <div className="flex justify-end">
                            <Button type="submit" className="flex items-center gap-2">
                              <IconFileDownload className="h-4 w-4" />
                              Generate PDF
                            </Button>
                          </div>
                        </form>
                      </Form>
                    </CardContent>
                  </Card>
                </TabsContent>
              </Tabs>
            </div>
          </div>
        </div>
      </SidebarInset>
    </SidebarProvider>
  )
}