"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
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 { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Checkbox } from "@/components/ui/checkbox"
import { Separator } from "@/components/ui/separator"
import { Plus, Trash2, Ship, Package, MapPin, Clock } from "lucide-react"
import { FileUploader } from "@/components/file-uploader"

interface TrackingEvent {
  id: string
  status: string
  location: string
  date: string
  time: string
  description: string
}

export default function NewShipmentPage() {
  const [activeTab, setActiveTab] = useState("basic")
  const [trackingEvents, setTrackingEvents] = useState<TrackingEvent[]>([
    {
      id: "1",
      status: "Booking Confirmed",
      location: "Origin Port",
      date: "",
      time: "",
      description: "",
    },
  ])
  const [containers, setContainers] = useState([
    {
      id: "1",
      number: "",
      type: "",
      size: "",
      sealNumber: "",
      weight: "",
      description: "",
    },
  ])

  const addTrackingEvent = () => {
    const newEvent: TrackingEvent = {
      id: Date.now().toString(),
      status: "",
      location: "",
      date: "",
      time: "",
      description: "",
    }
    setTrackingEvents([...trackingEvents, newEvent])
  }

  const removeTrackingEvent = (id: string) => {
    setTrackingEvents(trackingEvents.filter((event) => event.id !== id))
  }

  const updateTrackingEvent = (id: string, field: string, value: string) => {
    setTrackingEvents(trackingEvents.map((event) => (event.id === id ? { ...event, [field]: value } : event)))
  }

  const addContainer = () => {
    const newContainer = {
      id: Date.now().toString(),
      number: "",
      type: "",
      size: "",
      sealNumber: "",
      weight: "",
      description: "",
    }
    setContainers([...containers, newContainer])
  }

  const removeContainer = (id: string) => {
    setContainers(containers.filter((container) => container.id !== id))
  }

  const updateContainer = (id: string, field: string, value: string) => {
    setContainers(containers.map((container) => (container.id === id ? { ...container, [field]: value } : container)))
  }

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    // Handle form submission
    console.log("Shipment data submitted")
  }

  return (
    <div className="container mx-auto py-6">
      <div className="mb-6">
        <h1 className="text-3xl font-bold">Create New Shipment</h1>
        <p className="text-muted-foreground">Add a new shipment to the tracking system</p>
      </div>

      <form onSubmit={handleSubmit}>
        <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
          <TabsList className="grid w-full grid-cols-6">
            <TabsTrigger value="basic" className="flex items-center gap-2">
              <Package className="h-4 w-4" />
              Basic Info
            </TabsTrigger>
            <TabsTrigger value="vessel" className="flex items-center gap-2">
              <Ship className="h-4 w-4" />
              Vessel
            </TabsTrigger>
            <TabsTrigger value="containers" className="flex items-center gap-2">
              <Package className="h-4 w-4" />
              Containers
            </TabsTrigger>
            <TabsTrigger value="route" className="flex items-center gap-2">
              <MapPin className="h-4 w-4" />
              Route
            </TabsTrigger>
            <TabsTrigger value="tracking" className="flex items-center gap-2">
              <Clock className="h-4 w-4" />
              Tracking
            </TabsTrigger>
            <TabsTrigger value="documents">Documents</TabsTrigger>
          </TabsList>

          <TabsContent value="basic" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Basic Shipment Information</CardTitle>
                <CardDescription>Enter the fundamental details of the shipment</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="shipmentId">Shipment ID *</Label>
                    <Input id="shipmentId" placeholder="SHP-2024-001" required />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="bookingRef">Booking Reference *</Label>
                    <Input id="bookingRef" placeholder="BKG123456789" required />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="billOfLading">Bill of Lading</Label>
                    <Input id="billOfLading" placeholder="BL123456789" />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="shipmentType">Shipment Type *</Label>
                    <Select required>
                      <SelectTrigger>
                        <SelectValue placeholder="Select shipment type" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="import">Import</SelectItem>
                        <SelectItem value="export">Export</SelectItem>
                        <SelectItem value="transit">Transit</SelectItem>
                        <SelectItem value="transshipment">Transshipment</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>

                <Separator />

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="shipper">Shipper *</Label>
                    <Input id="shipper" placeholder="Shipper Company Name" required />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="consignee">Consignee *</Label>
                    <Input id="consignee" placeholder="Consignee Company Name" required />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="notifyParty">Notify Party</Label>
                    <Input id="notifyParty" placeholder="Notify Party Name" />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="forwarder">Freight Forwarder</Label>
                    <Input id="forwarder" placeholder="Forwarder Company Name" />
                  </div>
                </div>

                <div className="space-y-2">
                  <Label htmlFor="cargoDescription">Cargo Description *</Label>
                  <Textarea
                    id="cargoDescription"
                    placeholder="Detailed description of the cargo"
                    className="min-h-[100px]"
                    required
                  />
                </div>

                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="totalWeight">Total Weight (kg)</Label>
                    <Input id="totalWeight" type="number" placeholder="1000" />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="totalVolume">Total Volume (m³)</Label>
                    <Input id="totalVolume" type="number" placeholder="50" />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="totalValue">Total Value (USD)</Label>
                    <Input id="totalValue" type="number" placeholder="10000" />
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="vessel" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Vessel Information</CardTitle>
                <CardDescription>Details about the vessel carrying the shipment</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="vesselName">Vessel Name *</Label>
                    <Input id="vesselName" placeholder="MSC OSCAR" required />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="vesselIMO">IMO Number</Label>
                    <Input id="vesselIMO" placeholder="9395044" />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="voyageNumber">Voyage Number *</Label>
                    <Input id="voyageNumber" placeholder="001E" required />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="shippingLine">Shipping Line *</Label>
                    <Select required>
                      <SelectTrigger>
                        <SelectValue placeholder="Select shipping line" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="msc">MSC</SelectItem>
                        <SelectItem value="maersk">Maersk</SelectItem>
                        <SelectItem value="cosco">COSCO</SelectItem>
                        <SelectItem value="cma-cgm">CMA CGM</SelectItem>
                        <SelectItem value="hapag-lloyd">Hapag-Lloyd</SelectItem>
                        <SelectItem value="evergreen">Evergreen</SelectItem>
                        <SelectItem value="other">Other</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>

                <Separator />

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="etd">Estimated Time of Departure (ETD)</Label>
                    <Input id="etd" type="datetime-local" />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="eta">Estimated Time of Arrival (ETA)</Label>
                    <Input id="eta" type="datetime-local" />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="atd">Actual Time of Departure (ATD)</Label>
                    <Input id="atd" type="datetime-local" />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="ata">Actual Time of Arrival (ATA)</Label>
                    <Input id="ata" type="datetime-local" />
                  </div>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="vesselFlag">Vessel Flag</Label>
                    <Input id="vesselFlag" placeholder="Panama" />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="vesselCapacity">Vessel Capacity (TEU)</Label>
                    <Input id="vesselCapacity" type="number" placeholder="19224" />
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="containers" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center justify-between">
                  Container Information
                  <Button type="button" onClick={addContainer} size="sm">
                    <Plus className="h-4 w-4 mr-2" />
                    Add Container
                  </Button>
                </CardTitle>
                <CardDescription>Details about containers in this shipment</CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                {containers.map((container, index) => (
                  <div key={container.id} className="border rounded-lg p-4 space-y-4">
                    <div className="flex items-center justify-between">
                      <h4 className="font-medium">Container {index + 1}</h4>
                      {containers.length > 1 && (
                        <Button type="button" variant="outline" size="sm" onClick={() => removeContainer(container.id)}>
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      )}
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                      <div className="space-y-2">
                        <Label>Container Number *</Label>
                        <Input
                          placeholder="MSCU1234567"
                          value={container.number}
                          onChange={(e) => updateContainer(container.id, "number", e.target.value)}
                          required
                        />
                      </div>
                      <div className="space-y-2">
                        <Label>Container Type *</Label>
                        <Select
                          value={container.type}
                          onValueChange={(value) => updateContainer(container.id, "type", value)}
                        >
                          <SelectTrigger>
                            <SelectValue placeholder="Select type" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="dry">Dry Container</SelectItem>
                            <SelectItem value="reefer">Reefer</SelectItem>
                            <SelectItem value="tank">Tank Container</SelectItem>
                            <SelectItem value="flat-rack">Flat Rack</SelectItem>
                            <SelectItem value="open-top">Open Top</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                      <div className="space-y-2">
                        <Label>Size *</Label>
                        <Select
                          value={container.size}
                          onValueChange={(value) => updateContainer(container.id, "size", value)}
                        >
                          <SelectTrigger>
                            <SelectValue placeholder="Select size" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="20ft">20ft</SelectItem>
                            <SelectItem value="40ft">40ft</SelectItem>
                            <SelectItem value="40ft-hc">40ft HC</SelectItem>
                            <SelectItem value="45ft">45ft</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                      <div className="space-y-2">
                        <Label>Seal Number</Label>
                        <Input
                          placeholder="SEAL123456"
                          value={container.sealNumber}
                          onChange={(e) => updateContainer(container.id, "sealNumber", e.target.value)}
                        />
                      </div>
                      <div className="space-y-2">
                        <Label>Weight (kg)</Label>
                        <Input
                          type="number"
                          placeholder="25000"
                          value={container.weight}
                          onChange={(e) => updateContainer(container.id, "weight", e.target.value)}
                        />
                      </div>
                      <div className="space-y-2">
                        <Label>Temperature (°C)</Label>
                        <Input type="number" placeholder="-18" disabled={container.type !== "reefer"} />
                      </div>
                    </div>

                    <div className="space-y-2">
                      <Label>Container Description</Label>
                      <Textarea
                        placeholder="Additional container details"
                        value={container.description}
                        onChange={(e) => updateContainer(container.id, "description", e.target.value)}
                      />
                    </div>
                  </div>
                ))}
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="route" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Route Information</CardTitle>
                <CardDescription>Ports and route details for the shipment</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="portOfLoading">Port of Loading *</Label>
                    <Select required>
                      <SelectTrigger>
                        <SelectValue placeholder="Select port of loading" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="shanghai">Shanghai, China</SelectItem>
                        <SelectItem value="singapore">Singapore</SelectItem>
                        <SelectItem value="rotterdam">Rotterdam, Netherlands</SelectItem>
                        <SelectItem value="los-angeles">Los Angeles, USA</SelectItem>
                        <SelectItem value="hamburg">Hamburg, Germany</SelectItem>
                        <SelectItem value="dubai">Dubai, UAE</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="portOfDischarge">Port of Discharge *</Label>
                    <Select required>
                      <SelectTrigger>
                        <SelectValue placeholder="Select port of discharge" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="shanghai">Shanghai, China</SelectItem>
                        <SelectItem value="singapore">Singapore</SelectItem>
                        <SelectItem value="rotterdam">Rotterdam, Netherlands</SelectItem>
                        <SelectItem value="los-angeles">Los Angeles, USA</SelectItem>
                        <SelectItem value="hamburg">Hamburg, Germany</SelectItem>
                        <SelectItem value="dubai">Dubai, UAE</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="placeOfReceipt">Place of Receipt</Label>
                    <Input id="placeOfReceipt" placeholder="Factory/Warehouse address" />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="placeOfDelivery">Place of Delivery</Label>
                    <Input id="placeOfDelivery" placeholder="Final delivery address" />
                  </div>
                </div>

                <div className="space-y-2">
                  <Label htmlFor="transitPorts">Transit Ports</Label>
                  <Textarea
                    id="transitPorts"
                    placeholder="List any transit ports (one per line)"
                    className="min-h-[80px]"
                  />
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="estimatedTransitTime">Estimated Transit Time (days)</Label>
                    <Input id="estimatedTransitTime" type="number" placeholder="25" />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="serviceType">Service Type</Label>
                    <Select>
                      <SelectTrigger>
                        <SelectValue placeholder="Select service type" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="direct">Direct Service</SelectItem>
                        <SelectItem value="transshipment">Transshipment</SelectItem>
                        <SelectItem value="feeder">Feeder Service</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="tracking" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center justify-between">
                  Tracking Events
                  <Button type="button" onClick={addTrackingEvent} size="sm">
                    <Plus className="h-4 w-4 mr-2" />
                    Add Event
                  </Button>
                </CardTitle>
                <CardDescription>Add tracking events and milestones for this shipment</CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                {trackingEvents.map((event, index) => (
                  <div key={event.id} className="border rounded-lg p-4 space-y-4">
                    <div className="flex items-center justify-between">
                      <h4 className="font-medium">Event {index + 1}</h4>
                      {trackingEvents.length > 1 && (
                        <Button type="button" variant="outline" size="sm" onClick={() => removeTrackingEvent(event.id)}>
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      )}
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <Label>Status *</Label>
                        <Select
                          value={event.status}
                          onValueChange={(value) => updateTrackingEvent(event.id, "status", value)}
                        >
                          <SelectTrigger>
                            <SelectValue placeholder="Select status" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="booking-confirmed">Booking Confirmed</SelectItem>
                            <SelectItem value="cargo-received">Cargo Received</SelectItem>
                            <SelectItem value="loaded-on-vessel">Loaded on Vessel</SelectItem>
                            <SelectItem value="departed">Departed</SelectItem>
                            <SelectItem value="in-transit">In Transit</SelectItem>
                            <SelectItem value="arrived">Arrived</SelectItem>
                            <SelectItem value="discharged">Discharged</SelectItem>
                            <SelectItem value="customs-clearance">Customs Clearance</SelectItem>
                            <SelectItem value="out-for-delivery">Out for Delivery</SelectItem>
                            <SelectItem value="delivered">Delivered</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                      <div className="space-y-2">
                        <Label>Location *</Label>
                        <Input
                          placeholder="Port/City name"
                          value={event.location}
                          onChange={(e) => updateTrackingEvent(event.id, "location", e.target.value)}
                          required
                        />
                      </div>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <Label>Date *</Label>
                        <Input
                          type="date"
                          value={event.date}
                          onChange={(e) => updateTrackingEvent(event.id, "date", e.target.value)}
                          required
                        />
                      </div>
                      <div className="space-y-2">
                        <Label>Time *</Label>
                        <Input
                          type="time"
                          value={event.time}
                          onChange={(e) => updateTrackingEvent(event.id, "time", e.target.value)}
                          required
                        />
                      </div>
                    </div>

                    <div className="space-y-2">
                      <Label>Description</Label>
                      <Textarea
                        placeholder="Additional details about this event"
                        value={event.description}
                        onChange={(e) => updateTrackingEvent(event.id, "description", e.target.value)}
                      />
                    </div>
                  </div>
                ))}
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="documents" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Documents</CardTitle>
                <CardDescription>Upload relevant documents for this shipment</CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <FileUploader />

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-4">
                    <h4 className="font-medium">Required Documents</h4>
                    <div className="space-y-2">
                      <div className="flex items-center space-x-2">
                        <Checkbox id="bill-of-lading" />
                        <Label htmlFor="bill-of-lading">Bill of Lading</Label>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Checkbox id="commercial-invoice" />
                        <Label htmlFor="commercial-invoice">Commercial Invoice</Label>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Checkbox id="packing-list" />
                        <Label htmlFor="packing-list">Packing List</Label>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Checkbox id="certificate-origin" />
                        <Label htmlFor="certificate-origin">Certificate of Origin</Label>
                      </div>
                    </div>
                  </div>

                  <div className="space-y-4">
                    <h4 className="font-medium">Optional Documents</h4>
                    <div className="space-y-2">
                      <div className="flex items-center space-x-2">
                        <Checkbox id="insurance-certificate" />
                        <Label htmlFor="insurance-certificate">Insurance Certificate</Label>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Checkbox id="inspection-certificate" />
                        <Label htmlFor="inspection-certificate">Inspection Certificate</Label>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Checkbox id="phytosanitary" />
                        <Label htmlFor="phytosanitary">Phytosanitary Certificate</Label>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Checkbox id="dangerous-goods" />
                        <Label htmlFor="dangerous-goods">Dangerous Goods Declaration</Label>
                      </div>
                    </div>
                  </div>
                </div>

                <div className="space-y-2">
                  <Label htmlFor="documentNotes">Document Notes</Label>
                  <Textarea
                    id="documentNotes"
                    placeholder="Any special notes about the documents"
                    className="min-h-[80px]"
                  />
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>

        <div className="flex justify-end space-x-4 mt-8">
          <Button type="button" variant="outline">
            Save as Draft
          </Button>
          <Button type="submit">Create Shipment</Button>
        </div>
      </form>
    </div>
  )
}