"use client"

import { useState, useEffect } from "react"
import { useTranslation } from "react-i18next"
import { useRouter } from "next/navigation"
import { AppSidebar } from "@/components/app-sidebar"
import { SiteHeader } from "@/components/site-header"
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/draft-dialog"
import { Combobox } from "@/components/combobox"

type AnnexType = 
  | "ANEXA_RO_B"
  | "ANEXA_RO_S"
  | "ANEXA_ENG_B"
  | "ANEXA_ENG_S"
  | "ANEXA_BILINGV_B"
  | "ANEXA_BILINGV_S"
  | "ANEXA_MAGIC_B"
  | "ANEXA_MAGIC_S"

interface NewAnnex {
  annexNumber: string;
  contractNumber: string;
  company: string;
  status: string;
  type: AnnexType;
  validUntil: string;
  signedBy: string;
  changes: string;
}

interface Contract {
  id: number;
  contractNumber: string;
  company: string;
  status: string;
}

export default function NewAnnexPage() {
  const [annex, setAnnex] = useState<NewAnnex>({
    annexNumber: "",
    contractNumber: "",
    company: "",
    status: "Draft",
    type: "ANEXA_RO_B",
    validUntil: "",
    signedBy: "",
    changes: ""
  })

  const [showTypeDialog, setShowTypeDialog] = useState(true)
  const [typeOptions, setTypeOptions] = useState<AnnexType[]>([
    "ANEXA_RO_B", "ANEXA_RO_S", "ANEXA_ENG_B", "ANEXA_ENG_S",
    "ANEXA_BILINGV_B", "ANEXA_BILINGV_S", "ANEXA_MAGIC_B", "ANEXA_MAGIC_S"
  ])
  const [contracts, setContracts] = useState<Contract[]>([])
  const [filteredContracts, setFilteredContracts] = useState<{ value: string; label: string }[]>([])
  const [availableCompanies, setAvailableCompanies] = useState<string[]>([])
  const { t } = useTranslation()
  const router = useRouter()
  const [isTypeSelectorOpen, setIsTypeSelectorOpen] = useState(false)

  useEffect(() => {
    // Fetch contracts
    fetch('/contracts/api/contractsdata')
      .then(res => res.json())
      .then(data => {
        console.log('Fetched contracts:', data);
        setContracts(data)
        // Filter contracts that are open or pending
        const filtered = data
          .filter((contract: Contract) => 
            contract.status === "Open" || contract.status === "OPEN" || contract.status === "Pending"
          )
          .map((contract: Contract) => ({
            value: contract.contractNumber,
            label: contract.contractNumber
          }))
        console.log('Filtered contracts:', filtered);
        setFilteredContracts(filtered)
      })
      .catch(error => {
        console.error('Error fetching contracts:', error);
      })
  }, [])

  const handleContractSelect = (contractNumber: string) => {
    const selectedContract = contracts.find(c => c.contractNumber === contractNumber)
    if (selectedContract) {
      // Set available companies based on the selected contract
      setAvailableCompanies(["BNK Brokers SRL", "BNK Trading SRL"])
      setAnnex(prev => ({
        ...prev,
        contractNumber: selectedContract.contractNumber,
        company: "", // Reset company when contract changes
        status: "Draft"
      }))
    }
  }

  const handleInputChange = (field: keyof NewAnnex, value: string | AnnexType) => {
    setAnnex(prev => ({
      ...prev,
      [field]: value
    }))
  }

  const handleSubmit = async () => {
    try {
      const response = await fetch("/contracts/api/annex", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          ...annex,
          createdDate: new Date().toISOString(),
        }),
      })

      if (response.ok) {
        router.push("/contracts/annex")
      }
    } catch (error) {
      console.error("Error creating annex:", error)
    }
  }

  const handleTypeSelect = (type: AnnexType) => {
    handleInputChange('type', type)
    const randomNum = Math.floor(1000 + Math.random() * 9000); // Generate a random 4-digit number
    const annexNumber = `${type.slice(0, 2)}${randomNum}`; // Combine first 2 letters of type with random number
    handleInputChange('annexNumber', annexNumber); // Set the annex number
    setShowTypeDialog(false); // Close the dialog
  };

  return (
    <SidebarProvider
      style={{
        "--sidebar-width": "calc(var(--spacing) * 72)",
        "--header-height": "calc(var(--spacing) * 12)",
      } as React.CSSProperties}
    >
      <AppSidebar variant="inset" />
      <SidebarInset>
        <SiteHeader title={t("annex.newannex")}/>
        <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("annex.newannex")}</h2>
                <Button variant="outline" onClick={() => router.back()}>
                  {t("annex.cancel")}
                </Button>
              </div>

              <Dialog open={showTypeDialog} onOpenChange={setShowTypeDialog}>
                <DialogContent className="max-w-4xl">
                  <DialogHeader>
                    <DialogTitle>{t("annex.selecttype")}</DialogTitle>
                  </DialogHeader>
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    {typeOptions.map((type) => (
                      <Card
                        key={type}
                        className="cursor-pointer hover:bg-accent transition-colors"
                        onClick={() => handleTypeSelect(type)}
                      >
                        <CardHeader>
                          <CardTitle className="text-lg">{t(`annex.types.${type}`)}</CardTitle>
                        </CardHeader>
                      </Card>
                    ))}
                  </div>
                </DialogContent>
              </Dialog>

              <form onSubmit={handleSubmit} className="px-4 lg:px-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <Card>
                    <CardHeader>
                      <CardTitle>{t("annex.basicinfo")}</CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-4">
                      <div className="grid grid-cols-2 gap-4">
                        <div className="space-y-2">
                          <Label htmlFor="annexNumber">{t("annex.annexnumber")}</Label>
                          <Input
                            id="annexNumber"
                            value={annex.annexNumber}
                            readOnly
                          />
                        </div>
                        <div className="space-y-2">
                          <Label htmlFor="contractNumber">{t("annex.contractnumber")}</Label>
                          <Combobox
                            items={filteredContracts}
                            value={annex.contractNumber}
                            onValueChange={handleContractSelect}
                            placeholder="Select contract"
                            emptyText="No contracts found"
                          />
                        </div>
                      </div>
                      <div className="grid grid-cols-3 gap-4">
                        <div className="space-y-2">
                          <Label htmlFor="company">{t("annex.company")}</Label>
                          <Select
                            value={annex.company}
                            onValueChange={(value) => handleInputChange('company', value)}
                            disabled={!annex.contractNumber}
                          >
                            <SelectTrigger>
                              <SelectValue placeholder={annex.contractNumber ? "Select company" : "Select contract first"} />
                            </SelectTrigger>
                            <SelectContent>
                              {availableCompanies.map((company) => (
                                <SelectItem key={company} value={company}>
                                  {company}
                                </SelectItem>
                              ))}
                            </SelectContent>
                          </Select>
                        </div>
                        <div className="space-y-2">
                          <Label>{t("annex.status")}</Label>
                          <Input
                            value={annex.status}
                            readOnly
                          />
                        </div>
                        <div className="space-y-2">
                          <Label htmlFor="type">{t("annex.type")}</Label>
                          <Button
                            variant="outline"
                            className="w-full justify-start"
                            onClick={() => setIsTypeSelectorOpen(true)}
                          >
                            {t(`annex.types.${annex.type}`)}
                          </Button>
                        </div>
                      </div>
                    </CardContent>
                  </Card>

                  <Card>
                    <CardHeader>
                      <CardTitle>{t("annex.dates")}</CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-4">
                      <div className="space-y-2">
                        <Label htmlFor="validUntil">{t("annex.validuntil")}</Label>
                        <Input
                          id="validUntil"
                          type="date"
                          value={annex.validUntil}
                          onChange={(e) => handleInputChange('validUntil', e.target.value)}
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="signedBy">{t("annex.signedby")}</Label>
                        <Input
                          id="signedBy"
                          value={annex.signedBy}
                          onChange={(e) => handleInputChange('signedBy', e.target.value)}
                        />
                      </div>
                    </CardContent>
                  </Card>

                  <Card className="md:col-span-2">
                    <CardHeader>
                      <CardTitle>{t("annex.changesinfo")}</CardTitle>
                    </CardHeader>
                    <CardContent>
                      <Textarea
                        value={annex.changes}
                        onChange={(e) => handleInputChange('changes', e.target.value)}
                        className="min-h-[200px]"
                      />
                    </CardContent>
                  </Card>

                  <div className="md:col-span-2 flex justify-end">
                    <Button onClick={handleSubmit}>{t("annex.create")}</Button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </SidebarInset>
    </SidebarProvider>
  )
}