"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 ContractType = 
  | "CTR_RO"
  | "CTR_ENG"
  | "CTR_BLINGV"
  | "CTR_EUROCONSULT_ENG"
  | "CTR_MAGIC_ENG"
  | "CTR_AGROCHIRNOGI_RO"
  | "CTR_AGROCHIRNOGI_BGV"
  | "CTR_ANDERSONS_RO"
  | "CTR_BUNGE_RO"
  | "CTR_FINANTARE_ACHIZITIE_AAYLEX_RO"
  | "CTR_FINANTARE_VANZARE_AAYLEX_RO"
  | "CTR_GOZURI_GGI_RO"
  | "CTR_GGI_RO"
  | "CTR_GGI_ENG"

interface NewDraft {
  draftNumber: string;
  company: string;
  status: string;
  type: ContractType;
  goods: string;
  quantity: number;
  price: number;
  currency: string;
  paymentTerms: string;
  deliveryTerms: string;
  notes: string;
}

export default function NewDraftPage() {
  const [draft, setDraft] = useState<NewDraft>({
    draftNumber: "",
    company: "",
    status: "In Progress",
    type: "CTR_RO",
    goods: "",
    quantity: 0,
    price: 0,
    currency: "USD",
    paymentTerms: "",
    deliveryTerms: "FOB",
    notes: ""
  })

  const [isTypeSelectorOpen, setIsTypeSelectorOpen] = useState(true)
  const [goodsOptions, setGoodsOptions] = useState<{ value: string; label: string }[]>([])
  const [companyOptions, setCompanyOptions] = useState<{ value: string; label: string }[]>([])
  const [paymentTermsOptions, setPaymentTermsOptions] = useState<{ value: string; label: string }[]>([])
  const { t } = useTranslation()
  const router = useRouter()

  useEffect(() => {
    // Fetch options for companies, goods, and payment terms
    fetch('/contracts/api/drafts')
      .then(res => res.json())
      .then(data => {
        const goodsSet = new Set<string>(data.map((item: NewDraft) => item.goods))
        const companiesSet = new Set<string>(data.map((item: NewDraft) => item.company))
        const paymentTermsSet = new Set<string>(data.map((item: NewDraft) => item.paymentTerms))

        setGoodsOptions(Array.from(goodsSet).map(item => ({ value: item, label: item })))
        setCompanyOptions(Array.from(companiesSet).map(item => ({ value: item, label: item })))
        setPaymentTermsOptions(Array.from(paymentTermsSet).map(item => ({ value: item, label: item })))
      })
  }, [])

  const handleChange = (field: keyof NewDraft, value: NewDraft[keyof NewDraft]) => {
    setDraft(prev => ({
      ...prev,
      [field]: value
    }))
  }

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    try {
      const response = await fetch(`/contracts/api/drafts`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          ...draft,
          id: Date.now(),
          createdDate: new Date().toISOString(),
          lastModified: new Date().toISOString(),
          createdBy: "Current User"
        }),
      })
      if (response.ok) {
        router.push('/contracts/drafts')
      }
    } catch (error) {
      console.error('Error creating draft:', error)
    }
  }

  const contractTypes: ContractType[] = [
    "CTR_RO",
    "CTR_ENG",
    "CTR_BLINGV",
    "CTR_EUROCONSULT_ENG",
    "CTR_MAGIC_ENG",
    "CTR_AGROCHIRNOGI_RO",
    "CTR_AGROCHIRNOGI_BGV",
    "CTR_ANDERSONS_RO",
    "CTR_BUNGE_RO",
    "CTR_FINANTARE_ACHIZITIE_AAYLEX_RO",
    "CTR_FINANTARE_VANZARE_AAYLEX_RO",
    "CTR_GOZURI_GGI_RO",
    "CTR_GGI_RO",
    "CTR_GGI_ENG"
  ]

  const handleTypeSelect = (type: ContractType) => {
    handleChange('type', type)
    const randomNum = Math.floor(1000 + Math.random() * 9000) // Generate a random 4-digit number
    const draftNumber = `${type.slice(0, 2)}${randomNum}` // Combine first 2 letters of type with random number
    handleChange('draftNumber', draftNumber) // Set the draft number
    setIsTypeSelectorOpen(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("drafts.newdrafttitle")} />
        <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("drafts.newdrafttitle")}</h2>
                <Button variant="outline" onClick={() => router.back()}>
                  {t("drafts.cancel")}
                </Button>
              </div>

              <Dialog open={isTypeSelectorOpen} onOpenChange={setIsTypeSelectorOpen}>
                <DialogContent className="max-w-4xl">
                  <DialogHeader>
                    <DialogTitle>{t("drafts.selecttype")}</DialogTitle>
                  </DialogHeader>
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    {contractTypes.map((type) => (
                      <Card
                        key={type}
                        className="cursor-pointer hover:bg-accent transition-colors"
                        onClick={() => handleTypeSelect(type)}
                      >
                        <CardHeader>
                          <CardTitle className="text-lg">{t(`drafts.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("drafts.basicinfo")}</CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-4">
                      <div className="space-y-2">
                        <Label htmlFor="draftNumber">{t("drafts.draftnumber")}</Label>
                        <Input
                          id="draftNumber"
                          value={draft.draftNumber}
                          readOnly
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="company">{t("drafts.company")}</Label>
                        <Combobox
                          items={companyOptions}
                          value={draft.company}
                          onValueChange={(value) => handleChange('company', value)}
                          placeholder="Select company"
                          emptyText="No companies found"
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="type">{t("drafts.type")}</Label>
                        <Button
                          variant="outline"
                          className="w-full justify-start"
                          onClick={() => setIsTypeSelectorOpen(true)}
                        >
                          {t(`drafts.types.${draft.type}`)}
                        </Button>
                      </div>
                    </CardContent>
                  </Card>

                  <Card>
                    <CardHeader>
                      <CardTitle>{t("drafts.financialinfo")}</CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-4">
                      <div className="space-y-2">
                        <Label htmlFor="price">{t("drafts.price")}</Label>
                        <Input
                          id="price"
                          type="number"
                          value={draft.price}
                          onChange={(e) => handleChange('price', parseFloat(e.target.value))}
                          required
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="currency">{t("drafts.currency")}</Label>
                        <Select
                          value={draft.currency}
                          onValueChange={(value) => handleChange('currency', value)}
                        >
                          <SelectTrigger>
                            <SelectValue />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="USD">USD</SelectItem>
                            <SelectItem value="EUR">EUR</SelectItem>
                            <SelectItem value="GBP">GBP</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="paymentTerms">{t("drafts.paymentterms")}</Label>
                        <Combobox
                          items={paymentTermsOptions}
                          value={draft.paymentTerms}
                          onValueChange={(value) => handleChange('paymentTerms', value)}
                          placeholder="Select payment terms"
                          emptyText="No payment terms found"
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="deliveryTerms">{t("drafts.deliveryterms")}</Label>
                        <Select
                          value={draft.deliveryTerms}
                          onValueChange={(value) => handleChange('deliveryTerms', value)}
                        >
                          <SelectTrigger>
                            <SelectValue />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="FOB">FOB</SelectItem>
                            <SelectItem value="CIF">CIF</SelectItem>
                            <SelectItem value="EXW">EXW</SelectItem>
                            <SelectItem value="DDP">DDP</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                    </CardContent>
                  </Card>

                  <Card>
                    <CardHeader>
                      <CardTitle>{t("drafts.productinfo")}</CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-4">
                      <div className="space-y-2">
                        <Label htmlFor="goods">{t("drafts.goods")}</Label>
                        <Combobox
                          items={goodsOptions}
                          value={draft.goods}
                          onValueChange={(value) => handleChange('goods', value)}
                          placeholder="Select goods"
                          emptyText="No goods found"
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="quantity">{t("drafts.quantity")}</Label>
                        <Input
                          id="quantity"
                          type="number"
                          value={draft.quantity}
                          onChange={(e) => handleChange('quantity', parseInt(e.target.value))}
                          required
                        />
                      </div>
                    </CardContent>
                  </Card>

                  <Card className="md:col-span-2">
                    <CardHeader>
                      <CardTitle>{t("drafts.notes")}</CardTitle>
                    </CardHeader>
                    <CardContent>
                      <Textarea
                        value={draft.notes}
                        onChange={(e) => handleChange('notes', e.target.value)}
                        className="min-h-[100px]"
                      />
                    </CardContent>
                  </Card>
                </div>

                <div className="flex justify-end gap-2 mt-6">
                  <Button type="submit" variant="default">
                    {t("drafts.create")}
                  </Button>
                  <Button type="button" variant="outline" onClick={() => router.back()}>
                    {t("drafts.cancel")}
                  </Button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </SidebarInset>
    </SidebarProvider>
  )
}