"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 } from "@tanstack/react-table"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { IconDownload, IconEye, IconSearch, IconCircleCheckFilled, IconCircleX, IconCircleMinus } from "@tabler/icons-react"
import { Input } from "@/components/ui/input"
import { Combobox } from "@/components/combobox"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { startOfWeek, endOfWeek, startOfMonth, endOfMonth, startOfQuarter, endOfQuarter, parse, subYears } from "date-fns"
import invoicesData from '../api/invoices.json'
import { useRouter } from "next/navigation"

interface Invoice {
  id: number;
  invoiceNumber: string;
  contractNumber: string;
  sellerCompany: string;
  buyerCompany: string;
  invoiceDate: string;
  invoiceDueDate: string;
  invoiceValue: string;
  invoiceCurrency: string;
  commission: string;
  commissionCurrency: string;
  status: 'paid' | 'pending' | 'overdue';
  paymentDate?: string;
}

export default function InvoiceReportPage() {
  const [invoices, setInvoices] = useState<Invoice[]>([])
  const [search, setSearch] = useState("")
  const [selectedCompany, setSelectedCompany] = useState<string>("all")
  const [selectedCurrency, setSelectedCurrency] = useState<string>("all")
  const [timeFilter, setTimeFilter] = useState<string>("year")
  const { t } = useTranslation()
  const router = useRouter()

  useEffect(() => {
    const processedInvoices = invoicesData
      .filter(invoice => invoice.invoiceNo !== "-")
      .map(invoice => ({
        id: invoice.id,
        invoiceNumber: invoice.invoiceNo,
        contractNumber: invoice.contractNumber,
        sellerCompany: invoice.sellerCompany,
        buyerCompany: invoice.buyerCompany,
        invoiceDate: invoice.invoiceDate,
        invoiceDueDate: invoice.invoiceDueDate,
        invoiceValue: invoice.invoiceValue,
        invoiceCurrency: invoice.invoiceCurrency,
        commission: invoice.commission,
        commissionCurrency: invoice.commissionCurrency,
        status: (invoice.cashedInDate !== "-" ? 'paid' : 
                invoice.delayDays !== "-" ? 'overdue' : 'pending') as 'paid' | 'pending' | 'overdue',
        paymentDate: invoice.cashedInDate !== "-" ? invoice.cashedInDate : undefined
      }))
    setInvoices(processedInvoices)
  }, [])

  // Get unique companies and currencies for filters
  const companies = [...new Set(invoices.map(i => i.sellerCompany))]
  const currencies = [...new Set(invoices.map(i => i.invoiceCurrency))]

  // Filter invoices based on search, company, currency, and time period
  const filteredInvoices = invoices.filter(invoice => {
    const matchesSearch = 
      invoice.invoiceNumber.toLowerCase().includes(search.toLowerCase()) ||
      invoice.contractNumber.toLowerCase().includes(search.toLowerCase())
    
    const matchesCompany = selectedCompany === "all" || invoice.sellerCompany === selectedCompany
    const matchesCurrency = selectedCurrency === "all" || invoice.invoiceCurrency === selectedCurrency

    const invoiceDate = parse(invoice.invoiceDate, 'M/d/yy', new Date())
    const today = new Date()
    const oneYearAgo = subYears(today, 1)
    let matchesTimePeriod = false

    switch (timeFilter) {
      case "week":
        const weekStart = startOfWeek(today)
        const weekEnd = endOfWeek(today)
        matchesTimePeriod = invoiceDate >= weekStart && invoiceDate <= weekEnd
        break
      case "month":
        const monthStart = startOfMonth(today)
        const monthEnd = endOfMonth(today)
        matchesTimePeriod = invoiceDate >= monthStart && invoiceDate <= monthEnd
        break
      case "quarter":
        const quarterStart = startOfQuarter(today)
        const quarterEnd = endOfQuarter(today)
        matchesTimePeriod = invoiceDate >= quarterStart && invoiceDate <= quarterEnd
        break
      case "year":
        matchesTimePeriod = invoiceDate >= oneYearAgo && invoiceDate <= today
        break
    }

    return matchesSearch && matchesCompany && matchesCurrency && matchesTimePeriod
  })

  // Convert companies and currencies to the format expected by Combobox
  const companyOptions = [
    { value: "all", label: t("invoiceReport.allCompanies") },
    ...companies.map(company => ({ value: company, label: company }))
  ]

  const currencyOptions = [
    { value: "all", label: t("invoiceReport.allCurrencies") },
    ...currencies.map(currency => ({ value: currency, label: currency }))
  ]

  const columns: ColumnDef<Invoice>[] = [
    {
      accessorKey: "invoiceNumber",
      header: t("invoiceReport.invoiceNumber")
    },
    {
      accessorKey: "contractNumber",
      header: t("invoiceReport.contractNumber")
    },
    {
      accessorKey: "sellerCompany",
      header: t("invoiceReport.sellerCompany")
    },
    {
      accessorKey: "buyerCompany",
      header: t("invoiceReport.buyerCompany")
    },
    {
      accessorKey: "invoiceDate",
      header: t("invoiceReport.issueDate")
    },
    {
      accessorKey: "invoiceDueDate",
      header: t("invoiceReport.dueDate")
    },
    {
      accessorKey: "invoiceValue",
      header: t("invoiceReport.amount"),
      cell: ({ row }) => `${row.original.invoiceValue} ${row.original.invoiceCurrency}`
    },
    {
      accessorKey: "commission",
      header: t("invoiceReport.commission"),
      cell: ({ row }) => `${row.original.commission} ${row.original.commissionCurrency}`
    },
    {
      accessorKey: "status",
      header: t("invoiceReport.status"),
      cell: ({ row }) => (
        <Badge variant="outline" className={`px-1.5 ${row.original.status === "paid" ? "text-green-500" : row.original.status === "overdue" ? "text-red-500" : "text-muted-foreground"}`}>
          {row.original.status === "paid" ? (
            <IconCircleCheckFilled className="fill-green-500 dark:fill-green-400 mr-2" />
          ) : row.original.status === "overdue" ? (
            <IconCircleX className="fill-red-500 dark:fill-red-400 mr-2" />
          ) : (
            <IconCircleMinus className="fill-gray-950 dark:fill-gray-950 mr-2" />
          )}
          {t(`invoiceReport.status_${row.original.status}`)}
        </Badge>
      )
    },
    {
      id: "actions",
      header: t("invoiceReport.actions"),
      cell: ({ row }) => (
        <div className="flex gap-2">
          <Button
            variant="outline"
            size="sm"
            onClick={() => router.push(`/financial-operations/invoicereport/${row.original.id}`)}
          >
            <IconEye className="h-4 w-4 mr-2" />
            {t("invoiceReport.view")}
          </Button>
          <Button
            variant="outline"
            size="sm"
            onClick={() => console.log(`Download invoice ${row.original.invoiceNumber}`)}
          >
            <IconDownload className="h-4 w-4 mr-2" />
            {t("invoiceReport.download")}
          </Button>
        </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="px-4 lg:px-6 ">
                
                <div className="flex justify-between items-center mb-4">
                  <h2 className="text-2xl font-bold ">{t("invoiceReport.title")}</h2>
                    
                    <div className="flex items-center gap-4">
                      <div className="flex items-center gap-2">
                        <Select value={timeFilter} onValueChange={setTimeFilter}>
                          <SelectTrigger className="w-[180px]">
                            <SelectValue placeholder={t("invoiceReport.filterByTime")} />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="week">{t("invoiceReport.thisWeek")}</SelectItem>
                            <SelectItem value="month">{t("invoiceReport.thisMonth")}</SelectItem>
                            <SelectItem value="quarter">{t("invoiceReport.thisQuarter")}</SelectItem>
                            <SelectItem value="year">{t("invoiceReport.lastYear")}</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                    </div>
                </div>
                <div className="flex gap-4 items-center mb-4">
                      <div className="flex-1 relative">
                        <IconSearch className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
                        <Input
                          placeholder={t("invoiceReport.searchPlaceholder")}
                          value={search}
                          onChange={(e) => setSearch(e.target.value)}
                          className="pl-8"
                        />
                      </div>
                      <Combobox
                        items={companyOptions}
                        value={selectedCompany}
                        onValueChange={setSelectedCompany}
                        placeholder={t("invoiceReport.selectCompany")}
                        emptyText={t("invoiceReport.noCompaniesFound")}
                      />
                      <Combobox
                        items={currencyOptions}
                        value={selectedCurrency}
                        onValueChange={setSelectedCurrency}
                        placeholder={t("invoiceReport.selectCurrency")}
                        emptyText={t("invoiceReport.noCurrenciesFound")}
                      />
                </div>
                    <DataTableContracts 
                      data={filteredInvoices} 
                      columns={columns}
                    />
                  
              </div>
            </div>
          </div>
        </div>
      </SidebarInset>
    </SidebarProvider>
  )
}