"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  Ship,
  Search,
  Filter,
  MoreHorizontal,
  Eye,
  Package,
  Truck,
  Anchor,
  Clock,
  CheckCircle,
  AlertCircle,
  Plus,
} from "lucide-react"
import Link from "next/link"

// Mock data for shipments
const shipments = [
  {
    id: "SHP-2023-001",
    clearanceId: "CL-2023-001",
    client: "ABC Trading",
    origin: "Shanghai, China",
    destination: "Jeddah Islamic Port",
    eta: "2023-12-25",
    status: "in-transit",
    vessel: "MSC ISABELLA",
    containers: ["MSCU1234567", "MSCU1234568"],
    cargo: "Electronics",
    weight: "25,000 kg",
    lastUpdate: "2023-12-20",
  },
  {
    id: "SHP-2023-002",
    clearanceId: "CL-2023-002",
    client: "Global Imports",
    origin: "Dubai, UAE",
    destination: "King Abdulaziz Port",
    eta: "2023-12-23",
    status: "arrived",
    vessel: "CMA CGM MARCO POLO",
    containers: ["CMAU7654321"],
    cargo: "Textiles",
    weight: "18,000 kg",
    lastUpdate: "2023-12-21",
  },
  {
    id: "SHP-2023-003",
    clearanceId: "CL-2023-003",
    client: "Saudi Logistics",
    origin: "Rotterdam, Netherlands",
    destination: "King Fahd Industrial Port",
    eta: "2023-12-28",
    status: "customs-hold",
    vessel: "EVER GIVEN",
    containers: ["EISU9876543", "EISU9876544", "EISU9876545"],
    cargo: "Machinery",
    weight: "45,000 kg",
    lastUpdate: "2023-12-19",
  },
  {
    id: "SHP-2023-004",
    clearanceId: "CL-2023-004",
    client: "Eastern Cargo",
    origin: "Singapore",
    destination: "Jubail Commercial Port",
    eta: "2023-12-26",
    status: "loading",
    vessel: "MAERSK SEALAND",
    containers: ["MAEU5555666"],
    cargo: "Automotive Parts",
    weight: "22,000 kg",
    lastUpdate: "2023-12-22",
  },
  {
    id: "SHP-2023-005",
    clearanceId: "CL-2023-005",
    client: "Riyadh Traders",
    origin: "Mumbai, India",
    destination: "Jeddah Islamic Port",
    eta: "2023-12-24",
    status: "completed",
    vessel: "ONE HAMBURG",
    containers: ["ONEU3334444"],
    cargo: "Food Products",
    weight: "28,000 kg",
    lastUpdate: "2023-12-18",
  },
  {
    id: "SHP-2023-006",
    clearanceId: "CL-2023-006",
    client: "Dammam Exports",
    origin: "Busan, South Korea",
    destination: "King Abdulaziz Port",
    eta: "2023-12-27",
    status: "delayed",
    vessel: "HMM ALGECIRAS",
    containers: ["HMMU7778888", "HMMU7778889"],
    cargo: "Chemicals",
    weight: "32,000 kg",
    lastUpdate: "2023-12-20",
  },
]

