"use client"

import { use, 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 { 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 TransportOrder {
  id: number;
  orderNumber: string;
  contractNumber: string;
  company: string;
  status: string;
  type: string;
  createdDate: string;
  validUntil: string;
  signedBy: string;
  transportType: string;
  fromLocation: string;
  toLocation: string;
  distance: number;
  price: number;
  currency: string;
  goods: string;
  quantity: number;
  unit: string;
}

export default function TransportOrderDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const resolvedParams = use(params)
  const [order, setOrder] = useState<TransportOrder | null>(null)
  const [isTypeSelectorOpen, setIsTypeSelectorOpen] = useState(false)
  const { t } = useTranslation()
  const router = useRouter()
  const [goodsOptions, setGoodsOptions] = useState<{ value: string; label: string }[]>([])
  const [companyOptions, setCompanyOptions] = useState<{ value: string; label: string }[]>([])


  useEffect(() => {
    const fetchOrder = async () => {
      try {
        const response = await fetch(`/contracts/api/transport-orders`)
        if (response.ok) {
          const data = await response.json()
          const found = data.find((o: TransportOrder) => o.id.toString() === resolvedParams.id)
          if (found) {
            setOrder(found)
          }
          const goodsSet = new Set<string>(data.map((item: TransportOrder) => item.goods))
        const companiesSet = new Set<string>(data.map((item: TransportOrder) => item.company))
        
        setGoodsOptions(Array.from(goodsSet).map(item => ({ value: item, label: item })))
        setCompanyOptions(Array.from(companiesSet).map(item => ({ value: item, label: item })))
        }
      } catch (error) {
        console.error('Error fetching transport order:', error)
      }
    }
    fetchOrder()
  }, [resolvedParams.id])

  const handleChange = (field: keyof TransportOrder, value: TransportOrder[keyof TransportOrder]) => {
    if (order) {
      setOrder(prev => ({
        ...prev!,
        [field]: value
      }))
    }
  }

  const handleSave = async () => {
    if (!order) return

    try {
      const response = await fetch(`/contracts/api/transport-orders`, {
        method: "PUT",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(order),
      })

      if (response.ok) {
        router.push("/contracts/transport-order")
      }
    } catch (error) {
      console.error('Error updating 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",
  ]

  if (!order) {
    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={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.orderdetails")}</h2>
                  
                </div>
                <div className="flex gap-2">
                  <Button variant="outline" onClick={() => router.back()}>
                    {t("transportorder.back")}
                  </Button>
                  <Button onClick={handleSave}>
                    {t("transportorder.save")}
                  </Button>
                </div>
              </div>

              <Dialog open={isTypeSelectorOpen} onOpenChange={setIsTypeSelectorOpen}>
                <DialogContent className="max-w-4xl">
                  <DialogHeader>
                    <DialogTitle>{t("transportorder.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={() => {
                          handleChange('type', type)
                          setIsTypeSelectorOpen(false)
                        }}
                      >
                        <CardHeader>
                          <CardTitle className="text-lg">{t(`transportorder.types.${type}`)}</CardTitle>
                        </CardHeader>
                      </Card>
                    ))}
                  </div>
                </DialogContent>
              </Dialog>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 px-4 lg:px-6">
                <Card>
                  <CardHeader>
                    <CardTitle>{t("transportorder.basicinfo")}</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="space-y-2">
                      <Label>{t("transportorder.ordernumber")}</Label>
                      <Input
                        value={order.orderNumber}
                        onChange={(e) => setOrder({ ...order, orderNumber: e.target.value })}
                        readOnly
                      />
                    </div>
                    <div className="space-y-2">
                      <Label>{t("transportorder.contractnumber")}</Label>
                      <Input
                        value={order.contractNumber}
                        onChange={(e) => setOrder({ ...order, contractNumber: e.target.value })}
                      />
                    </div>
                    <div className="space-y-2">
                        <Label htmlFor="company">{t("transportorder.company")}</Label>
                        <Combobox
                          items={companyOptions}
                          value={order.company}
                          onValueChange={(value) => handleChange('company', value)}
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="status">{t("transportorder.status")}</Label>
                        <Select
                          value={order.status}
                          onValueChange={(value) => handleChange('status', value)}
                        >
                          <SelectTrigger>
                            <SelectValue />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="Active">{t("transportorder.statusLabels.active")}</SelectItem>
                            <SelectItem value="In Progress">{t("transportorder.statusLabels.inprogress")}</SelectItem>
                            <SelectItem value="Under Review">{t("transportorder.statusLabels.underreview")}</SelectItem>
                            <SelectItem value="Pending Approval">{t("transportorder.statusLabels.pendingapproval")}</SelectItem>
                          </SelectContent>
                        </Select>
                      </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(`drafts.types.${order.type}`)}
                        </Button>
                      </div>
                  </CardContent>
                </Card>

                <Card>
                  <CardHeader>
                    <CardTitle>{t("transportorder.route")}</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="space-y-2">
                      <Label>{t("transportorder.transporttype")}</Label>
                      <Input
                        value={order.transportType}
                        onChange={(e) => setOrder({ ...order, transportType: e.target.value })}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label>{t("transportorder.fromlocation")}</Label>
                      <Input
                        value={order.fromLocation}
                        onChange={(e) => setOrder({ ...order, fromLocation: e.target.value })}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label>{t("transportorder.tolocation")}</Label>
                      <Input
                        value={order.toLocation}
                        onChange={(e) => setOrder({ ...order, toLocation: e.target.value })}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label>{t("transportorder.distance")}</Label>
                      <Input
                        type="number"
                        value={order.distance}
                        onChange={(e) => setOrder({ ...order, 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>{t("transportorder.price")}</Label>
                      <Input
                        type="number"
                        value={order.price}
                        onChange={(e) => setOrder({ ...order, price: Number(e.target.value) })}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label>{t("transportorder.currency")}</Label>
                      <Input
                        value={order.currency}
                        onChange={(e) => setOrder({ ...order, 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>{t("transportorder.goods")}</Label>
                      <Input
                        value={order.goods}
                        onChange={(e) => setOrder({ ...order, goods: e.target.value })}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label>{t("transportorder.quantity")}</Label>
                      <Input
                        type="number"
                        value={order.quantity}
                        onChange={(e) => setOrder({ ...order, quantity: Number(e.target.value) })}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label>{t("transportorder.unit")}</Label>
                      <Input
                        value={order.unit}
                        onChange={(e) => setOrder({ ...order, unit: e.target.value })}
                      />
                    </div>
                  </CardContent>
                </Card>

                <Card>
                  <CardHeader>
                    <CardTitle>{t("transportorder.dates")}</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="space-y-2">
                      <Label>{t("transportorder.createddate")}</Label>
                      <p>{new Date(order.createdDate).toLocaleDateString()}</p>
                    </div>
                    <div className="space-y-2">
                      <Label>{t("transportorder.validuntil")}</Label>
                      <Input
                        type="date"
                        value={order.validUntil.split('T')[0]}
                        onChange={(e) => setOrder({ ...order, validUntil: e.target.value })}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label>{t("transportorder.signedby")}</Label>
                      <Input
                        value={order.signedBy}
                        onChange={(e) => setOrder({ ...order, signedBy: e.target.value })}
                      />
                    </div>
                  </CardContent>
                </Card>
              </div>
            </div>
          </div>
        </div>
      </SidebarInset>
    </SidebarProvider>
  )
}