"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 { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { IconEdit } from "@tabler/icons-react"
import { useRouter } from "next/navigation"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import invoicesData from '../../api/invoices.json'

interface Invoice {
  id: number;
  title: string;
  contractNumber: string;
  sellerCompany: string;
  buyerCompany: string;
  invoicePartner: string;
  grain: string;
  contractQuantity: string;
  executedQuantity: string;
  whoIsPayingCommission: string;
  commission: string;
  commissionCurrency: string;
  invoicedQuantity: string;
  valueCurrency: string;
  exchangeRate: string;
  valueEur: string;
  invoiceNo: string;
  invoiceDate: string;
  invoiceDueDate: string;
  invoiceValue: string;
  invoiceCurrency: string;
  cashedInDate: string;
  cashedInValue: string;
  outstandingBalance: string;
  delayDays: string;
  description: string;
  invoiceCurrencyDate: string;
  invoiceCurrencyDate_1: string;
  eMailSubject: string;
  eMailContent: string;
  cashInCo: string;
  valueToInvoiceCurrency: string;
  valueToInvoiceEur: string;
  valInRonLa49746: string;
  smartBillQuantity: string;
  smartBillExchangeRate: string;
  diffCantitateSmartBill: string;
  statusContract: string;
  executedQuantityPerContract: string;
  diffDeFacturat: string;
  endDeliveryDateContracts: string;
  contractIssuedDate: string;
  valoareFaraTvaInRon: string;
  valoareTvaInRon: string;
  valoareInclusivTvaInRon: string;
  contractForeignNumber: string;
  ameropaBrokerageAgreement: string;
  verif: string;
}

