"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 { IconEye, IconSearch, IconCircleX, IconCircleMinus } from "@tabler/icons-react"
import { Input } from "@/components/ui/input"
import { Combobox } from "@/components/combobox"
import invoicesData from '../api/invoices.json'
import balancestatementData from '../api/balancestatementdata.json'
import Link from "next/link"
import { useRouter } from "next/navigation"

interface OutstandingInvoice {
  id: number;
  invoiceNumber: string;
  contractNumber: string;
  sellerCompany: string;
  buyerCompany: string;
  invoiceDate: string;
  invoiceDueDate: string;
  invoiceValue: string;
  invoiceCurrency: string;
  outstandingBalance: string;
  delayDays: string;
  description: string;
  status: 'overdue' | 'pending';
}

export default function OutstandingBalancePage() {
  const [invoices, setInvoices] = useState<OutstandingInvoice[]>([])
  const [search, setSearch] = useState("")
  const [selectedCompany, setSelectedCompany] = useState<string>("all")
  const { t } = useTranslation()
  const router = useRouter()

  useEffect(() => {
    // Filter out invoices that have been paid (exist in balance statement)
    const paidInvoices = new Set(
      balancestatementData.map(transaction => {
        const [day, month, year] = transaction.transactionDate.split('-')
        return `${transaction.description}|${transaction.creditAmount}|${year}-${month}-${day}`
      })
    )

    const outstandingInvoices = invoicesData
      .filter(invoice => {
        // Skip invoices with no invoice number
        if (invoice.invoiceNo === "-") return false

        // Check if invoice has been paid
        const invoiceDate = invoice.cashedInDate !== "-" ? invoice.cashedInDate : invoice.invoiceDate
        if (!invoiceDate) return false
        const [day, month, year] = invoiceDate.split('/')
        const key = `${invoice.description}|${invoice.cashedInValue}|${year}-${month}-${day}`
        return !paidInvoices.has(key)
      })
      .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,
        outstandingBalance: invoice.outstandingBalance,
        delayDays: invoice.delayDays,
        description: invoice.description,
        status: (invoice.delayDays !== "-" ? 'overdue' : 'pending') as 'overdue' | 'pending'
      }))

    setInvoices(outstandingInvoices)
  }, [])

  // Get unique companies for filter
  const companies = [...new Set(invoices.map(i => i.sellerCompany))]

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

    return matchesSearch && matchesCompany
  })

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

  const columns: ColumnDef<OutstandingInvoice>[] = [
    {
      accessorKey: "invoiceNumber",
      header: t("outstandingBalance.invoiceNumber")
    },
    {
      accessorKey: "contractNumber",
      header: t("outstandingBalance.contractNumber")
    },
    {
      accessorKey: "sellerCompany",
      header: t("outstandingBalance.sellerCompany")
    },
    {
      accessorKey: "buyerCompany",
      header: t("outstandingBalance.buyerCompany")
    },
    {
      accessorKey: "invoiceDate",
      header: t("outstandingBalance.invoiceDate")
    },
    {
      accessorKey: "invoiceDueDate",
      header: t("outstandingBalance.dueDate")
    },
    {
      accessorKey: "invoiceValue",
      header: t("outstandingBalance.amount"),
      cell: ({ row }) => `${row.original.invoiceValue} ${row.original.invoiceCurrency}`
    },
    {
      accessorKey: "outstandingBalance",
      header: t("outstandingBalance.outstandingBalance"),
      cell: ({ row }) => `${row.original.outstandingBalance} ${row.original.invoiceCurrency}`
    },
    {
      accessorKey: "delayDays",
      header: t("outstandingBalance.delayDays"),
      cell: ({ row }) => row.original.delayDays !== "-" ? `${row.original.delayDays} days` : "-"
    },
    {
      accessorKey: "status",
      header: t("outstandingBalance.status"),
      cell: ({ row }) => (
        <Badge variant="outline" className={`px-1.5 ${row.original.status === "overdue" ? "text-red-500" : "text-muted-foreground"}`}>
          {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(`outstandingBalance.status_${row.original.status}`)}
        </Badge>
      )
    },
    {
      id: "actions",
      header: t("outstandingBalance.actions"),
      cell: ({ row }) => (
        <div className="flex gap-2">
          <Link href={`/financial-operations/invoicereport/${row.original.id}`}>
              <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>
            </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">
              <h2 className="text-2xl font-bold px-4 lg:px-6">{t("outstandingBalance.title")}</h2>
              <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 invoices..."
                    value={search}
                    onChange={(e) => setSearch(e.target.value)}
                    className="pl-8"
                  />
                </div>
                <Combobox
                  items={companyOptions}
                  value={selectedCompany}
                  onValueChange={setSelectedCompany}
                  placeholder="Select company"
                  emptyText="No companies found"
                />
              </div>
              <div className="px-4 lg:px-6">
                <DataTableContracts 
                  data={filteredInvoices} 
                  columns={columns}
                />
              </div>
            </div>
          </div>
        </div>
      </SidebarInset>
    </SidebarProvider>
  )
}