"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  Bell,
  CheckCircle,
  Clock,
  Eye,
  Filter,
  MoreHorizontal,
  RefreshCcw,
  Ship,
  Trash2,
  AlertTriangle,
  FileText,
} from "lucide-react"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import Link from "next/link"

// Mock data for notifications
const notificationsData = [
  {
    id: "1",
    title: "New Clearance Request",
    message: "A new clearance request (CL-2023-089) has been submitted by ABC Trading",
    type: "clearance",
    status: "unread",
    date: "2023-12-22 14:30",
    link: "/dashboard/clearance/CL-2023-089",
  },
  {
    id: "2",
    title: "Payment Received",
    message: "Payment for invoice INV-2023-045 has been received and processed",
    type: "payment",
    status: "read",
    date: "2023-12-22 12:15",
    link: "/dashboard/payments/INV-2023-045",
  },
  {
    id: "3",
    title: "Shipment Update",
    message: "Shipment SHP-2023-034 has arrived at Jeddah Islamic Port",
    type: "shipment",
    status: "unread",
    date: "2023-12-22 10:45",
    link: "/dashboard/shipments/SHP-2023-034",
  },
  {
    id: "4",
    title: "Document Required",
    message: "Additional documentation required for clearance request CL-2023-088",
    type: "alert",
    status: "unread",
    date: "2023-12-22 09:30",
    link: "/dashboard/clearance/CL-2023-088",
  },
  {
    id: "5",
    title: "System Maintenance",
    message: "Scheduled system maintenance on December 25, 2023, from 02:00 AM to 04:00 AM (GMT+3)",
    type: "system",
    status: "read",
    date: "2023-12-21 16:00",
  },
  {
    id: "6",
    title: "Payment Overdue",
    message: "Payment for invoice INV-2023-042 is overdue. Please process the payment as soon as possible.",
    type: "alert",
    status: "unread",
    date: "2023-12-21 15:20",
    link: "/dashboard/payments/INV-2023-042",
  },
]

