"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { useAuth } from "@/components/auth-provider"
import { useLanguage } from "@/lib/language-context"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  Plus,
  Search,
  MoreHorizontal,
  CheckCircle,
  XCircle,
  Clock,
  AlertCircle,
  CreditCard,
  Eye,
  Trash2,
  Filter,
} from "lucide-react"
import Link from "next/link"

// Mock data for clearance requests
const clearanceRequests = [
  {
    id: "CL-2023-001",
    client: "ABC Trading",
    blNumber: "BL12345678",
    containerNumbers: ["CONT123456", "CONT123457"],
    commodity: "Electronics",
    status: "completed",
    date: "2023-12-15",
    port: "Jeddah Islamic Port",
  },
  {
    id: "CL-2023-002",
    client: "Global Imports",
    blNumber: "BL87654321",
    containerNumbers: ["CONT654321"],
    commodity: "Textiles",
    status: "processing",
    date: "2023-12-18",
    port: "King Abdulaziz Port",
  },
  {
    id: "CL-2023-003",
    client: "Saudi Logistics",
    blNumber: "BL11223344",
    containerNumbers: ["CONT112233", "CONT112234", "CONT112235"],
    commodity: "Machinery",
    status: "invoiced",
    date: "2023-12-20",
    port: "King Fahd Industrial Port",
  },
  {
    id: "CL-2023-004",
    client: "Eastern Cargo",
    blNumber: "BL99887766",
    containerNumbers: ["CONT998877"],
    commodity: "Automotive Parts",
    status: "pending",
    date: "2023-12-22",
    port: "Jubail Commercial Port",
  },
  {
    id: "CL-2023-005",
    client: "Riyadh Traders",
    blNumber: "BL55443322",
    containerNumbers: ["CONT554433"],
    commodity: "Food Products",
    status: "pending",
    date: "2023-12-23",
    port: "Jeddah Islamic Port",
  },
  {
    id: "CL-2023-006",
    client: "Dammam Exports",
    blNumber: "BL11335577",
    containerNumbers: ["CONT113355", "CONT113356"],
    commodity: "Chemicals",
    status: "rejected",
    date: "2023-12-19",
    port: "King Abdulaziz Port",
  },
  {
    id: "CL-2023-007",
    client: "Jeddah Imports",
    blNumber: "BL22446688",
    containerNumbers: ["CONT224466"],
    commodity: "Furniture",
    status: "paid",
    date: "2023-12-17",
    port: "Jeddah Islamic Port",
  },
  {
    id: "CL-2023-008",
    client: "Al-Khobar Shipping",
    blNumber: "BL99887755",
    containerNumbers: ["CONT998877", "CONT998878"],
    commodity: "Construction Materials",
    status: "processing",
    date: "2023-12-21",
    port: "King Fahd Industrial Port",
  },
]

