"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { useToast } from "@/components/ui/use-toast"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { FileUploader } from "@/components/file-uploader"
import { Checkbox } from "@/components/ui/checkbox"
import { ArrowLeft, Save, Send, Upload, AlertCircle } from "lucide-react"
import Link from "next/link"
import { useLanguage } from "@/lib/language-context"

export default function NewClearanceRequestPage() {
  const router = useRouter()
  const { toast } = useToast()
  const [activeTab, setActiveTab] = useState("consignee")
  const [isSubmitting, setIsSubmitting] = useState(false)
  const { t, dir } = useLanguage()
  const [errors, setErrors] = useState<Record<string, string>>({})
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
  }, [])

  // Form state
  const [formData, setFormData] = useState({
    // Consignee Details
    consigneeName: "",
    consigneeAddress: "",
    consigneeState: "",
    consigneeCountry: "",
    consigneeZip: "",
    consigneePhone: "",
    consigneeEmail: "",

    // Consignor Details
    consignorName: "",
    consignorAddress: "",
    consignorState: "",
    consignorCountry: "",
    consignorZip: "",
    consignorPhone: "",
    consignorEmail: "",

    // Cargo Description
    commodityName: "",
    quantity: "",
    packagingType: "",
    packageName: "",
    packageQuantity: "",
    cargoDescription: "",
    cargoValue: "",
    cargoWeight: "",
    cargoHSCode: "",

    // Container Information
    containerSize: "",
    shippingLine: "",
    containerNumbers: "",
    billOfLading: "",
    containerType: "",
    containerCount: "",
    sealNumbers: "",

    // Transportation Information
    portOfLoading: "",
    portOfDischarge: "",
    eta: "",
    etd: "",
    bookingReference: "",
    vesselName: "",
    voyageNumber: "",
    carrierName: "",

    // Certifications
    organicCertificate: false,
    insuranceCover: false,
    policyNumber: "",
    insuranceIssuer: "",
    inspectionCertificates: false,
    veterinaryCertification: false,
    phytosanitaryCertificate: false,
    dangerousGoods: false,
    dgClass: "",

    // Customs Information
    customsDeclarationNumber: "",
    importLicenseNumber: "",
    exportLicenseNumber: "",
    customsAgentName: "",
    customsAgentCode: "",
    customsOffice: "",

    // Additional Information
    specialInstructions: "",
    priorityService: false,
    termsOfDelivery: "",
  })

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))

    // Clear error for this field if it exists
    if (errors[name]) {
      setErrors((prev) => {
        const newErrors = { ...prev }
        delete newErrors[name]
        return newErrors
      })
    }
  }

  const handleSelectChange = (name: string, value: string) => {
    setFormData((prev) => ({ ...prev, [name]: value }))

    // Clear error for this field if it exists
    if (errors[name]) {
      setErrors((prev) => {
        const newErrors = { ...prev }
        delete newErrors[name]
        return newErrors
      })
    }
  }

  const handleCheckboxChange = (name: string, checked: boolean) => {
    setFormData((prev) => ({ ...prev, [name]: checked }))
  }

  const validateForm = (): boolean => {
    const newErrors: Record<string, string> = {}

    // Validate current tab fields
    if (activeTab === "consignee") {
      if (!formData.consigneeName) newErrors.consigneeName = "Consignee name is required"
      if (!formData.consigneeAddress) newErrors.consigneeAddress = "Address is required"
      if (!formData.consigneeEmail) newErrors.consigneeEmail = "Email is required"
      else if (!/\S+@\S+\.\S+/.test(formData.consigneeEmail)) newErrors.consigneeEmail = "Email is invalid"
    } else if (activeTab === "consignor") {
      if (!formData.consignorName) newErrors.consignorName = "Consignor name is required"
      if (!formData.consignorAddress) newErrors.consignorAddress = "Address is required"
      if (!formData.consignorEmail) newErrors.consignorEmail = "Email is required"
      else if (!/\S+@\S+\.\S+/.test(formData.consignorEmail)) newErrors.consignorEmail = "Email is invalid"
    } else if (activeTab === "cargo") {
      if (!formData.commodityName) newErrors.commodityName = "Commodity name is required"
      if (!formData.quantity) newErrors.quantity = "Quantity is required"
      if (!formData.packagingType) newErrors.packagingType = "Packaging type is required"
    } else if (activeTab === "container") {
      if (!formData.containerSize) newErrors.containerSize = "Container size is required"
      if (!formData.containerNumbers) newErrors.containerNumbers = "Container number(s) is required"
      if (!formData.billOfLading) newErrors.billOfLading = "Bill of lading is required"
    } else if (activeTab === "transport") {
      if (!formData.portOfLoading) newErrors.portOfLoading = "Port of loading is required"
      if (!formData.portOfDischarge) newErrors.portOfDischarge = "Port of discharge is required"
      if (!formData.eta) newErrors.eta = "ETA is required"
    }

    setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

    // Validate all fields before final submission
    const allErrors: Record<string, string> = {}

    if (!formData.consigneeName) allErrors.consigneeName = "Consignee name is required"
    if (!formData.consigneeAddress) allErrors.consigneeAddress = "Address is required"
    if (!formData.consigneeEmail) allErrors.consigneeEmail = "Email is required"
    else if (!/\S+@\S+\.\S+/.test(formData.consigneeEmail)) allErrors.consigneeEmail = "Email is invalid"

    if (!formData.consignorName) allErrors.consignorName = "Consignor name is required"
    if (!formData.consignorAddress) allErrors.consignorAddress = "Address is required"
    if (!formData.consignorEmail) allErrors.consignorEmail = "Email is required"
    else if (!/\S+@\S+\.\S+/.test(formData.consignorEmail)) allErrors.consignorEmail = "Email is invalid"

    if (!formData.commodityName) allErrors.commodityName = "Commodity name is required"
    if (!formData.quantity) allErrors.quantity = "Quantity is required"
    if (!formData.packagingType) allErrors.packagingType = "Packaging type is required"

    if (!formData.containerSize) allErrors.containerSize = "Container size is required"
    if (!formData.containerNumbers) allErrors.containerNumbers = "Container number(s) is required"
    if (!formData.billOfLading) allErrors.billOfLading = "Bill of lading is required"

    if (!formData.portOfLoading) allErrors.portOfLoading = "Port of loading is required"
    if (!formData.portOfDischarge) allErrors.portOfDischarge = "Port of discharge is required"
    if (!formData.eta) allErrors.eta = "ETA is required"

    if (Object.keys(allErrors).length > 0) {
      setErrors(allErrors)

      // Find the first tab with errors and switch to it
      if (allErrors.consigneeName || allErrors.consigneeAddress || allErrors.consigneeEmail) {
        setActiveTab("consignee")
      } else if (allErrors.consignorName || allErrors.consignorAddress || allErrors.consignorEmail) {
        setActiveTab("consignor")
      } else if (allErrors.commodityName || allErrors.quantity || allErrors.packagingType) {
        setActiveTab("cargo")
      } else if (allErrors.containerSize || allErrors.containerNumbers || allErrors.billOfLading) {
        setActiveTab("container")
      } else if (allErrors.portOfLoading || allErrors.portOfDischarge || allErrors.eta) {
        setActiveTab("transport")
      }

      toast({
        title: "Validation Error",
        description: "Please fill in all required fields.",
        variant: "destructive",
      })

      return
    }

    setIsSubmitting(true)

    try {
      // This would be an API call in a real app
      await new Promise((resolve) => setTimeout(resolve, 1500))

      toast({
        title: "Clearance request submitted",
        description: "Your clearance request has been submitted successfully.",
      })

      router.push("/dashboard/clearance")
    } catch (error) {
      toast({
        title: "Failed to submit request",
        description: "There was an error submitting your clearance request. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

  const nextTab = () => {
    if (validateForm()) {
      if (activeTab === "consignee") setActiveTab("consignor")
      else if (activeTab === "consignor") setActiveTab("cargo")
      else if (activeTab === "cargo") setActiveTab("container")
      else if (activeTab === "container") setActiveTab("transport")
      else if (activeTab === "transport") setActiveTab("documents")
    }
  }

  const prevTab = () => {
    if (activeTab === "consignor") setActiveTab("consignee")
    else if (activeTab === "cargo") setActiveTab("consignor")
    else if (activeTab === "container") setActiveTab("cargo")
    else if (activeTab === "transport") setActiveTab("container")
    else if (activeTab === "documents") setActiveTab("transport")
  }

  return (
    <div className="space-y-6" dir={mounted ? dir : "ltr"}>
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Link href="/dashboard/clearance">
            <Button variant="outline" size="icon">
              <ArrowLeft className="h-4 w-4" />
            </Button>
          </Link>
          <h2 className="text-2xl font-bold tracking-tight">New Clearance Request</h2>
        </div>
        <Button onClick={handleSubmit} disabled={isSubmitting}>
          {isSubmitting ? (
            <>Submitting...</>
          ) : (
            <>
              <Send className="mr-2 h-4 w-4" />
              Submit Request
            </>
          )}
        </Button>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>Clearance Request Form</CardTitle>
          <CardDescription>Fill out the details for your port clearance request</CardDescription>
        </CardHeader>
        <CardContent>
          <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
            <TabsList className="grid w-full grid-cols-3 md:grid-cols-6">
              <TabsTrigger value="consignee">Consignee</TabsTrigger>
              <TabsTrigger value="consignor">Consignor</TabsTrigger>
              <TabsTrigger value="cargo">Cargo</TabsTrigger>
              <TabsTrigger value="container">Container</TabsTrigger>
              <TabsTrigger value="transport">Transport</TabsTrigger>
              <TabsTrigger value="documents">Documents</TabsTrigger>
            </TabsList>

            <TabsContent value="consignee" className="space-y-4 pt-4">
              <div className="grid gap-4 md:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="consigneeName">
                    Consignee Name <span className="text-red-500">*</span>
                  </Label>
                  <Input
                    id="consigneeName"
                    name="consigneeName"
                    value={formData.consigneeName}
                    onChange={handleChange}
                    placeholder="Full name of receiver"
                    className={errors.consigneeName ? "border-red-500" : ""}
                  />
                  {errors.consigneeName && (
                    <p className="text-sm text-red-500 flex items-center gap-1">
                      <AlertCircle className="h-3 w-3" /> {errors.consigneeName}
                    </p>
                  )}
                </div>
                <div className="space-y-2">
                  <Label htmlFor="consigneeEmail">
                    Email <span className="text-red-500">*</span>
                  </Label>
                  <Input
                    id="consigneeEmail"
                    name="consigneeEmail"
                    type="email"
                    value={formData.consigneeEmail}
                    onChange={handleChange}
                    placeholder="Email address"
                    className={errors.consigneeEmail ? "border-red-500" : ""}
                  />
                  {errors.consigneeEmail && (
                    <p className="text-sm text-red-500 flex items-center gap-1">
                      <AlertCircle className="h-3 w-3" /> {errors.consigneeEmail}
                    </p>
                  )}
                </div>
              </div>

              <div className="space-y-2">
                <Label htmlFor="consigneeAddress">
                  Address <span className="text-red-500">*</span>
                </Label>
                <Textarea
                  id="consigneeAddress"
                  name="consigneeAddress"
                  value={formData.consigneeAddress}
                  onChange={handleChange}
                  placeholder="Full address"
                  rows={3}
                  className={errors.consigneeAddress ? "border-red-500" : ""}
                />
                {errors.consigneeAddress && (
                  <p className="text-sm text-red-500 flex items-center gap-1">
                    <AlertCircle className="h-3 w-3" /> {errors.consigneeAddress}
                  </p>
                )}
              </div>

              <div className="grid gap-4 md:grid-cols-3">
                <div className="space-y-2">
                  <Label htmlFor="consigneeState">State/Province</Label>
                  <Input
                    id="consigneeState"
                    name="consigneeState"
                    value={formData.consigneeState}
                    onChange={handleChange}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="consigneeCountry">Country</Label>
                  <Input
                    id="consigneeCountry"
                    name="consigneeCountry"
                    value={formData.consigneeCountry}
                    onChange={handleChange}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="consigneeZip">ZIP/Postal Code</Label>
                  <Input id="consigneeZip" name="consigneeZip" value={formData.consigneeZip} onChange={handleChange} />
                </div>
              </div>

              <div className="space-y-2">
                <Label htmlFor="consigneePhone">Phone Number</Label>
                <Input
                  id="consigneePhone"
                  name="consigneePhone"
                  value={formData.consigneePhone}
                  onChange={handleChange}
                  placeholder="Phone number with country code"
                />
              </div>

              <div className="flex justify-end">
                <Button onClick={nextTab}>Next</Button>
              </div>
            </TabsContent>

            <TabsContent value="consignor" className="space-y-4 pt-4">
              <div className="grid gap-4 md:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="consignorName">
                    Consignor Name <span className="text-red-500">*</span>
                  </Label>
                  <Input
                    id="consignorName"
                    name="consignorName"
                    value={formData.consignorName}
                    onChange={handleChange}
                    placeholder="Full name of sender"
                    className={errors.consignorName ? "border-red-500" : ""}
                  />
                  {errors.consignorName && (
                    <p className="text-sm text-red-500 flex items-center gap-1">
                      <AlertCircle className="h-3 w-3" /> {errors.consignorName}
                    </p>
                  )}
                </div>
                <div className="space-y-2">
                  <Label htmlFor="consignorEmail">
                    Email <span className="text-red-500">*</span>
                  </Label>
                  <Input
                    id="consignorEmail"
                    name="consignorEmail"
                    type="email"
                    value={formData.consignorEmail}
                    onChange={handleChange}
                    placeholder="Email address"
                    className={errors.consignorEmail ? "border-red-500" : ""}
                  />
                  {errors.consignorEmail && (
                    <p className="text-sm text-red-500 flex items-center gap-1">
                      <AlertCircle className="h-3 w-3" /> {errors.consignorEmail}
                    </p>
                  )}
                </div>
              </div>

              <div className="space-y-2">
                <Label htmlFor="consignorAddress">
                  Address <span className="text-red-500">*</span>
                </Label>
                <Textarea
                  id="consignorAddress"
                  name="consignorAddress"
                  value={formData.consignorAddress}
                  onChange={handleChange}
                  placeholder="Full address"
                  rows={3}
                  className={errors.consignorAddress ? "border-red-500" : ""}
                />
                {errors.consignorAddress && (
                  <p className="text-sm text-red-500 flex items-center gap-1">
                    <AlertCircle className="h-3 w-3" /> {errors.consignorAddress}
                  </p>
                )}
              </div>

              <div className="grid gap-4 md:grid-cols-3">
                <div className="space-y-2">
                  <Label htmlFor="consignorState">State/Province</Label>
                  <Input
                    id="consignorState"
                    name="consignorState"
                    value={formData.consignorState}
                    onChange={handleChange}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="consignorCountry">Country</Label>
                  <Input
                    id="consignorCountry"
                    name="consignorCountry"
                    value={formData.consignorCountry}
                    onChange={handleChange}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="consignorZip">ZIP/Postal Code</Label>
                  <Input id="consignorZip" name="consignorZip" value={formData.consignorZip} onChange={handleChange} />
                </div>
              </div>

              <div className="space-y-2">
                <Label htmlFor="consignorPhone">Phone Number</Label>
                <Input
                  id="consignorPhone"
                  name="consignorPhone"
                  value={formData.consignorPhone}
                  onChange={handleChange}
                  placeholder="Phone number with country code"
                />
              </div>

              <div className="flex justify-between">
                <Button variant="outline" onClick={prevTab}>
                  Previous
                </Button>
                <Button onClick={nextTab}>Next</Button>
              </div>
            </TabsContent>

            <TabsContent value="cargo" className="space-y-4 pt-4">
              <div className="grid gap-4 md:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="commodityName">
                    Commodity Name <span className="text-red-500">*</span>
                  </Label>
                  <Input
                    id="commodityName"
                    name="commodityName"
                    value={formData.commodityName}
                    onChange={handleChange}
                    placeholder="e.g., Maize, Cocoa, Wheat"
                    className={errors.commodityName ? "border-red-500" : ""}
                  />
                  {errors.commodityName && (
                    <p className="text-sm text-red-500 flex items-center gap-1">
                      <AlertCircle className="h-3 w-3" /> {errors.commodityName}
                    </p>
                  )}
                </div>
                <div className="space-y-2">
                  <Label htmlFor="quantity">
                    Quantity (kg) <span className="text-red-500">*</span>
                  </Label>
                  <Input
                    id="quantity"
                    name="quantity"
                    type="number"
                    value={formData.quantity}
                    onChange={handleChange}
                    placeholder="Weight in kilograms"
                    className={errors.quantity ? "border-red-500" : ""}
                  />
                  {errors.quantity && (
                    <p className="text-sm text-red-500 flex items-center gap-1">
                      <AlertCircle className="h-3 w-3" /> {errors.quantity}
                    </p>
                  )}
                </div>
              </div>

              <div className="space-y-2">
                <Label htmlFor="cargoDescription">Cargo Description</Label>
                <Textarea
                  id="cargoDescription"
                  name="cargoDescription"
                  value={formData.cargoDescription}
                  onChange={handleChange}
                  placeholder="Detailed description of the cargo"
                  rows={3}
                />
              </div>

              <div className="grid gap-4 md:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="cargoHSCode">HS Code</Label>
                  <Input
                    id="cargoHSCode"
                    name="cargoHSCode"
                    value={formData.cargoHSCode}
                    onChange={handleChange}
                    placeholder="Harmonized System Code"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="cargoValue">Cargo Value</Label>
                  <Input
                    id="cargoValue"
                    name="cargoValue"
                    value={formData.cargoValue}
                    onChange={handleChange}
                    placeholder="Value in SAR"
                  />
                </div>
              </div>

              <div className="grid gap-4 md:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="packagingType">
                    Packaging Type <span className="text-red-500">*</span>
                  </Label>
                  <Select
                    value={formData.packagingType}
                    onValueChange={(value) => handleSelectChange("packagingType", value)}
                  >
                    <SelectTrigger id="packagingType" className={errors.packagingType ? "border-red-500" : ""}>
                      <SelectValue placeholder="Select packaging type" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="cartons">Cartons</SelectItem>
                      <SelectItem value="bags">Bags</SelectItem>
                      <SelectItem value="pallets">Pallets</SelectItem>
                      <SelectItem value="drums">Drums</SelectItem>
                      <SelectItem value="crates">Crates</SelectItem>
                      <SelectItem value="bulk">Bulk</SelectItem>
                      <SelectItem value="others">Others</SelectItem>
                    </SelectContent>
                  </Select>
                  {errors.packagingType && (
                    <p className="text-sm text-red-500 flex items-center gap-1">
                      <AlertCircle className="h-3 w-3" /> {errors.packagingType}
                    </p>
                  )}
                </div>
                <div className="space-y-2">
                  <Label htmlFor="packageName">Package Name/Label</Label>
                  <Input
                    id="packageName"
                    name="packageName"
                    value={formData.packageName}
                    onChange={handleChange}
                    placeholder="Package name or label"
                  />
                </div>
              </div>

              <div className="space-y-2">
                <Label htmlFor="packageQuantity">Quantity of Packages</Label>
                <Input
                  id="packageQuantity"
                  name="packageQuantity"
                  type="number"
                  value={formData.packageQuantity}
                  onChange={handleChange}
                  placeholder="Number of packages"
                />
              </div>

              <div className="space-y-2">
                <Label>Dangerous Goods</Label>
                <div className="flex items-center space-x-2">
                  <Checkbox
                    id="dangerousGoods"
                    checked={formData.dangerousGoods}
                    onCheckedChange={(checked) => handleCheckboxChange("dangerousGoods", checked as boolean)}
                  />
                  <label
                    htmlFor="dangerousGoods"
                    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                  >
                    This shipment contains dangerous goods
                  </label>
                </div>
              </div>

              {formData.dangerousGoods && (
                <div className="space-y-2">
                  <Label htmlFor="dgClass">Dangerous Goods Class</Label>
                  <Select value={formData.dgClass} onValueChange={(value) => handleSelectChange("dgClass", value)}>
                    <SelectTrigger id="dgClass">
                      <SelectValue placeholder="Select DG class" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="class1">Class 1 - Explosives</SelectItem>
                      <SelectItem value="class2">Class 2 - Gases</SelectItem>
                      <SelectItem value="class3">Class 3 - Flammable Liquids</SelectItem>
                      <SelectItem value="class4">Class 4 - Flammable Solids</SelectItem>
                      <SelectItem value="class5">Class 5 - Oxidizing Substances</SelectItem>
                      <SelectItem value="class6">Class 6 - Toxic Substances</SelectItem>
                      <SelectItem value="class7">Class 7 - Radioactive Material</SelectItem>
                      <SelectItem value="class8">Class 8 - Corrosives</SelectItem>
                      <SelectItem value="class9">Class 9 - Miscellaneous</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              )}

              <div className="space-y-2">
                <Label>Pictures of Packaged Goods</Label>
                <FileUploader />
              </div>

              <div className="flex justify-between">
                <Button variant="outline" onClick={prevTab}>
                  Previous
                </Button>
                <Button onClick={nextTab}>Next</Button>
              </div>
            </TabsContent>

            <TabsContent value="container" className="space-y-4 pt-4">
              <div className="grid gap-4 md:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="containerSize">
                    Container Size <span className="text-red-500">*</span>
                  </Label>
                  <Select
                    value={formData.containerSize}
                    onValueChange={(value) => handleSelectChange("containerSize", value)}
                  >
                    <SelectTrigger id="containerSize" className={errors.containerSize ? "border-red-500" : ""}>
                      <SelectValue placeholder="Select container size" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="20ft">20 Feet</SelectItem>
                      <SelectItem value="40ft">40 Feet</SelectItem>
                      <SelectItem value="40hc">40 Feet High Cube</SelectItem>
                      <SelectItem value="45ft">45 Feet</SelectItem>
                      <SelectItem value="reefer20">20 Feet Reefer</SelectItem>
                      <SelectItem value="reefer40">40 Feet Reefer</SelectItem>
                      <SelectItem value="tank">Tank Container</SelectItem>
                      <SelectItem value="bulk">Bulk Container</SelectItem>
                      <SelectItem value="other">Other</SelectItem>
                    </SelectContent>
                  </Select>
                  {errors.containerSize && (
                    <p className="text-sm text-red-500 flex items-center gap-1">
                      <AlertCircle className="h-3 w-3" /> {errors.containerSize}
                    </p>
                  )}
                </div>
                <div className="space-y-2">
                  <Label htmlFor="shippingLine">Shipping Line</Label>
                  <Input
                    id="shippingLine"
                    name="shippingLine"
                    value={formData.shippingLine}
                    onChange={handleChange}
                    placeholder="Name of shipping line"
                  />
                </div>
              </div>

              <div className="space-y-2">
                <Label htmlFor="containerNumbers">
                  Container Number(s) <span className="text-red-500">*</span>
                </Label>
                <Textarea
                  id="containerNumbers"
                  name="containerNumbers"
                  value={formData.containerNumbers}
                  onChange={handleChange}
                  placeholder="Enter multiple container numbers, one per line"
                  rows={3}
                  className={errors.containerNumbers ? "border-red-500" : ""}
                />
                {errors.containerNumbers && (
                  <p className="text-sm text-red-500 flex items-center gap-1">
                    <AlertCircle className="h-3 w-3" /> {errors.containerNumbers}
                  </p>
                )}
              </div>

              <div className="grid gap-4 md:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="containerType">Container Type</Label>
                  <Select
                    value={formData.containerType}
                    onValueChange={(value) => handleSelectChange("containerType", value)}
                  >
                    <SelectTrigger id="containerType">
                      <SelectValue placeholder="Select container type" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="dry">Dry Container</SelectItem>
                      <SelectItem value="reefer">Reefer (Refrigerated)</SelectItem>
                      <SelectItem value="open-top">Open Top</SelectItem>
                      <SelectItem value="flat-rack">Flat Rack</SelectItem>
                      <SelectItem value="tank">Tank</SelectItem>
                      <SelectItem value="other">Other</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="containerCount">Number of Containers</Label>
                  <Input
                    id="containerCount"
                    name="containerCount"
                    type="number"
                    value={formData.containerCount}
                    onChange={handleChange}
                    placeholder="Total number of containers"
                  />
                </div>
              </div>

              <div className="space-y-2">
                <Label htmlFor="billOfLading">
                  Bill of Lading (BL) Number <span className="text-red-500">*</span>
                </Label>
                <Input
                  id="billOfLading"
                  name="billOfLading"
                  value={formData.billOfLading}
                  onChange={handleChange}
                  placeholder="BL number"
                  className={errors.billOfLading ? "border-red-500" : ""}
                />
                {errors.billOfLading && (
                  <p className="text-sm text-red-500 flex items-center gap-1">
                    <AlertCircle className="h-3 w-3" /> {errors.billOfLading}
                  </p>
                )}
              </div>

              <div className="space-y-2">
                <Label htmlFor="sealNumbers">Seal Number(s)</Label>
                <Textarea
                  id="sealNumbers"
                  name="sealNumbers"
                  value={formData.sealNumbers}
                  onChange={handleChange}
                  placeholder="Enter seal numbers, one per line"
                  rows={2}
                />
              </div>

              <div className="space-y-2">
                <Label>Upload Bill of Lading</Label>
                <FileUploader />
              </div>

              <div className="flex justify-between">
                <Button variant="outline" onClick={prevTab}>
                  Previous
                </Button>
                <Button onClick={nextTab}>Next</Button>
              </div>
            </TabsContent>

            <TabsContent value="transport" className="space-y-4 pt-4">
              <div className="grid gap-4 md:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="portOfLoading">
                    Port of Loading <span className="text-red-500">*</span>
                  </Label>
                  <Input
                    id="portOfLoading"
                    name="portOfLoading"
                    value={formData.portOfLoading}
                    onChange={handleChange}
                    placeholder="Origin port"
                    className={errors.portOfLoading ? "border-red-500" : ""}
                  />
                  {errors.portOfLoading && (
                    <p className="text-sm text-red-500 flex items-center gap-1">
                      <AlertCircle className="h-3 w-3" /> {errors.portOfLoading}
                    </p>
                  )}
                </div>
                <div className="space-y-2">
                  <Label htmlFor="portOfDischarge">
                    Port of Discharge <span className="text-red-500">*</span>
                  </Label>
                  <Input
                    id="portOfDischarge"
                    name="portOfDischarge"
                    value={formData.portOfDischarge}
                    onChange={handleChange}
                    placeholder="Destination port"
                    className={errors.portOfDischarge ? "border-red-500" : ""}
                  />
                  {errors.portOfDischarge && (
                    <p className="text-sm text-red-500 flex items-center gap-1">
                      <AlertCircle className="h-3 w-3" /> {errors.portOfDischarge}
                    </p>
                  )}
                </div>
              </div>

              <div className="grid gap-4 md:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="eta">
                    Estimated Time of Arrival (ETA) <span className="text-red-500">*</span>
                  </Label>
                  <Input
                    id="eta"
                    name="eta"
                    type="date"
                    value={formData.eta}
                    onChange={handleChange}
                    className={errors.eta ? "border-red-500" : ""}
                  />
                  {errors.eta && (
                    <p className="text-sm text-red-500 flex items-center gap-1">
                      <AlertCircle className="h-3 w-3" /> {errors.eta}
                    </p>
                  )}
                </div>
                <div className="space-y-2">
                  <Label htmlFor="etd">Estimated Time of Departure (ETD)</Label>
                  <Input id="etd" name="etd" type="date" value={formData.etd} onChange={handleChange} />
                </div>
              </div>

              <div className="grid gap-4 md:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="vesselName">Vessel Name</Label>
                  <Input
                    id="vesselName"
                    name="vesselName"
                    value={formData.vesselName}
                    onChange={handleChange}
                    placeholder="Name of the vessel"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="voyageNumber">Voyage Number</Label>
                  <Input
                    id="voyageNumber"
                    name="voyageNumber"
                    value={formData.voyageNumber}
                    onChange={handleChange}
                    placeholder="Voyage reference number"
                  />
                </div>
              </div>

              <div className="grid gap-4 md:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="carrierName">Carrier Name</Label>
                  <Input
                    id="carrierName"
                    name="carrierName"
                    value={formData.carrierName}
                    onChange={handleChange}
                    placeholder="Name of the carrier"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="bookingReference">Booking Reference Number</Label>
                  <Input
                    id="bookingReference"
                    name="bookingReference"
                    value={formData.bookingReference}
                    onChange={handleChange}
                    placeholder="Booking reference"
                  />
                </div>
              </div>

              <div className="space-y-2">
                <Label htmlFor="termsOfDelivery">Terms of Delivery (Incoterms)</Label>
                <Select
                  value={formData.termsOfDelivery}
                  onValueChange={(value) => handleSelectChange("termsOfDelivery", value)}
                >
                  <SelectTrigger id="termsOfDelivery">
                    <SelectValue placeholder="Select incoterms" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="exw">EXW (Ex Works)</SelectItem>
                    <SelectItem value="fca">FCA (Free Carrier)</SelectItem>
                    <SelectItem value="fas">FAS (Free Alongside Ship)</SelectItem>
                    <SelectItem value="fob">FOB (Free On Board)</SelectItem>
                    <SelectItem value="cfr">CFR (Cost and Freight)</SelectItem>
                    <SelectItem value="cif">CIF (Cost, Insurance and Freight)</SelectItem>
                    <SelectItem value="cpt">CPT (Carriage Paid To)</SelectItem>
                    <SelectItem value="cip">CIP (Carriage and Insurance Paid To)</SelectItem>
                    <SelectItem value="dap">DAP (Delivered At Place)</SelectItem>
                    <SelectItem value="dpu">DPU (Delivered at Place Unloaded)</SelectItem>
                    <SelectItem value="ddp">DDP (Delivered Duty Paid)</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div className="flex justify-between">
                <Button variant="outline" onClick={prevTab}>
                  Previous
                </Button>
                <Button onClick={nextTab}>Next</Button>
              </div>
            </TabsContent>

            <TabsContent value="documents" className="space-y-4 pt-4">
              <div className="space-y-4">
                <div className="space-y-2">
                  <Label>Required Certifications</Label>
                  <div className="grid gap-4 md:grid-cols-2">
                    <Card className="p-4">
                      <div className="flex items-center justify-between">
                        <div className="flex items-center space-x-2">
                          <Checkbox
                            id="organicCertificate"
                            checked={formData.organicCertificate}
                            onCheckedChange={(checked) =>
                              handleCheckboxChange("organicCertificate", checked as boolean)
                            }
                          />
                          <div>
                            <Label htmlFor="organicCertificate" className="font-medium">
                              Organic Certificate
                            </Label>
                            <p className="text-sm text-muted-foreground">If applicable for your goods</p>
                          </div>
                        </div>
                        <Button variant="outline" size="sm">
                          <Upload className="mr-2 h-4 w-4" />
                          Upload
                        </Button>
                      </div>
                    </Card>

                    <Card className="p-4">
                      <div className="flex items-center justify-between">
                        <div className="flex items-center space-x-2">
                          <Checkbox
                            id="insuranceCover"
                            checked={formData.insuranceCover}
                            onCheckedChange={(checked) => handleCheckboxChange("insuranceCover", checked as boolean)}
                          />
                          <div>
                            <Label htmlFor="insuranceCover" className="font-medium">
                              Insurance Cover
                            </Label>
                            <p className="text-sm text-muted-foreground">Cargo insurance details</p>
                          </div>
                        </div>
                        <Button variant="outline" size="sm">
                          <Upload className="mr-2 h-4 w-4" />
                          Upload
                        </Button>
                      </div>
                    </Card>
                  </div>
                </div>

                {formData.insuranceCover && (
                  <div className="grid gap-4 md:grid-cols-2">
                    <div className="space-y-2">
                      <Label htmlFor="policyNumber">Insurance Policy Number</Label>
                      <Input
                        id="policyNumber"
                        name="policyNumber"
                        value={formData.policyNumber}
                        onChange={handleChange}
                        placeholder="If insured"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="insuranceIssuer">Insurance Issuer</Label>
                      <Input
                        id="insuranceIssuer"
                        name="insuranceIssuer"
                        value={formData.insuranceIssuer}
                        onChange={handleChange}
                        placeholder="Insurance company name"
                      />
                    </div>
                  </div>
                )}

                <div className="grid gap-4 md:grid-cols-2">
                  <Card className="p-4">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center space-x-2">
                        <Checkbox
                          id="inspectionCertificates"
                          checked={formData.inspectionCertificates}
                          onCheckedChange={(checked) =>
                            handleCheckboxChange("inspectionCertificates", checked as boolean)
                          }
                        />
                        <div>
                          <Label htmlFor="inspectionCertificates" className="font-medium">
                            Inspection Certificates
                          </Label>
                          <p className="text-sm text-muted-foreground">Quality inspection documents</p>
                        </div>
                      </div>
                      <Button variant="outline" size="sm">
                        <Upload className="mr-2 h-4 w-4" />
                        Upload
                      </Button>
                    </div>
                  </Card>

                  <Card className="p-4">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center space-x-2">
                        <Checkbox
                          id="veterinaryCertification"
                          checked={formData.veterinaryCertification}
                          onCheckedChange={(checked) =>
                            handleCheckboxChange("veterinaryCertification", checked as boolean)
                          }
                        />
                        <div>
                          <Label htmlFor="veterinaryCertification" className="font-medium">
                            Veterinary Certification
                          </Label>
                          <p className="text-sm text-muted-foreground">For animal products</p>
                        </div>
                      </div>
                      <Button variant="outline" size="sm">
                        <Upload className="mr-2 h-4 w-4" />
                        Upload
                      </Button>
                    </div>
                  </Card>
                </div>

                <div className="grid gap-4 md:grid-cols-2">
                  <Card className="p-4">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center space-x-2">
                        <Checkbox
                          id="phytosanitaryCertificate"
                          checked={formData.phytosanitaryCertificate}
                          onCheckedChange={(checked) =>
                            handleCheckboxChange("phytosanitaryCertificate", checked as boolean)
                          }
                        />
                        <div>
                          <Label htmlFor="phytosanitaryCertificate" className="font-medium">
                            Phytosanitary Certificate
                          </Label>
                          <p className="text-sm text-muted-foreground">For plant products</p>
                        </div>
                      </div>
                      <Button variant="outline" size="sm">
                        <Upload className="mr-2 h-4 w-4" />
                        Upload
                      </Button>
                    </div>
                  </Card>
                </div>

                <div className="space-y-2">
                  <Label>Customs Information</Label>
                  <div className="grid gap-4 md:grid-cols-2">
                    <div className="space-y-2">
                      <Label htmlFor="customsDeclarationNumber">Customs Declaration Number</Label>
                      <Input
                        id="customsDeclarationNumber"
                        name="customsDeclarationNumber"
                        value={formData.customsDeclarationNumber}
                        onChange={handleChange}
                        placeholder="If available"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="customsAgentName">Customs Agent Name</Label>
                      <Input
                        id="customsAgentName"
                        name="customsAgentName"
                        value={formData.customsAgentName}
                        onChange={handleChange}
                        placeholder="If using a customs agent"
                      />
                    </div>
                  </div>
                </div>

                <div className="space-y-2">
                  <Label htmlFor="specialInstructions">Special Instructions</Label>
                  <Textarea
                    id="specialInstructions"
                    name="specialInstructions"
                    value={formData.specialInstructions}
                    onChange={handleChange}
                    placeholder="Any special handling instructions or additional information"
                    rows={3}
                  />
                </div>

                <div className="space-y-2">
                  <div className="flex items-center space-x-2">
                    <Checkbox
                      id="priorityService"
                      checked={formData.priorityService}
                      onCheckedChange={(checked) => handleCheckboxChange("priorityService", checked as boolean)}
                    />
                    <Label htmlFor="priorityService" className="font-medium">
                      Request Priority Service
                    </Label>
                  </div>
                  <p className="text-sm text-muted-foreground">
                    Priority service may incur additional fees but will expedite the clearance process
                  </p>
                </div>

                <div className="space-y-2">
                  <Label>Additional Documents</Label>
                  <FileUploader />
                </div>
              </div>

              <div className="flex justify-between">
                <Button variant="outline" onClick={prevTab}>
                  Previous
                </Button>
                <Button onClick={handleSubmit} disabled={isSubmitting}>
                  {isSubmitting ? (
                    <>Submitting...</>
                  ) : (
                    <>
                      <Save className="mr-2 h-4 w-4" />
                      Submit Request
                    </>
                  )}
                </Button>
              </div>
            </TabsContent>
          </Tabs>
        </CardContent>
        <CardFooter className="border-t px-6 py-4">
          <p className="text-sm text-muted-foreground">
            Please ensure all information is accurate before submitting your clearance request. Fields marked with{" "}
            <span className="text-red-500">*</span> are required.
          </p>
        </CardFooter>
      </Card>
    </div>
  )
}