"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { useTranslation } from "react-i18next"
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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/draft-dialog"
import { Combobox } from "@/components/combobox"

type TransportOrderType = 
  | "COMANDA_TRANSPORT_RO" 
  | "COMANDA_TRANSPORT_ENG" 
  | "COMANDA_TRANSPORT_AUTO_BILINGV"
  | "CTR_TRANSPORT_RO"
  | "CTR_TRANSPORT_ENG"
  | "CTR_TRANSPORT_BILINGV"

interface TransportOrderFormData {
  orderNumber: string
  contractNumber: string
  company: string
  transportType: string
  fromLocation: string
  toLocation: string
  distance: number
  price: number
  currency: string
  goods: string
  quantity: number
  unit: string
}

export default function NewTransportOrderPage() {
  const [orderType, setOrderType] = useState<TransportOrderType | null>(null)
  const [showTypeDialog, setShowTypeDialog] = useState(true)
  const [formData, setFormData] = useState<TransportOrderFormData>({
    orderNumber: "",
    contractNumber: "",
    company: "",
    transportType: "",
    fromLocation: "",
    toLocation: "",
    distance: 0,
    price: 0,
    currency: "",
    goods: "",
    quantity: 0,
    unit: ""
  })

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

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

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

  const handleInputChange = (field: keyof TransportOrderFormData, value: string | number) => {
    setFormData(prev => ({
      ...prev,
      [field]: value
    }))
  }

  const handleSubmit = async () => {
    try {
      const response = await fetch("/contracts/api/transport-orders", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          ...formData,
          type: orderType,
          status: "Pending",
          createdDate: new Date().toISOString(),
          validUntil: new Date().toISOString(),
          signedBy: "Pending"
        }),
      })

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

  const transportOrderType: TransportOrderType[] = [
     "COMANDA_TRANSPORT_RO" ,
     "COMANDA_TRANSPORT_ENG" ,
     "COMANDA_TRANSPORT_AUTO_BILINGV",
     "CTR_TRANSPORT_RO",
     "CTR_TRANSPORT_ENG",
     "CTR_TRANSPORT_BILINGV",
  ]

  const handleTypeSelect = (type: TransportOrderType) => {
    handleInputChange('transportType', type)
    const randomNum = Math.floor(1000 + Math.random() * 9000) // Generate a random 4-digit number
    const orderNumber = `${type.slice(0, 2)}${randomNum}` // Combine first 2 letters of type with random number
    handleInputChange('orderNumber', orderNumber) // 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("transportorder.title")}/>
        <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">
                <div className="flex items-center gap-4">
                  <h2 className="text-2xl font-bold">{t("transportorder.new")}</h2>
                </div>
                <Button variant="outline" onClick={() => router.back()}>
                  {t("transportorder.back")}
                </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">
                    {transportOrderType.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>

              <div className="px-4 lg:px-6">
              
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <Card>
                      <CardHeader>
                        <CardTitle>{t("transportorder.basicinfo")}</CardTitle>
                      </CardHeader>
                      <CardContent className="space-y-4">
                        <div className="space-y-2">
                          <Label htmlFor="orderNumber">{t("transportorder.ordernumber")}</Label>
                          <Input
                          id="orderNumber"
                          value={formData.orderNumber}
                          readOnly
                        />
                        </div>
                        <div className="space-y-2">
                          <Label htmlFor="contractNumber">{t("transportorder.contractnumber")}</Label>
                          <Input
                            id="contractNumber"
                            value={formData.contractNumber}
                            onChange={(e) => handleInputChange('contractNumber', e.target.value)}
                          />
                        </div>
                        <div className="space-y-2">
                          <Label htmlFor="company">{t("transportorder.company")}</Label>
                          <Combobox
                          items={companyOptions}
                          value={formData.company}
                          onValueChange={(value) => handleInputChange('company', value)}
                          placeholder="Select company"
                          emptyText="No companies found"
                        />
                        </div>
                        <div className="space-y-2">
                        <Label htmlFor="type">{t("transportorder.type")}</Label>
                        <Button
                          variant="outline"
                          className="w-full justify-start"
                          onClick={() => setIsTypeSelectorOpen(true)}
                        >
                          {t(`transportorder.types.${formData.transportType}`)}
                        </Button>
                      </div>
                      </CardContent>
                    </Card>

                    <Card>
                      <CardHeader>
                        <CardTitle>{t("transportorder.route")}</CardTitle>
                      </CardHeader>
                      <CardContent className="space-y-4">
                        <div className="space-y-2">
                          <Label htmlFor="transportType">{t("transportorder.transporttype")}</Label>
                          <Input
                            id="transportType"
                            value={formData.transportType}
                            onChange={(e) => handleInputChange('transportType', e.target.value)}
                          />
                        </div>
                        <div className="space-y-2">
                          <Label htmlFor="fromLocation">{t("transportorder.fromlocation")}</Label>
                          <Input
                            id="fromLocation"
                            value={formData.fromLocation}
                            onChange={(e) => handleInputChange('fromLocation', e.target.value)}
                          />
                        </div>
                        <div className="space-y-2">
                          <Label htmlFor="toLocation">{t("transportorder.tolocation")}</Label>
                          <Input
                            id="toLocation"
                            value={formData.toLocation}
                            onChange={(e) => handleInputChange('toLocation', e.target.value)}
                          />
                        </div>
                        <div className="space-y-2">
                          <Label htmlFor="distance">{t("transportorder.distance")}</Label>
                          <Input
                            id="distance"
                            type="number"
                            value={formData.distance}
                            onChange={(e) => handleInputChange('distance', Number(e.target.value))}
                          />
                        </div>
                      </CardContent>
                    </Card>

                    <Card>
                      <CardHeader>
                        <CardTitle>{t("transportorder.financialinfo")}</CardTitle>
                      </CardHeader>
                      <CardContent className="space-y-4">
                        <div className="space-y-2">
                          <Label htmlFor="price">{t("transportorder.price")}</Label>
                          <Input
                            id="price"
                            type="number"
                            value={formData.price}
                            onChange={(e) => handleInputChange('price', Number(e.target.value))}
                          />
                        </div>
                        <div className="space-y-2">
                          <Label htmlFor="currency">{t("transportorder.currency")}</Label>
                          <Input
                            id="currency"
                            value={formData.currency}
                            onChange={(e) => handleInputChange('currency', e.target.value)}
                          />
                        </div>
                      </CardContent>
                    </Card>

                    <Card>
                      <CardHeader>
                        <CardTitle>{t("transportorder.cargo")}</CardTitle>
                      </CardHeader>
                      <CardContent className="space-y-4">
                        <div className="space-y-2">
                          <Label htmlFor="goods">{t("transportorder.goods")}</Label>
                          <Input
                            id="goods"
                            value={formData.goods}
                            onChange={(e) => handleInputChange('goods', e.target.value)}
                          />
                        </div>
                        <div className="space-y-2">
                          <Label htmlFor="quantity">{t("transportorder.quantity")}</Label>
                          <Input
                            id="quantity"
                            type="number"
                            value={formData.quantity}
                            onChange={(e) => handleInputChange('quantity', Number(e.target.value))}
                          />
                        </div>
                        <div className="space-y-2">
                          <Label htmlFor="unit">{t("transportorder.unit")}</Label>
                          <Input
                            id="unit"
                            value={formData.unit}
                            onChange={(e) => handleInputChange('unit', e.target.value)}
                          />
                        </div>
                      </CardContent>
                    </Card>

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