"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 { IconSearch } from "@tabler/icons-react"
import { Input } from "@/components/ui/input"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { IconEye } 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 Link from "next/link"

interface Notice {
  id: number;
  contractNumber: string;
  company: string;
  sellerCompany: string;
  buyerCompany: string;
  goods: string;
  basis: string;
  basis1: string;
  pricePerMt: string;
  currency: string;
  paymentTerms: string;
  invoiceNo: string;
  invoiceDate: string;
  invoiceDueDate: string;
  invoiceQuantity: string;
  invoicePrice: string;
  invoiceTotalValue: string;
  invoiceCurrency: string;
  cashedInValue?: string;
  openAmount: string;
  invoiceSaved: string;
  delayDays: string;
  qtyContract: string;
  margin: string;
  qtyUnderMargin: string;
  details?: string;
  series: string;
  noticeNumber: string;
  noticeDate: string;
  noticeQuantity: string;
}

export default function NoticePage() {
  const [notices, setNotices] = useState<Notice[]>([])
  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
  const [search, setSearch] = useState("")
  const [selectedCompany, setSelectedCompany] = useState<string>("all")
  const { t } = useTranslation()

  useEffect(() => {
    console.log("Fetching data...");
    fetch("/api/execution-operations/notice")
      .then(res => {
        console.log("Response status:", res.status);
        if (!res.ok) {
          throw new Error(`HTTP error! status: ${res.status}`);
        }
        return res.json();
      })
      .then(data => {
        console.log("Received data:", data);
        // Transform the data to match the Notice type
        const transformedData = data.map((item: any, index: number) => ({
          id: index + 1,
          contractNumber: `CNT-${item.series}-${item.numberFrom}`,
          company: item.partnerName,
          sellerCompany: item.partnerName,
          buyerCompany: "AL DAHRA AGRICULTURE - ROMANIA S.R.L.", // Example buyer
          goods: "RAPITA", // Example product
          basis: "2024", // Example harvest year
          basis1: "ROMANIA", // Example origin
          pricePerMt: "",
          currency: "",
          paymentTerms: "",
          invoiceNo: "",
          invoiceDate: "",
          invoiceDueDate: "",
          invoiceQuantity: "39.920", // Example quantity
          invoicePrice: "",
          invoiceTotalValue: "",
          invoiceCurrency: "",
          cashedInValue: "",
          openAmount: "",
          invoiceSaved: "",
          delayDays: "",
          qtyContract: "",
          margin: "",
          qtyUnderMargin: "",
          series: item.series,
          noticeNumber: item.numberFrom.toString(),
          noticeDate: new Date().toISOString().slice(0, 10),
          noticeQuantity: "39.920" // Example quantity
        }));
        console.log("Transformed data:", transformedData);
        setNotices(transformedData);
      })
      .catch(error => {
        console.error("Error fetching data:", error);
        setNotices([]);
      });
  }, [])

  // Get unique companies for filter
  const companies = [...new Set(notices.map(c => c.company))]

  // Filter notices based on search and filters
  const filteredNotices = notices.filter(notice => {
    const matchesSearch = 
      notice.contractNumber.toLowerCase().includes(search.toLowerCase()) ||
      notice.company.toLowerCase().includes(search.toLowerCase())
    
    const matchesCompany = selectedCompany === "all" || notice.company === selectedCompany

    return matchesSearch && matchesCompany
  })

  const columns: ColumnDef<Notice>[] = [
    {
      accessorKey: "contractNumber",
      header: "Contract Number",
    },
    {
      accessorKey: "sellerCompany",
      header: "Seller",
    },
    {
      accessorKey: "buyerCompany",
      header: "Buyer",
    },
    {
      accessorKey: "goods",
      header: "Product",
    },
    {
      accessorKey: "series",
      header: "Series",
    },
    {
      accessorKey: "noticeNumber",
      header: "Notice Number",
    },
    {
      accessorKey: "noticeDate",
      header: "Date Notice",
    },
    {
      accessorKey: "noticeQuantity",
      header: "Quantity Notice",
    },
    {
      id: "actions",
      header: "View",
      cell: ({ row }) => (
        <div className="flex">
          <Link href={`/execution-operations/notice/${row.original.id}`}>
            <Button size="sm" variant="outline"><IconEye className="h-4 w-4" />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("notice.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>
                  <Link href="/execution-operations/notice/new">
                    <Button>New Notice</Button>
                  </Link>
                </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="Search notices..."
                    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">
                {notices.length === 0 ? (
                  <div className="text-center py-4">Loading data...</div>
                ) : (
                  <DataTableSimple 
                    data={filteredNotices} 
                    columns={columns}
                    columnVisibility={columnVisibility}
                    onColumnVisibilityChange={setColumnVisibility}
                  />
                )}
              </div>
            </div>
          </div>
        </div>
      </SidebarInset>
    </SidebarProvider>
  )
}