"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, VisibilityState } from "@tanstack/react-table"
import { IconSearch, IconEye, IconPlus } from "@tabler/icons-react"
import { Input } from "@/components/ui/input"
import { ProductSimpleCards } from "@/components/product-simple-cards"
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Combobox } from "@/components/combobox"


export type MatifPrice = {
  id: number;
  type: string;
  product: string;
  productCode: string;
  price: number;
  currency: string;
  matifEuronextExchange: string;
  matifPrice: number;
  matifCurrency: string;
  provisionalPrice: number;
  provisionalCurrency: string;
  collateralPrice: number;
  collateralCurrency: string;
  deposit: number;
  depositCurrency: string;
  additionalMentions: string;
}

export default function MatifPriceListPage() {
  const [prices, setPrices] = useState<MatifPrice[]>([])
  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
  const [selectedProductCode, setSelectedProductCode] = useState<string>("all")

  const [search, setSearch] = useState("")
  const { t } = useTranslation()

  useEffect(() => {
    fetch("/price/api/pricedata")
      .then(res => res.json())
      .then(data => {
        // Filter only Matif type prices
        const matifPrices = data.filter((item: any) => item.type === "Matif");
        setPrices(matifPrices);
      });
  }, [])

  const productCodes = [...new Set(prices.map(c => c.productCode))]
  const productCodeOptions = [
    { value: "all", label: "All Products" },
    ...productCodes.map(productCode => ({ value: productCode.toLowerCase(), label: productCode }))
  ]

  const filtered = prices.filter(p => {
    const matchesSearch = p.product.toLowerCase().includes(search.toLowerCase()) || p.productCode.toLowerCase().includes(search.toLowerCase())

    const matchesProductCode = selectedProductCode === "all" || p.productCode.toLowerCase() === selectedProductCode.toLocaleLowerCase()

    return matchesSearch && matchesProductCode
  })

  const columns: ColumnDef<MatifPrice>[] = [
    { accessorKey: "product", header: t("matifprice.product") },
    { accessorKey: "productCode", header: t("matifprice.productCode") },
    { accessorKey: "matifPrice", header: t("matifprice.price"), cell: ({ row }) => `${row.original.matifPrice} ${row.original.matifCurrency}` },
    { accessorKey: "matifEuronextExchange", header: t("matifprice.date") },
    {
      id: "actions",
      header: t("common.actions"),
      cell: ({ row }) => (
        <Link href={`/price/${row.original.id}`}>
          <Button size="sm" variant="outline"><IconEye className="h-4 w-4 mr-2" />{t("common.view")}</Button>
        </Link>
      ),
    },
  ]

  // Card data for mobile
  const cardData = filtered.map(p => ({
    id: p.id,
    code: p.product,
    title: p.productCode,
    um: p.matifCurrency,
    date: p.matifEuronextExchange,
    status: `${p.matifPrice}`,
    details: p.additionalMentions,
  }))

  return (
    <SidebarProvider style={{ "--sidebar-width": "calc(var(--spacing) * 72)", "--header-height": "calc(var(--spacing) * 12)" } as React.CSSProperties}>
      <AppSidebar variant="inset" />
      <SidebarInset>
        <SiteHeader title="matifprice.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("matifprice.title")}</h2>
                <div className="flex items-center gap-2">
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button variant="outline">
                        {t("matifprice.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="/price/new">
                    <Button><IconPlus className="h-4 w-4 mr-2" />{t("common.create")}</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={t("matifprice.search")}
                    value={search}
                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearch(e.target.value)}
                    className="pl-8"
                  />
                  
                </div>
                <Combobox
                  items={productCodeOptions}
                  value={selectedProductCode}
                  onValueChange={setSelectedProductCode}
                  placeholder="Select code"
                  emptyText="No code found"
                />
              </div>
              <div className="hidden lg:block px-4 lg:px-6">
                <DataTableContracts
                  data={filtered}
                  columns={columns}
                  columnVisibility={columnVisibility}
                  onColumnVisibilityChange={setColumnVisibility}
                />
              </div>
              <div className="block lg:hidden mt-8">
                <ProductSimpleCards
                  products={cardData}
                  onView={(id) => window.location.href = `/price/${id}`}
                />
              </div>
            </div>
          </div>
        </div>
      </SidebarInset>
    </SidebarProvider>
  )
}