"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 {
  Search,
  Filter,
  MoreHorizontal,
  Eye,
  Download,
  Send,
  FileText,
  Plus,
  Receipt,
  AlertCircle,
  CheckCircle,
  Clock,
  Ban,
} from "lucide-react"
import Link from "next/link"

// Mock data for payments
const payments = [
  {
    id: "INV-2023-001",
    clearanceId: "CL-2023-001",
    client: "ABC Trading",
    amount: 25000.0,
    currency: "SAR",
    status: "paid",
    date: "2023-12-15",
    dueDate: "2023-12-30",
    paymentMethod: "Bank Transfer",
    description: "Port clearance fees and handling charges",
  },
  {
    id: "INV-2023-002",
    clearanceId: "CL-2023-002",
    client: "Global Imports",
    amount: 18500.0,
    currency: "SAR",
    status: "pending",
    date: "2023-12-18",
    dueDate: "2024-01-02",
    paymentMethod: "Credit Card",
    description: "Customs duties and documentation fees",
  },
  {
    id: "INV-2023-003",
    clearanceId: "CL-2023-003",
    client: "Saudi Logistics",
    amount: 32000.0,
    currency: "SAR",
    status: "processing",
    date: "2023-12-20",
    dueDate: "2024-01-04",
    paymentMethod: "Bank Transfer",
    description: "Container handling and storage fees",
  },
  {
    id: "INV-2023-004",
    clearanceId: "CL-2023-004",
    client: "Eastern Cargo",
    amount: 15000.0,
    currency: "SAR",
    status: "overdue",
    date: "2023-12-01",
    dueDate: "2023-12-15",
    paymentMethod: "Bank Transfer",
    description: "Port fees and customs charges",
  },
  {
    id: "INV-2023-005",
    clearanceId: "CL-2023-005",
    client: "Riyadh Traders",
    amount: 28500.0,
    currency: "SAR",
    status: "cancelled",
    date: "2023-12-10",
    dueDate: "2023-12-25",
    paymentMethod: "Credit Card",
    description: "Clearance and documentation fees",
  },
  {
    id: "INV-2023-006",
    clearanceId: "CL-2023-006",
    client: "Dammam Exports",
    amount: 42000.0,
    currency: "SAR",
    status: "paid",
    date: "2023-12-05",
    dueDate: "2023-12-20",
    paymentMethod: "Bank Transfer",
    description: "Port handling and storage charges",
  },
]

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

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

    // Filter by search query
    if (searchQuery) {
      const query = searchQuery.toLowerCase()
      return (
        payment.id.toLowerCase().includes(query) ||
        payment.client.toLowerCase().includes(query) ||
        payment.clearanceId.toLowerCase().includes(query)
      )
    }

    return true
  })

  const getStatusBadge = (status: string) => {
    switch (status) {
      case "paid":
        return (
          <Badge variant="outline" className="bg-green-100 text-green-800 hover:bg-green-100">
            Paid
          </Badge>
        )
      case "pending":
        return (
          <Badge variant="outline" className="bg-yellow-100 text-yellow-800 hover:bg-yellow-100">
            Pending
          </Badge>
        )
      case "processing":
        return (
          <Badge variant="outline" className="bg-blue-100 text-blue-800 hover:bg-blue-100">
            Processing
          </Badge>
        )
      case "overdue":
        return (
          <Badge variant="outline" className="bg-red-100 text-red-800 hover:bg-red-100">
            Overdue
          </Badge>
        )
      case "cancelled":
        return (
          <Badge variant="outline" className="bg-gray-100 text-gray-800 hover:bg-gray-100">
            Cancelled
          </Badge>
        )
      default:
        return <Badge variant="outline">{status}</Badge>
    }
  }

  const getStatusIcon = (status: string) => {
    switch (status) {
      case "paid":
        return <CheckCircle className="h-4 w-4 text-green-600" />
      case "pending":
        return <Clock className="h-4 w-4 text-yellow-600" />
      case "processing":
        return <Clock className="h-4 w-4 text-blue-600" />
      case "overdue":
        return <AlertCircle className="h-4 w-4 text-red-600" />
      case "cancelled":
        return <Ban className="h-4 w-4 text-gray-600" />
      default:
        return null
    }
  }

  const formatCurrency = (amount: number, currency: string) => {
    return new Intl.NumberFormat("en-SA", {
      style: "currency",
      currency: currency,
    }).format(amount)
  }

  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">Payments</h2>
          <p className="text-muted-foreground">Manage invoices and track payments</p>
        </div>
        <div className="flex items-center gap-2">
          <Button variant="outline" onClick={() => router.push("/dashboard/reports/payments")}>
            <FileText className="mr-2 h-4 w-4" />
            Payment Report
          </Button>
          <Button onClick={() => router.push("/dashboard/payments/new")}>
            <Plus className="mr-2 h-4 w-4" />
            New Invoice
          </Button>
        </div>
      </div>

      <Card>
        <CardHeader>
          <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div>
              <CardTitle>All Payments</CardTitle>
              <CardDescription>View and manage payment records</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 payments..."
                  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 Payments</DropdownMenuItem>
                  <DropdownMenuItem onClick={() => setActiveTab("pending")}>Pending</DropdownMenuItem>
                  <DropdownMenuItem onClick={() => setActiveTab("processing")}>Processing</DropdownMenuItem>
                  <DropdownMenuItem onClick={() => setActiveTab("paid")}>Paid</DropdownMenuItem>
                  <DropdownMenuItem onClick={() => setActiveTab("overdue")}>Overdue</DropdownMenuItem>
                  <DropdownMenuItem onClick={() => setActiveTab("cancelled")}>Cancelled</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="pending">Pending</TabsTrigger>
              <TabsTrigger value="processing">Processing</TabsTrigger>
              <TabsTrigger value="paid">Paid</TabsTrigger>
              <TabsTrigger value="overdue">Overdue</TabsTrigger>
              <TabsTrigger value="cancelled">Cancelled</TabsTrigger>
            </TabsList>

            <div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Invoice ID</TableHead>
                    <TableHead>Client</TableHead>
                    <TableHead className="hidden md:table-cell">Date</TableHead>
                    <TableHead className="hidden md:table-cell">Due Date</TableHead>
                    <TableHead>Amount</TableHead>
                    <TableHead>Status</TableHead>
                    <TableHead className="text-right">Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredPayments.length === 0 ? (
                    <TableRow>
                      <TableCell colSpan={7} className="text-center py-6 text-muted-foreground">
                        No payments found
                      </TableCell>
                    </TableRow>
                  ) : (
                    filteredPayments.map((payment) => (
                      <TableRow key={payment.id}>
                        <TableCell className="font-medium">
                          <div className="flex items-center gap-2">
                            {getStatusIcon(payment.status)}
                            <span>{payment.id}</span>
                          </div>
                        </TableCell>
                        <TableCell>{payment.client}</TableCell>
                        <TableCell className="hidden md:table-cell">{payment.date}</TableCell>
                        <TableCell className="hidden md:table-cell">{payment.dueDate}</TableCell>
                        <TableCell>{formatCurrency(payment.amount, payment.currency)}</TableCell>
                        <TableCell>{getStatusBadge(payment.status)}</TableCell>
                        <TableCell className="text-right">
                          <div className="flex justify-end gap-2">
                            <Button variant="ghost" size="icon" asChild>
                              <Link href={`/dashboard/payments/${payment.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/payments/${payment.id}`}>
                                    <Eye className="mr-2 h-4 w-4" />
                                    View Details
                                  </Link>
                                </DropdownMenuItem>
                                <DropdownMenuItem>
                                  <Download className="mr-2 h-4 w-4" />
                                  Download Invoice
                                </DropdownMenuItem>
                                <DropdownMenuItem>
                                  <Send className="mr-2 h-4 w-4" />
                                  Send to Client
                                </DropdownMenuItem>
                                {payment.status === "paid" && (
                                  <DropdownMenuItem>
                                    <Receipt className="mr-2 h-4 w-4" />
                                    View Receipt
                                  </DropdownMenuItem>
                                )}
                                <DropdownMenuItem asChild>
                                  <Link href={`/dashboard/clearance/${payment.clearanceId}`}>
                                    <FileText className="mr-2 h-4 w-4" />
                                    View Clearance
                                  </Link>
                                </DropdownMenuItem>
                              </DropdownMenuContent>
                            </DropdownMenu>
                          </div>
                        </TableCell>
                      </TableRow>
                    ))
                  )}
                </TableBody>
              </Table>
            </div>
          </Tabs>
        </CardContent>
      </Card>
    </div>
  )
}