export default function ClearanceRequestsPage() {
  const router = useRouter()
  const { user } = useAuth()
  const { t, dir } = useLanguage()
  const [activeTab, setActiveTab] = useState("all")
  const [searchQuery, setSearchQuery] = useState("")
  const [mounted, setMounted] = useState(false)

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

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

    // Filter by search query
    if (searchQuery) {
      const query = searchQuery.toLowerCase()
      return (
        request.id.toLowerCase().includes(query) ||
        request.client.toLowerCase().includes(query) ||
        request.blNumber.toLowerCase().includes(query) ||
        request.containerNumbers.some((num) => num.toLowerCase().includes(query))
      )
    }

    return true
  })

  const getStatusBadge = (status: string) => {
    const statusMap: { [key: string]: string } = {
      pending: t("clearance.status.pending") || "Pending",
      processing: t("clearance.status.processing") || "Processing",
      completed: t("clearance.status.completed") || "Completed",
      invoiced: t("clearance.status.invoiced") || "Invoiced",
      paid: t("clearance.status.paid") || "Paid",
      rejected: t("clearance.status.rejected") || "Rejected",
    }

    switch (status) {
      case "pending":
        return (
          <Badge variant="outline" className="bg-yellow-100 text-yellow-800 hover:bg-yellow-100">
            {statusMap[status]}
          </Badge>
        )
      case "processing":
        return (
          <Badge variant="outline" className="bg-blue-100 text-blue-800 hover:bg-blue-100">
            {statusMap[status]}
          </Badge>
        )
      case "completed":
        return (
          <Badge variant="outline" className="bg-green-100 text-green-800 hover:bg-green-100">
            {statusMap[status]}
          </Badge>
        )
      case "invoiced":
        return (
          <Badge variant="outline" className="bg-purple-100 text-purple-800 hover:bg-purple-100">
            {statusMap[status]}
          </Badge>
        )
      case "paid":
        return (
          <Badge variant="outline" className="bg-emerald-100 text-emerald-800 hover:bg-emerald-100">
            {statusMap[status]}
          </Badge>
        )
      case "rejected":
        return (
          <Badge variant="outline" className="bg-red-100 text-red-800 hover:bg-red-100">
            {statusMap[status]}
          </Badge>
        )
      default:
        return <Badge variant="outline">{status}</Badge>
    }
  }

  const getStatusIcon = (status: string) => {
    switch (status) {
      case "pending":
        return <AlertCircle className="h-4 w-4 text-yellow-600" />
      case "processing":
        return <Clock className="h-4 w-4 text-blue-600" />
      case "completed":
        return <CheckCircle className="h-4 w-4 text-green-600" />
      case "invoiced":
        return <CreditCard className="h-4 w-4 text-purple-600" />
      case "paid":
        return <CheckCircle className="h-4 w-4 text-emerald-600" />
      case "rejected":
        return <XCircle className="h-4 w-4 text-red-600" />
      default:
        return null
    }
  }

  const handleAccept = (id: string) => {
    // In a real app, this would make an API call
    console.log(`Accepting request ${id}`)
    // Update status logic would go here
  }

  const handleReject = (id: string) => {
    // In a real app, this would make an API call
    console.log(`Rejecting request ${id}`)
    // Update status logic would go here
  }

  const handleDelete = (id: string) => {
    // In a real app, this would make an API call
    console.log(`Deleting request ${id}`)
    // Delete logic would go here
  }

  return (
    <div className="space-y-6" dir={mounted ? dir : "ltr"}>
      <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">{t("clearance.title") || "Clearance Requests"}</h2>
          <p className="text-muted-foreground">
            {t("clearance.subtitle") || "Manage and track all port clearance requests"}
          </p>
        </div>
        <Link href="/dashboard/clearance/new">
          <Button>
            <Plus className="mr-2 h-4 w-4" />
            {t("clearance.newRequest") || "New Request"}
          </Button>
        </Link>
      </div>

      <Card>
        <CardHeader className="pb-3">
          <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div>
              <CardTitle>{t("clearance.allRequests") || "All Clearance Requests"}</CardTitle>
              <CardDescription>
                {t("clearance.allRequestsDesc") || "View and manage clearance requests from clients"}
              </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={t("clearance.searchPlaceholder") || "Search requests..."}
                  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">{t("clearance.filter") || "Filter"}</span>
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end">
                  <DropdownMenuLabel>{t("clearance.filterBy") || "Filter by"}</DropdownMenuLabel>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem onClick={() => setActiveTab("all")}>
                    {t("clearance.allRequests") || "All Requests"}
                  </DropdownMenuItem>
                  <DropdownMenuItem onClick={() => setActiveTab("pending")}>
                    {t("clearance.status.pending") || "Pending"}
                  </DropdownMenuItem>
                  <DropdownMenuItem onClick={() => setActiveTab("processing")}>
                    {t("clearance.status.processing") || "Processing"}
                  </DropdownMenuItem>
                  <DropdownMenuItem onClick={() => setActiveTab("completed")}>
                    {t("clearance.status.completed") || "Completed"}
                  </DropdownMenuItem>
                  <DropdownMenuItem onClick={() => setActiveTab("invoiced")}>
                    {t("clearance.status.invoiced") || "Invoiced"}
                  </DropdownMenuItem>
                  <DropdownMenuItem onClick={() => setActiveTab("paid")}>
                    {t("clearance.status.paid") || "Paid"}
                  </DropdownMenuItem>
                  <DropdownMenuItem onClick={() => setActiveTab("rejected")}>
                    {t("clearance.status.rejected") || "Rejected"}
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </div>
          </div>
        </CardHeader>
        <CardContent>
          <Tabs defaultValue="all" value={activeTab} onValueChange={setActiveTab}>
            <TabsList className="mb-4 w-full md:w-auto">
              <TabsTrigger value="all">{t("clearance.tabs.all") || "All"}</TabsTrigger>
              <TabsTrigger value="pending">{t("clearance.status.pending") || "Pending"}</TabsTrigger>
              <TabsTrigger value="processing">{t("clearance.status.processing") || "Processing"}</TabsTrigger>
              <TabsTrigger value="completed">{t("clearance.status.completed") || "Completed"}</TabsTrigger>
              <TabsTrigger value="invoiced">{t("clearance.status.invoiced") || "Invoiced"}</TabsTrigger>
              <TabsTrigger value="paid">{t("clearance.status.paid") || "Paid"}</TabsTrigger>
              <TabsTrigger value="rejected">{t("clearance.status.rejected") || "Rejected"}</TabsTrigger>
            </TabsList>

            <div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>{t("clearance.table.id") || "ID"}</TableHead>
                    <TableHead>{t("clearance.table.client") || "Client"}</TableHead>
                    <TableHead className="hidden md:table-cell">
                      {t("clearance.table.blNumber") || "BL Number"}
                    </TableHead>
                    <TableHead className="hidden md:table-cell">
                      {t("clearance.table.commodity") || "Commodity"}
                    </TableHead>
                    <TableHead>{t("clearance.table.status") || "Status"}</TableHead>
                    <TableHead className="hidden md:table-cell">{t("clearance.table.date") || "Date"}</TableHead>
                    <TableHead className="text-right">{t("clearance.table.actions") || "Actions"}</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredRequests.length === 0 ? (
                    <TableRow>
                      <TableCell colSpan={7} className="text-center py-6 text-muted-foreground">
                        {t("clearance.noRequests") || "No clearance requests found"}
                      </TableCell>
                    </TableRow>
                  ) : (
                    filteredRequests.map((request) => (
                      <TableRow key={request.id}>
                        <TableCell className="font-medium">
                          <div className="flex items-center gap-2">
                            {getStatusIcon(request.status)}
                            <span>{request.id}</span>
                          </div>
                        </TableCell>
                        <TableCell>{request.client}</TableCell>
                        <TableCell className="hidden md:table-cell">{request.blNumber}</TableCell>
                        <TableCell className="hidden md:table-cell">{request.commodity}</TableCell>
                        <TableCell>{getStatusBadge(request.status)}</TableCell>
                        <TableCell className="hidden md:table-cell">{request.date}</TableCell>
                        <TableCell className="text-right">
                          <div className="flex justify-end gap-2">
                            <Button variant="ghost" size="icon" asChild>
                              <Link href={`/dashboard/clearance/${request.id}`}>
                                <Eye className="h-4 w-4" />
                                <span className="sr-only">{t("clearance.viewDetails") || "View details"}</span>
                              </Link>
                            </Button>
                            <DropdownMenu>
                              <DropdownMenuTrigger asChild>
                                <Button variant="ghost" size="icon">
                                  <MoreHorizontal className="h-4 w-4" />
                                  <span className="sr-only">{t("clearance.moreOptions") || "More options"}</span>
                                </Button>
                              </DropdownMenuTrigger>
                              <DropdownMenuContent align="end">
                                <DropdownMenuLabel>{t("clearance.actions") || "Actions"}</DropdownMenuLabel>
                                <DropdownMenuSeparator />
                                <DropdownMenuItem asChild>
                                  <Link href={`/dashboard/clearance/${request.id}`}>
                                    <Eye className="mr-2 h-4 w-4" />
                                    {t("clearance.viewDetails") || "View Details"}
                                  </Link>
                                </DropdownMenuItem>
                                {request.status === "pending" && (
                                  <>
                                    <DropdownMenuItem onClick={() => handleAccept(request.id)}>
                                      <CheckCircle className="mr-2 h-4 w-4 text-green-600" />
                                      {t("clearance.acceptRequest") || "Accept Request"}
                                    </DropdownMenuItem>
                                    <DropdownMenuItem onClick={() => handleReject(request.id)}>
                                      <XCircle className="mr-2 h-4 w-4 text-red-600" />
                                      {t("clearance.rejectRequest") || "Reject Request"}
                                    </DropdownMenuItem>
                                  </>
                                )}
                                {request.status === "completed" && (
                                  <DropdownMenuItem>
                                    <CreditCard className="mr-2 h-4 w-4 text-purple-600" />
                                    {t("clearance.generateInvoice") || "Generate Invoice"}
                                  </DropdownMenuItem>
                                )}
                                {user?.role === "admin" && (
                                  <DropdownMenuItem
                                    onClick={() => handleDelete(request.id)}
                                    className="text-red-600 focus:text-red-600"
                                  >
                                    <Trash2 className="mr-2 h-4 w-4" />
                                    {t("clearance.deleteRequest") || "Delete Request"}
                                  </DropdownMenuItem>
                                )}
                              </DropdownMenuContent>
                            </DropdownMenu>
                          </div>
                        </TableCell>
                      </TableRow>
                    ))
                  )}
                </TableBody>
              </Table>
            </div>
          </Tabs>
        </CardContent>
      </Card>
    </div>
  )
}