export default function NotificationsPage() {
  const router = useRouter()
  const [activeTab, setActiveTab] = useState("all")
  const [notifications, setNotifications] = useState(notificationsData)

  const getNotificationIcon = (type: string) => {
    switch (type) {
      case "clearance":
        return <FileText className="h-5 w-5 text-blue-600" />
      case "payment":
        return <CheckCircle className="h-5 w-5 text-green-600" />
      case "shipment":
        return <Ship className="h-5 w-5 text-purple-600" />
      case "alert":
        return <AlertTriangle className="h-5 w-5 text-red-600" />
      case "system":
        return <RefreshCcw className="h-5 w-5 text-gray-600" />
      default:
        return <Bell className="h-5 w-5" />
    }
  }

  const getNotificationBadge = (type: string) => {
    switch (type) {
      case "clearance":
        return (
          <Badge variant="outline" className="bg-blue-100 text-blue-800">
            Clearance
          </Badge>
        )
      case "payment":
        return (
          <Badge variant="outline" className="bg-green-100 text-green-800">
            Payment
          </Badge>
        )
      case "shipment":
        return (
          <Badge variant="outline" className="bg-purple-100 text-purple-800">
            Shipment
          </Badge>
        )
      case "alert":
        return (
          <Badge variant="outline" className="bg-red-100 text-red-800">
            Alert
          </Badge>
        )
      case "system":
        return (
          <Badge variant="outline" className="bg-gray-100 text-gray-800">
            System
          </Badge>
        )
      default:
        return <Badge variant="outline">Other</Badge>
    }
  }

  const filteredNotifications = notifications.filter((notification) => {
    if (activeTab === "unread") return notification.status === "unread"
    if (activeTab === "read") return notification.status === "read"
    if (activeTab !== "all") return notification.type === activeTab
    return true
  })

  const handleMarkAsRead = (id: string) => {
    setNotifications(
      notifications.map((notification) =>
        notification.id === id ? { ...notification, status: "read" } : notification,
      ),
    )
  }

  const handleMarkAllAsRead = () => {
    setNotifications(notifications.map((notification) => ({ ...notification, status: "read" })))
  }

  const handleDeleteNotification = (id: string) => {
    setNotifications(notifications.filter((notification) => notification.id !== id))
  }

  const handleClearAll = () => {
    setNotifications([])
  }

  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">Notifications</h2>
          <p className="text-muted-foreground">Stay updated with the latest alerts and activities</p>
        </div>
        <div className="flex items-center gap-2">
          <Button variant="outline" onClick={handleMarkAllAsRead}>
            <Eye className="mr-2 h-4 w-4" />
            Mark All as Read
          </Button>
          <Button variant="outline" onClick={handleClearAll}>
            <Trash2 className="mr-2 h-4 w-4" />
            Clear All
          </Button>
        </div>
      </div>

      <Card>
        <CardHeader>
          <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div>
              <CardTitle>All Notifications</CardTitle>
              <CardDescription>View and manage your notifications</CardDescription>
            </div>
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="outline" size="icon">
                  <Filter className="h-4 w-4" />
                  <span className="sr-only">Filter notifications</span>
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuLabel>Filter by</DropdownMenuLabel>
                <DropdownMenuSeparator />
                <DropdownMenuItem onClick={() => setActiveTab("all")}>All Notifications</DropdownMenuItem>
                <DropdownMenuItem onClick={() => setActiveTab("unread")}>Unread</DropdownMenuItem>
                <DropdownMenuItem onClick={() => setActiveTab("clearance")}>Clearance</DropdownMenuItem>
                <DropdownMenuItem onClick={() => setActiveTab("payment")}>Payments</DropdownMenuItem>
                <DropdownMenuItem onClick={() => setActiveTab("shipment")}>Shipments</DropdownMenuItem>
                <DropdownMenuItem onClick={() => setActiveTab("alert")}>Alerts</DropdownMenuItem>
                <DropdownMenuItem onClick={() => setActiveTab("system")}>System</DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </CardHeader>
        <CardContent>
          <Tabs defaultValue="all" value={activeTab} onValueChange={setActiveTab}>
            <TabsList className="mb-4">
              <TabsTrigger value="all">All</TabsTrigger>
              <TabsTrigger value="unread">Unread</TabsTrigger>
              <TabsTrigger value="clearance">Clearance</TabsTrigger>
              <TabsTrigger value="payment">Payments</TabsTrigger>
              <TabsTrigger value="shipment">Shipments</TabsTrigger>
              <TabsTrigger value="alert">Alerts</TabsTrigger>
            </TabsList>

            <div className="space-y-4">
              {filteredNotifications.length === 0 ? (
                <div className="text-center py-12">
                  <Bell className="mx-auto h-12 w-12 text-muted-foreground/50" />
                  <h3 className="mt-4 text-lg font-semibold">No notifications</h3>
                  <p className="text-muted-foreground">You're all caught up!</p>
                </div>
              ) : (
                filteredNotifications.map((notification) => (
                  <div
                    key={notification.id}
                    className={`relative rounded-lg border p-4 ${
                      notification.status === "unread" ? "bg-muted/50" : ""
                    }`}
                  >
                    <div className="flex items-start gap-4">
                      <div className="mt-1">{getNotificationIcon(notification.type)}</div>
                      <div className="flex-1 space-y-1">
                        <div className="flex items-center gap-2">
                          <p className="font-medium">{notification.title}</p>
                          {getNotificationBadge(notification.type)}
                          {notification.status === "unread" && (
                            <span className="relative flex h-2 w-2">
                              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></span>
                              <span className="relative inline-flex rounded-full h-2 w-2 bg-sky-500"></span>
                            </span>
                          )}
                        </div>
                        <p className="text-sm text-muted-foreground">{notification.message}</p>
                        <p className="text-xs text-muted-foreground">
                          <Clock className="inline-block mr-1 h-3 w-3" />
                          {notification.date}
                        </p>
                      </div>
                      <div className="flex items-center gap-2">
                        {notification.link && (
                          <Button variant="ghost" size="icon" asChild>
                            <Link href={notification.link}>
                              <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 />
                            {notification.status === "unread" && (
                              <DropdownMenuItem onClick={() => handleMarkAsRead(notification.id)}>
                                <Eye className="mr-2 h-4 w-4" />
                                Mark as read
                              </DropdownMenuItem>
                            )}
                            {notification.link && (
                              <DropdownMenuItem asChild>
                                <Link href={notification.link}>
                                  <Eye className="mr-2 h-4 w-4" />
                                  View details
                                </Link>
                              </DropdownMenuItem>
                            )}
                            <DropdownMenuItem onClick={() => handleDeleteNotification(notification.id)}>
                              <Trash2 className="mr-2 h-4 w-4" />
                              Delete
                            </DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </div>
                    </div>
                  </div>
                ))
              )}
            </div>
          </Tabs>
        </CardContent>
      </Card>
    </div>
  )
}