"use client"

import { AppSidebar } from "@/components/app-sidebar"
import { SiteHeader } from "@/components/site-header"
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar"
import { useRouter } from "next/navigation"
import { useState, useEffect, useMemo } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardTitle, CardHeader, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

export default function NewDeliveryInvoiceInputPage() {
  const router = useRouter()
  const [contracts, setContracts] = useState<any[]>([])
  const [selectedContract, setSelectedContract] = useState<any | null>(null)
  const [invoice, setInvoice] = useState<any>({})
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)

  useEffect(() => {
    fetch("/execution-operations/api")
      .then(res => res.json())
      .then(data => {
        setContracts(data.invoices)
        setLoading(false)
      })
  }, [])

  const contractNumbers = useMemo(() => [...new Set(contracts.map(c => c["Contract number"]))], [contracts])

  const handleContractSelect = (val: string) => {
    const contract = contracts.find(c => c["Contract number"] === val)
    setSelectedContract(contract)
    if (contract) {
      setInvoice({
        ...invoice,
        "Contract number": contract["Contract number"],
        "Invoice due date": contract["Invoice due date"] || "",
        " Invoice Total Value ": contract[" Invoice Total Value "] || "",
        " QTTY CONTRACT ": contract[" QTTY CONTRACT "] || "",
        "MARGIN": contract["MARGIN"] || "",
        " QTTY UNDER MARGIN ": contract[" QTTY UNDER MARGIN "] || ""
      })
    }
  }

  const handleSave = async () => {
    setSaving(true)
    // Simulate POST
    setTimeout(() => {
      alert("Invoice created! (Simulated)")
      setSaving(false)
      router.push("/execution-operations/deliveryinvoicesinput")
    }, 1000)
  }

  if (loading) return <div>Loading...</div>

  return (
    <SidebarProvider style={{"--sidebar-width": "calc(var(--spacing) * 72)","--header-height": "calc(var(--spacing) * 12)"} as React.CSSProperties}>
      <AppSidebar variant="inset" />
      <SidebarInset>
        <SiteHeader title="New Delivery Invoice" />
        <div className="flex flex-1 flex-col">
          <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-4">
            <div className="flex justify-between items-center px-4 lg:px-6">
              <h2 className="text-2xl font-bold">New Delivery Invoice</h2>
            </div>
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 px-4 lg:px-6">
              <Card>
                <CardHeader>
                  <CardTitle>Invoice Details</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="mb-4">
                    <Select value={selectedContract?.["Contract number"] || ""} onValueChange={handleContractSelect}>
                      <SelectTrigger><SelectValue placeholder="Select contract number" /></SelectTrigger>
                      <SelectContent>
                        {contractNumbers.map(num => (
                          <SelectItem key={num} value={num}>{num}</SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div className="flex flex-col gap-2">
                      <span className="font-medium">Invoice Number</span>
                      <Input value={invoice["Invoice no"] || ""} onChange={e => setInvoice({ ...invoice, "Invoice no": e.target.value })} />
                    </div>
                    <div className="flex flex-col gap-2">
                      <span className="font-medium">Invoice Date</span>
                      <Input type="date" value={invoice["Invoice date"] || ""} onChange={e => setInvoice({ ...invoice, "Invoice date": e.target.value })} />
                    </div>
                    <div className="flex flex-col gap-2">
                      <span className="font-medium">Invoice Quantity</span>
                      <Input type="number" value={invoice[" Invoice Quantity "] || ""} onChange={e => setInvoice({ ...invoice, " Invoice Quantity ": e.target.value })} />
                    </div>
                    <div className="flex flex-col gap-2">
                      <span className="font-medium">Invoice Price</span>
                      <Input type="number" value={invoice[" Invoice Price "] || ""} onChange={e => setInvoice({ ...invoice, " Invoice Price ": e.target.value })} />
                    </div>
                    <div className="flex flex-col gap-2">
                      <span className="font-medium">Invoice Currency</span>
                      <Input value={invoice[" Invoice Currency "] || ""} onChange={e => setInvoice({ ...invoice, " Invoice Currency ": e.target.value })} />
                    </div>
                    <div className="flex flex-col gap-2">
                      <span className="font-medium">Details</span>
                      <Input value={invoice["Details"] || ""} onChange={e => setInvoice({ ...invoice, "Details": e.target.value })} placeholder="Enter invoice details..." />
                    </div>
                  </div>
                  <div className="flex flex-col gap-2">
                    <span className="font-medium">PDF Invoice</span>
                    <Button disabled variant="outline">Upload PDF (coming soon)</Button>
                  </div>
                </CardContent>
              </Card>
              <Card>
                <CardHeader>
                  <CardTitle>Auto-calculated</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex flex-col gap-2">
                    <span className="font-medium">Invoice Due Date</span>
                    <Input value={invoice["Invoice due date"] || ""} readOnly />
                  </div>
                  <div className="flex flex-col gap-2">
                    <span className="font-medium">Invoice Total Value</span>
                    <Input value={invoice[" Invoice Total Value "] || ""} readOnly />
                  </div>
                  <div className="flex flex-col gap-2">
                    <span className="font-medium">+margin</span>
                    <Input value={selectedContract ? (Number(selectedContract[" QTTY CONTRACT "]) * (1 + Number(selectedContract["MARGIN"])/100)).toFixed(2) : ""} readOnly />
                  </div>
                  <div className="flex flex-col gap-2">
                    <span className="font-medium">-margin</span>
                    <Input value={selectedContract ? (Number(selectedContract[" QTTY CONTRACT "]) * (1 - Number(selectedContract["MARGIN"])/100)).toFixed(2) : ""} readOnly />
                  </div>
                  <div className="flex flex-col gap-2">
                    <span className="font-medium">open qtty to -margin</span>
                    <Input value={selectedContract ? (Number(selectedContract[" QTTY CONTRACT "]) - (Number(selectedContract[" QTTY CONTRACT "]) * (1 - Number(selectedContract["MARGIN"])/100))).toFixed(2) : ""} readOnly />
                  </div>
                </CardContent>
              </Card>
            </div>
            <div className="flex justify-end px-4 lg:px-6">
              <Button onClick={handleSave} disabled={saving}>{saving ? "Saving..." : "Save Invoice"}</Button>
            </div>
          </div>
        </div>
      </SidebarInset>
    </SidebarProvider>
  )
}