"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { useToast } from "@/components/ui/use-toast"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Separator } from "@/components/ui/separator"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import {
  ArrowLeft,
  Ship,
  Package,
  Truck,
  MapPin,
  Clock,
  AlertCircle,
  CheckCircle,
  Anchor,
  FileText,
  Send,
} from "lucide-react"
import Link from "next/link"
import { Textarea } from "@/components/ui/textarea"

// Mock data for a single shipment
const shipmentData = {
  id: "SHP-2023-003",
  clearanceId: "CL-2023-003",
  client: "Saudi Logistics",
  clientEmail: "operations@saudilogistics.com",
  clientPhone: "+966 12 345 6789",
  status: "customs-hold",
  eta: "2023-12-28",
  etd: "2023-12-10",
  lastUpdate: "2023-12-19",

  // Origin/Destination
  origin: {
    port: "Rotterdam Port",
    country: "Netherlands",
    address: "Europaweg 875, 3199 LD Rotterdam",
    coordinates: "51.8868° N, 4.2867° E",
  },
  destination: {
    port: "King Fahd Industrial Port",
    country: "Saudi Arabia",
    address: "Industrial Area 1, Jubail 31951",
    coordinates: "27.0902° N, 49.5781° E",
  },

  // Vessel Information
  vessel: {
    name: "EVER GIVEN",
    imo: "9811000",
    flag: "Panama",
    operator: "Evergreen Marine",
    capacity: "20,124 TEU",
    voyage: "EG123-W",
  },

  // Cargo Information
  cargo: {
    type: "Machinery",
    description: "Industrial Manufacturing Equipment",
    weight: "45,000 kg",
    volume: "120 cbm",
    packages: "15 crates",
    dangerous: false,
    temperature: "Ambient",
    specialHandling: "Heavy lift required",
  },

  // Container Information
  containers: [
    {
      number: "EISU9876543",
      type: "40ft High Cube",
      seal: "SL123456",
      weight: "15,000 kg",
      status: "In Transit",
    },
    {
      number: "EISU9876544",
      type: "40ft High Cube",
      seal: "SL123457",
      weight: "15,000 kg",
      status: "In Transit",
    },
    {
      number: "EISU9876545",
      type: "40ft High Cube",
      seal: "SL123458",
      weight: "15,000 kg",
      status: "In Transit",
    },
  ],

  // Documents
  documents: [
    { name: "Bill of Lading.pdf", type: "Bill of Lading", uploaded: "2023-12-10" },
    { name: "Packing List.pdf", type: "Packing List", uploaded: "2023-12-10" },
    { name: "Commercial Invoice.pdf", type: "Commercial Invoice", uploaded: "2023-12-10" },
    { name: "Certificate of Origin.pdf", type: "Certificate of Origin", uploaded: "2023-12-10" },
  ],

  // Tracking Timeline
  timeline: [
    {
      date: "2023-12-10 08:00",
      location: "Rotterdam Port",
      status: "Departed",
      description: "Vessel departed from origin port",
    },
    {
      date: "2023-12-15 14:30",
      location: "Mediterranean Sea",
      status: "In Transit",
      description: "Vessel passing through Mediterranean Sea",
    },
    {
      date: "2023-12-18 09:15",
      location: "Suez Canal",
      status: "In Transit",
      description: "Vessel transiting Suez Canal",
    },
    {
      date: "2023-12-19 16:45",
      location: "King Fahd Industrial Port",
      status: "Customs Hold",
      description: "Shipment held for additional documentation",
    },
  ],
}