export default function InvoiceDetailsPage({ params }: { params: { id: string } }) {
  const [invoice, setInvoice] = useState<Invoice | null>(null)
  const { t } = useTranslation()
  const router = useRouter()

  useEffect(() => {
    const foundInvoice = invoicesData.find(inv => inv.id === parseInt(params.id))
    if (foundInvoice) {
      setInvoice(foundInvoice)
    }
  }, [params.id])

  if (!invoice) {
    return <div>Loading...</div>
  }

  const getStatusBadge = (status: string) => {
    if (invoice.cashedInDate !== "-") {
      return <Badge variant="default">{t("invoiceReport.status_paid")}</Badge>
    } else if (invoice.delayDays !== "-") {
      return <Badge variant="destructive">{t("invoiceReport.status_overdue")}</Badge>
    } else {
      return <Badge variant="secondary">{t("invoiceReport.status_pending")}</Badge>
    }
  }

  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-6">
                  <h2 className="text-2xl font-bold">{t("invoiceReport.details")}</h2>
                  <div className="flex items-center gap-4">
                    {getStatusBadge(invoice.cashedInDate)}
                    <Button
                      variant="outline"
                      onClick={() => router.push(`/financial-operations/invoicereport/new`)}
                    >
                      <IconEdit className="mr-2 h-4 w-4" />
                      {t("common.edit")}
                    </Button>
                  </div>
                </div>

                <Tabs defaultValue="general" className="w-full mb-6">
                  <TabsList className="px-4 lg:px-6 lg:w-full lg:h-14">
                    <TabsTrigger className="flex items-center gap-2 lg:text-lg" value="general">{t("invoiceReport.tabs.general")}</TabsTrigger>
                    <TabsTrigger className="flex items-center gap-2 lg:text-lg" value="details">{t("invoiceReport.tabs.details")}</TabsTrigger>
                    <TabsTrigger className="flex items-center gap-2 lg:text-lg" value="communication">{t("invoiceReport.tabs.communication")}</TabsTrigger>
                  </TabsList>

                  <Card>
                    <CardContent className="pt-6">
                      <TabsContent value="general">
                        <div className="grid grid-cols-2 gap-4">
                          <div>
                            <h3 className="font-semibold mb-2">{t("invoiceReport.contractNumber")}</h3>
                            <p>{invoice.contractNumber}</p>
                          </div>
                          <div>
                            <h3 className="font-semibold mb-2">{t("invoiceReport.invoiceNumber")}</h3>
                            <p>{invoice.invoiceNo}</p>
                          </div>
                          <div>
                            <h3 className="font-semibold mb-2">{t("invoiceReport.sellerCompany")}</h3>
                            <p>{invoice.sellerCompany}</p>
                          </div>
                          <div>
                            <h3 className="font-semibold mb-2">{t("invoiceReport.buyerCompany")}</h3>
                            <p>{invoice.buyerCompany}</p>
                          </div>
                          <div>
                            <h3 className="font-semibold mb-2">{t("invoiceReport.grain")}</h3>
                            <p>{invoice.grain}</p>
                          </div>
                          <div>
                            <h3 className="font-semibold mb-2">{t("invoiceReport.invoicePartner")}</h3>
                            <p>{invoice.invoicePartner}</p>
                          </div>
                        </div>
                      </TabsContent>

                      <TabsContent value="details">
                        <div className="grid grid-cols-2 gap-4">
                          <div>
                            <h3 className="font-semibold mb-2">{t("invoiceReport.contractQuantity")}</h3>
                            <p>{invoice.contractQuantity}</p>
                          </div>
                          <div>
                            <h3 className="font-semibold mb-2">{t("invoiceReport.executedQuantity")}</h3>
                            <p>{invoice.executedQuantity}</p>
                          </div>
                          <div>
                            <h3 className="font-semibold mb-2">{t("invoiceReport.commission")}</h3>
                            <p>{invoice.commission} {invoice.commissionCurrency}</p>
                          </div>
                          <div>
                            <h3 className="font-semibold mb-2">{t("invoiceReport.amount")}</h3>
                            <p>{invoice.invoiceValue} {invoice.invoiceCurrency}</p>
                          </div>
                          <div>
                            <h3 className="font-semibold mb-2">{t("invoiceReport.issueDate")}</h3>
                            <p>{invoice.invoiceDate}</p>
                          </div>
                          <div>
                            <h3 className="font-semibold mb-2">{t("invoiceReport.dueDate")}</h3>
                            <p>{invoice.invoiceDueDate}</p>
                          </div>
                          <div>
                            <h3 className="font-semibold mb-2">{t("invoiceReport.cashedInDate")}</h3>
                            <p>{invoice.cashedInDate}</p>
                          </div>
                          <div>
                            <h3 className="font-semibold mb-2">{t("invoiceReport.cashedInValue")}</h3>
                            <p>{invoice.cashedInValue}</p>
                          </div>
                          <div>
                            <h3 className="font-semibold mb-2">{t("invoiceReport.outstandingBalance")}</h3>
                            <p>{invoice.outstandingBalance}</p>
                          </div>
                          <div>
                            <h3 className="font-semibold mb-2">{t("invoiceReport.delayDays")}</h3>
                            <p>{invoice.delayDays}</p>
                          </div>
                        </div>
                      </TabsContent>

                      <TabsContent value="communication">
                        <div className="grid grid-cols-1 gap-4">
                          <div>
                            <h3 className="font-semibold mb-2">{t("invoiceReport.emailSubject")}</h3>
                            <p>{invoice.eMailSubject}</p>
                          </div>
                          <div>
                            <h3 className="font-semibold mb-2">{t("invoiceReport.emailContent")}</h3>
                            <p className="whitespace-pre-wrap">{invoice.eMailContent}</p>
                          </div>
                          <div>
                            <h3 className="font-semibold mb-2">{t("invoiceReport.description")}</h3>
                            <p>{invoice.description}</p>
                          </div>
                        </div>
                      </TabsContent>
                    </CardContent>
                  </Card>
                </Tabs>
              </div>
            </div>
          </div>
        </div>
      </SidebarInset>
    </SidebarProvider>
  )
}