export default function ShipmentsPage() {
  const router = useRouter()
  const [activeTab, setActiveTab] = useState("all")
  const [searchQuery, setSearchQuery] = useState("")

  // Filter shipments based on active tab and search query
  const filteredShipments = shipments.filter((shipment) => {
    // Filter by status
    if (activeTab !== "all" && shipment.status !== activeTab) {
      return false
    }

    // Filter by search query
    if (searchQuery) {
      const query = searchQuery.toLowerCase()
      return (
        shipment.id.toLowerCase().includes(query) ||
        shipment.clearanceId.toLowerCase().includes(query) ||
        shipment.client.toLowerCase().includes(query) ||
        shipment.containers.some((container) => container.toLowerCase().includes(query)) ||
        shipment.vessel.toLowerCase().includes(query)
      )
    }

    return true
  })

  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-4 w-4 text-yellow-600" />
      case "in-transit":
        return <Ship className="h-4 w-4 text-blue-600" />
      case "arrived":
        return <Anchor className="h-4 w-4 text-green-600" />
      case "customs-hold":
        return <AlertCircle className="h-4 w-4 text-orange-600" />
      case "completed":
        return <CheckCircle className="h-4 w-4 text-emerald-600" />
      case "delayed":
        return <Clock className="h-4 w-4 text-red-600" />
      default:
        return null
    }
  }

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
        <div>
          <h2 className="text-2xl font-bold tracking-tight">Shipments</h2>
          <p className="text-muted-foreground">Track and manage all shipments across Saudi ports</p>
        </div>
        <div className="flex items-center gap-2">
          <Button variant="outline" onClick={() => router.push("/dashboard/reports/shipments")}>
            <Clock className="mr-2 h-4 w-4" />
            Generate Report
          </Button>
          <Button variant="outline" onClick={() => router.push("/dashboard/shipments/track")}>
            <Search className="mr-2 h-4 w-4" />
            Track Shipment
          </Button>
          <Button onClick={() => router.push("/dashboard/shipments/new")}>
            <Plus className="mr-2 h-4 w-4" />
            Create New Shipment
          </Button>
        </div>
      </div>

      <Card>
        <CardHeader>
          <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div>
              <CardTitle>All Shipments</CardTitle>
              <CardDescription>View and track shipments across all ports</CardDescription>
            </div>
            <div className="flex items-center gap-2">
              <div className="relative">
                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                <Input
                  type="search"
                  placeholder="Search shipments..."
                  className="pl-8 w-full md:w-[250px]"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                />
              </div>
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="outline" size="icon">
                    <Filter className="h-4 w-4" />
                    <span className="sr-only">Filter</span>
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end">
                  <DropdownMenuLabel>Filter by</DropdownMenuLabel>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem onClick={() => setActiveTab("all")}>All Shipments</DropdownMenuItem>
                  <DropdownMenuItem onClick={() => setActiveTab("loading")}>Loading</DropdownMenuItem>
                  <DropdownMenuItem onClick={() => setActiveTab("in-transit")}>In Transit</DropdownMenuItem>
                  <DropdownMenuItem onClick={() => setActiveTab("arrived")}>Arrived</DropdownMenuItem>
                  <DropdownMenuItem onClick={() => setActiveTab("customs-hold")}>Customs Hold</DropdownMenuItem>
                  <DropdownMenuItem onClick={() => setActiveTab("completed")}>Completed</DropdownMenuItem>
                  <DropdownMenuItem onClick={() => setActiveTab("delayed")}>Delayed</DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </div>
          </div>
        </CardHeader>
        <CardContent>
          <Tabs defaultValue="all" value={activeTab} onValueChange={setActiveTab}>
            <TabsList className="mb-4">
              <TabsTrigger value="all">All</TabsTrigger>
              <TabsTrigger value="loading">Loading</TabsTrigger>
              <TabsTrigger value="in-transit">In Transit</TabsTrigger>
              <TabsTrigger value="arrived">Arrived</TabsTrigger>
              <TabsTrigger value="customs-hold">Customs Hold</TabsTrigger>
              <TabsTrigger value="completed">Completed</TabsTrigger>
              <TabsTrigger value="delayed">Delayed</TabsTrigger>
            </TabsList>

            <div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Shipment ID</TableHead>
                    <TableHead>Client</TableHead>
                    <TableHead className="hidden md:table-cell">Origin/Destination</TableHead>
                    <TableHead className="hidden md:table-cell">Vessel</TableHead>
                    <TableHead>Status</TableHead>
                    <TableHead className="hidden md:table-cell">ETA</TableHead>
                    <TableHead className="text-right">Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredShipments.length === 0 ? (
                    <TableRow>
                      <TableCell colSpan={7} className="text-center py-6 text-muted-foreground">
                        No shipments found
                      </TableCell>
                    </TableRow>
                  ) : (
                    filteredShipments.map((shipment) => (
                      <TableRow key={shipment.id}>
                        <TableCell className="font-medium">
                          <div className="flex items-center gap-2">
                            {getStatusIcon(shipment.status)}
                            <span>{shipment.id}</span>
                          </div>
                        </TableCell>
                        <TableCell>{shipment.client}</TableCell>
                        <TableCell className="hidden md:table-cell">
                          <div className="flex flex-col gap-1">
                            <span className="text-sm">{shipment.origin}</span>
                            <span className="text-sm text-muted-foreground">{shipment.destination}</span>
                          </div>
                        </TableCell>
                        <TableCell className="hidden md:table-cell">{shipment.vessel}</TableCell>
                        <TableCell>{getStatusBadge(shipment.status)}</TableCell>
                        <TableCell className="hidden md:table-cell">{shipment.eta}</TableCell>
                        <TableCell className="text-right">
                          <div className="flex justify-end gap-2">
                            <Button variant="ghost" size="icon" asChild>
                              <Link href={`/dashboard/shipments/${shipment.id}`}>
                                <Eye className="h-4 w-4" />
                                <span className="sr-only">View details</span>
                              </Link>
                            </Button>
                            <DropdownMenu>
                              <DropdownMenuTrigger asChild>
                                <Button variant="ghost" size="icon">
                                  <MoreHorizontal className="h-4 w-4" />
                                  <span className="sr-only">More options</span>
                                </Button>
                              </DropdownMenuTrigger>
                              <DropdownMenuContent align="end">
                                <DropdownMenuLabel>Actions</DropdownMenuLabel>
                                <DropdownMenuSeparator />
                                <DropdownMenuItem asChild>
                                  <Link href={`/dashboard/shipments/${shipment.id}`}>
                                    <Eye className="mr-2 h-4 w-4" />
                                    View Details
                                  </Link>
                                </DropdownMenuItem>
                                <DropdownMenuItem asChild>
                                  <Link href={`/dashboard/clearance/${shipment.clearanceId}`}>
                                    <Package className="mr-2 h-4 w-4" />
                                    View Clearance
                                  </Link>
                                </DropdownMenuItem>
                                <DropdownMenuItem>
                                  <Truck className="mr-2 h-4 w-4" />
                                  Update Location
                                </DropdownMenuItem>
                                <DropdownMenuItem>
                                  <AlertCircle className="mr-2 h-4 w-4" />
                                  Report Issue
                                </DropdownMenuItem>
                              </DropdownMenuContent>
                            </DropdownMenu>
                          </div>
                        </TableCell>
                      </TableRow>
                    ))
                  )}
                </TableBody>
              </Table>
            </div>
          </Tabs>
        </CardContent>
      </Card>
    </div>
  )
}