export default function ShipmentDetailPage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const { toast } = useToast()
  const [activeTab, setActiveTab] = useState("tracking")
  const [isUpdating, setIsUpdating] = useState(false)
  const [updateNote, setUpdateNote] = useState("")

  // In a real app, you would fetch the data based on the ID
  const shipment = shipmentData

  const getStatusBadge = (status: string) => {
    switch (status) {
      case "loading":
        return (
          <Badge variant="outline" className="bg-yellow-100 text-yellow-800 hover:bg-yellow-100">
            Loading
          </Badge>
        )
      case "in-transit":
        return (
          <Badge variant="outline" className="bg-blue-100 text-blue-800 hover:bg-blue-100">
            In Transit
          </Badge>
        )
      case "arrived":
        return (
          <Badge variant="outline" className="bg-green-100 text-green-800 hover:bg-green-100">
            Arrived
          </Badge>
        )
      case "customs-hold":
        return (
          <Badge variant="outline" className="bg-orange-100 text-orange-800 hover:bg-orange-100">
            Customs Hold
          </Badge>
        )
      case "completed":
        return (
          <Badge variant="outline" className="bg-emerald-100 text-emerald-800 hover:bg-emerald-100">
            Completed
          </Badge>
        )
      case "delayed":
        return (
          <Badge variant="outline" className="bg-red-100 text-red-800 hover:bg-red-100">
            Delayed
          </Badge>
        )
      default:
        return <Badge variant="outline">{status}</Badge>
    }
  }

  const getStatusIcon = (status: string) => {
    switch (status) {
      case "loading":
        return <Package className="h-5 w-5 text-yellow-600" />
      case "in-transit":
        return <Ship className="h-5 w-5 text-blue-600" />
      case "arrived":
        return <Anchor className="h-5 w-5 text-green-600" />
      case "customs-hold":
        return <AlertCircle className="h-5 w-5 text-orange-600" />
      case "completed":
        return <CheckCircle className="h-5 w-5 text-emerald-600" />
      case "delayed":
        return <Clock className="h-5 w-5 text-red-600" />
      default:
        return null
    }
  }

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

      toast({
        title: "Location updated",
        description: "The shipment location has been updated successfully.",
      })
    } catch (error) {
      toast({
        title: "Update failed",
        description: "Failed to update shipment location. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsUpdating(false)
    }
  }

  const handleNotifyClient = () => {
    toast({
      title: "Notification sent",
      description: "The client has been notified about the shipment status.",
    })
  }

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
        <div className="flex items-center gap-2">
          <Link href="/dashboard/shipments">
            <Button variant="outline" size="icon">
              <ArrowLeft className="h-4 w-4" />
            </Button>
          </Link>
          <div>
            <h2 className="text-2xl font-bold tracking-tight">Shipment {params.id}</h2>
            <p className="text-muted-foreground">Track and manage shipment details</p>
          </div>
        </div>
        <div className="flex flex-wrap gap-2">
          <Button variant="outline" onClick={handleNotifyClient}>
            <Send className="mr-2 h-4 w-4" />
            Notify Client
          </Button>
          <Dialog>
            <DialogTrigger asChild>
              <Button variant="outline">
                <MapPin className="mr-2 h-4 w-4" />
                Update Location
              </Button>
            </DialogTrigger>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>Update Shipment Location</DialogTitle>
                <DialogDescription>Add the current location and status of the shipment.</DialogDescription>
              </DialogHeader>
              <div className="grid gap-4 py-4">
                <div className="grid gap-2">
                  <label className="text-sm font-medium">Location Update</label>
                  <Textarea
                    placeholder="Enter the current location and status details"
                    value={updateNote}
                    onChange={(e) => setUpdateNote(e.target.value)}
                  />
                </div>
              </div>
              <DialogFooter>
                <Button variant="outline" onClick={() => setUpdateNote("")}>
                  Cancel
                </Button>
                <Button onClick={handleLocationUpdate} disabled={!updateNote || isUpdating}>
                  {isUpdating ? "Updating..." : "Update Location"}
                </Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>
        </div>
      </div>

      <div className="grid gap-6 md:grid-cols-6">
        <Card className="md:col-span-4">
          <CardHeader>
            <div className="flex items-center justify-between">
              <CardTitle>Shipment Details</CardTitle>
              <div className="flex items-center gap-2">
                {getStatusIcon(shipment.status)}
                {getStatusBadge(shipment.status)}
              </div>
            </div>
            <CardDescription>Track and monitor shipment progress</CardDescription>
          </CardHeader>
          <CardContent>
            <Tabs defaultValue="tracking" value={activeTab} onValueChange={setActiveTab}>
              <TabsList className="mb-4">
                <TabsTrigger value="tracking">Tracking</TabsTrigger>
                <TabsTrigger value="cargo">Cargo</TabsTrigger>
                <TabsTrigger value="containers">Containers</TabsTrigger>
                <TabsTrigger value="documents">Documents</TabsTrigger>
              </TabsList>

              <TabsContent value="tracking" className="space-y-6">
                <div>
                  <h3 className="text-lg font-medium flex items-center gap-2">
                    <Ship className="h-5 w-5 text-muted-foreground" />
                    Vessel Information
                  </h3>
                  <Separator className="my-2" />
                  <dl className="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm">
                    <div className="flex justify-between">
                      <dt className="font-medium">Vessel Name:</dt>
                      <dd>{shipment.vessel.name}</dd>
                    </div>
                    <div className="flex justify-between">
                      <dt className="font-medium">IMO Number:</dt>
                      <dd>{shipment.vessel.imo}</dd>
                    </div>
                    <div className="flex justify-between">
                      <dt className="font-medium">Flag:</dt>
                      <dd>{shipment.vessel.flag}</dd>
                    </div>
                    <div className="flex justify-between">
                      <dt className="font-medium">Operator:</dt>
                      <dd>{shipment.vessel.operator}</dd>
                    </div>
                    <div className="flex justify-between">
                      <dt className="font-medium">Capacity:</dt>
                      <dd>{shipment.vessel.capacity}</dd>
                    </div>
                    <div className="flex justify-between">
                      <dt className="font-medium">Voyage Number:</dt>
                      <dd>{shipment.vessel.voyage}</dd>
                    </div>
                  </dl>
                </div>

                <div>
                  <h3 className="text-lg font-medium flex items-center gap-2">
                    <MapPin className="h-5 w-5 text-muted-foreground" />
                    Route Information
                  </h3>
                  <Separator className="my-2" />
                  <div className="grid gap-4 md:grid-cols-2">
                    <div className="space-y-2">
                      <h4 className="font-medium">Origin</h4>
                      <div className="rounded-md border p-3 space-y-1">
                        <p className="font-medium">{shipment.origin.port}</p>
                        <p className="text-sm text-muted-foreground">{shipment.origin.address}</p>
                        <p className="text-sm text-muted-foreground">{shipment.origin.country}</p>
                        <p className="text-xs text-muted-foreground">{shipment.origin.coordinates}</p>
                      </div>
                    </div>
                    <div className="space-y-2">
                      <h4 className="font-medium">Destination</h4>
                      <div className="rounded-md border p-3 space-y-1">
                        <p className="font-medium">{shipment.destination.port}</p>
                        <p className="text-sm text-muted-foreground">{shipment.destination.address}</p>
                        <p className="text-sm text-muted-foreground">{shipment.destination.country}</p>
                        <p className="text-xs text-muted-foreground">{shipment.destination.coordinates}</p>
                      </div>
                    </div>
                  </div>
                </div>

                <div>
                  <h3 className="text-lg font-medium flex items-center gap-2">
                    <Clock className="h-5 w-5 text-muted-foreground" />
                    Tracking Timeline
                  </h3>
                  <Separator className="my-2" />

                  <div className="relative pl-6 border-l-2 border-muted space-y-6 py-2">
                    {shipment.timeline.map((event, index) => (
                      <div key={index} className="relative">
                        <div className="absolute -left-[25px] p-1 rounded-full bg-background border-2 border-muted">
                          {event.status === "Departed" && <Ship className="h-4 w-4 text-blue-600" />}
                          {event.status === "In Transit" && <Truck className="h-4 w-4 text-yellow-600" />}
                          {event.status === "Customs Hold" && <AlertCircle className="h-4 w-4 text-orange-600" />}
                        </div>
                        <div className="bg-muted/50 p-4 rounded-md">
                          <div className="flex items-center justify-between mb-1">
                            <h4 className="font-medium">{event.status}</h4>
                            <span className="text-xs text-muted-foreground">{event.date}</span>
                          </div>
                          <p className="text-sm text-muted-foreground">{event.location}</p>
                          <p className="text-sm">{event.description}</p>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </TabsContent>

              <TabsContent value="cargo" className="space-y-6">
                <div>
                  <h3 className="text-lg font-medium flex items-center gap-2">
                    <Package className="h-5 w-5 text-muted-foreground" />
                    Cargo Details
                  </h3>
                  <Separator className="my-2" />
                  <dl className="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm">
                    <div className="flex justify-between">
                      <dt className="font-medium">Cargo Type:</dt>
                      <dd>{shipment.cargo.type}</dd>
                    </div>
                    <div className="flex justify-between">
                      <dt className="font-medium">Description:</dt>
                      <dd>{shipment.cargo.description}</dd>
                    </div>
                    <div className="flex justify-between">
                      <dt className="font-medium">Weight:</dt>
                      <dd>{shipment.cargo.weight}</dd>
                    </div>
                    <div className="flex justify-between">
                      <dt className="font-medium">Volume:</dt>
                      <dd>{shipment.cargo.volume}</dd>
                    </div>
                    <div className="flex justify-between">
                      <dt className="font-medium">Packages:</dt>
                      <dd>{shipment.cargo.packages}</dd>
                    </div>
                    <div className="flex justify-between">
                      <dt className="font-medium">Temperature:</dt>
                      <dd>{shipment.cargo.temperature}</dd>
                    </div>
                    <div className="flex justify-between">
                      <dt className="font-medium">Dangerous Goods:</dt>
                      <dd>{shipment.cargo.dangerous ? "Yes" : "No"}</dd>
                    </div>
                    <div className="flex justify-between">
                      <dt className="font-medium">Special Handling:</dt>
                      <dd>{shipment.cargo.specialHandling}</dd>
                    </div>
                  </dl>
                </div>
              </TabsContent>

              <TabsContent value="containers" className="space-y-6">
                <div>
                  <h3 className="text-lg font-medium flex items-center gap-2">
                    <Ship className="h-5 w-5 text-muted-foreground" />
                    Container Information
                  </h3>
                  <Separator className="my-2" />

                  <div className="space-y-4">
                    {shipment.containers.map((container, index) => (
                      <div key={index} className="rounded-md border p-4">
                        <div className="grid gap-2 md:grid-cols-2">
                          <div>
                            <p className="font-medium">{container.number}</p>
                            <p className="text-sm text-muted-foreground">{container.type}</p>
                          </div>
                          <div className="text-right">
                            <Badge variant="outline" className="mb-1">
                              {container.status}
                            </Badge>
                            <p className="text-sm text-muted-foreground">Weight: {container.weight}</p>
                          </div>
                        </div>
                        <div className="mt-2 pt-2 border-t">
                          <p className="text-sm">
                            <span className="font-medium">Seal Number:</span> {container.seal}
                          </p>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </TabsContent>

              <TabsContent value="documents" className="space-y-6">
                <div>
                  <h3 className="text-lg font-medium flex items-center gap-2">
                    <FileText className="h-5 w-5 text-muted-foreground" />
                    Shipping Documents
                  </h3>
                  <Separator className="my-2" />

                  <div className="space-y-4">
                    {shipment.documents.map((doc, index) => (
                      <div key={index} className="flex items-center justify-between p-3 border rounded-md">
                        <div className="flex items-center gap-3">
                          <FileText className="h-5 w-5 text-blue-600" />
                          <div>
                            <p className="font-medium">{doc.name}</p>
                            <p className="text-xs text-muted-foreground">
                              {doc.type} • Uploaded on {doc.uploaded}
                            </p>
                          </div>
                        </div>
                        <Button variant="outline" size="sm">
                          Download
                        </Button>
                      </div>
                    ))}
                  </div>
                </div>
              </TabsContent>
            </Tabs>
          </CardContent>
        </Card>

        <Card className="md:col-span-2">
          <CardHeader>
            <CardTitle>Shipment Summary</CardTitle>
            <CardDescription>Quick overview and actions</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <h4 className="font-medium">Client Information</h4>
              <div className="text-sm space-y-1">
                <p>{shipment.client}</p>
                <p className="text-muted-foreground">{shipment.clientEmail}</p>
                <p className="text-muted-foreground">{shipment.clientPhone}</p>
              </div>
            </div>

            <Separator />

            <div className="space-y-2">
              <h4 className="font-medium">Important Dates</h4>
              <div className="space-y-2 text-sm">
                <div className="flex justify-between">
                  <span className="text-muted-foreground">ETD:</span>
                  <span>{shipment.etd}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">ETA:</span>
                  <span>{shipment.eta}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Last Update:</span>
                  <span>{shipment.lastUpdate}</span>
                </div>
              </div>
            </div>

            <Separator />

            <div className="space-y-2">
              <h4 className="font-medium">Quick Actions</h4>
              <div className="grid gap-2">
                <Button variant="outline" className="justify-start" asChild>
                  <Link href={`/dashboard/clearance/${shipment.clearanceId}`}>
                    <FileText className="mr-2 h-4 w-4" />
                    View Clearance
                  </Link>
                </Button>
                <Button variant="outline" className="justify-start" onClick={handleNotifyClient}>
                  <Send className="mr-2 h-4 w-4" />
                  Send Notification
                </Button>
                <Button variant="outline" className="justify-start" asChild>
                  <Link href={`/dashboard/reports/shipments/${params.id}`}>
                    <FileText className="mr-2 h-4 w-4" />
                    Generate Report
                  </Link>
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}