"use client";

import { useState } from "react";

import { Bell, CheckCheck, Clock, Truck, UtensilsCrossed } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { cn } from "@/lib/utils";

interface Notification {
  id: string;
  icon: React.ElementType;
  iconColor: string;
  iconBg: string;
  title: string;
  body: string;
  time: string;
  read: boolean;
}

const INITIAL: Notification[] = [
  {
    id: "1",
    icon: Clock,
    iconColor: "text-blue-500",
    iconBg: "bg-blue-50 dark:bg-blue-500/10",
    title: "New order confirmed",
    body: "Order #260514-013L — Delivery, £31.40",
    time: "Just now",
    read: false,
  },
  {
    id: "2",
    icon: UtensilsCrossed,
    iconColor: "text-amber-500",
    iconBg: "bg-amber-50 dark:bg-amber-500/10",
    title: "Kitchen marked Ready",
    body: "Order #260514-009S is ready for collection",
    time: "3 min ago",
    read: false,
  },
  {
    id: "3",
    icon: Truck,
    iconColor: "text-emerald-500",
    iconBg: "bg-emerald-50 dark:bg-emerald-500/10",
    title: "Order delivered",
    body: "Order #260514-005L marked Delivered by James",
    time: "12 min ago",
    read: false,
  },
  {
    id: "4",
    icon: Clock,
    iconColor: "text-violet-500",
    iconBg: "bg-violet-50 dark:bg-violet-500/10",
    title: "Driver assigned",
    body: "James Chen assigned to order #260514-011L",
    time: "18 min ago",
    read: true,
  },
  {
    id: "5",
    icon: UtensilsCrossed,
    iconColor: "text-orange-500",
    iconBg: "bg-orange-50 dark:bg-orange-500/10",
    title: "Sent to kitchen",
    body: "Order #260514-008L sent to kitchen queue",
    time: "25 min ago",
    read: true,
  },
];

export function NotificationBell() {
  const [items, setItems] = useState<Notification[]>(INITIAL);

  const unread = items.filter((n) => !n.read).length;

  const markAllRead = () => setItems((prev) => prev.map((n) => ({ ...n, read: true })));
  const markRead = (id: string) =>
    setItems((prev) => prev.map((n) => (n.id === id ? { ...n, read: true } : n)));

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" size="icon" className="relative size-8">
          <Bell className="size-4" />
          {unread > 0 && (
            <span className="absolute top-1 right-1 flex size-4 items-center justify-center rounded-full bg-red-500 text-[9px] font-bold text-white leading-none">
              {unread}
            </span>
          )}
        </Button>
      </DropdownMenuTrigger>

      <DropdownMenuContent align="end" className="w-80 p-0" sideOffset={6}>
        {/* Header */}
        <div className="flex items-center justify-between border-b px-4 py-3">
          <div className="flex items-center gap-2">
            <span className="font-semibold text-sm">Notifications</span>
            {unread > 0 && (
              <Badge variant="secondary" className="h-5 rounded-full px-1.5 text-[10px]">
                {unread} new
              </Badge>
            )}
          </div>
          {unread > 0 && (
            <button
              onClick={markAllRead}
              className="flex items-center gap-1 text-[11px] text-muted-foreground hover:text-foreground"
            >
              <CheckCheck className="size-3" />
              Mark all read
            </button>
          )}
        </div>

        {/* Notification rows */}
        <div className="max-h-[360px] overflow-y-auto divide-y">
          {items.map((n) => {
            const Icon = n.icon;
            return (
              <button
                key={n.id}
                onClick={() => markRead(n.id)}
                className={cn(
                  "flex w-full items-start gap-3 px-4 py-3 text-left transition-colors hover:bg-muted/50",
                  !n.read && "bg-muted/20"
                )}
              >
                <div className={cn("mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-lg", n.iconBg)}>
                  <Icon className={cn("size-4", n.iconColor)} />
                </div>
                <div className="min-w-0 flex-1">
                  <div className="flex items-center justify-between gap-2">
                    <p className={cn("text-xs leading-snug", !n.read ? "font-semibold" : "font-medium")}>
                      {n.title}
                    </p>
                    {!n.read && <span className="size-1.5 shrink-0 rounded-full bg-blue-500" />}
                  </div>
                  <p className="mt-0.5 text-[11px] text-muted-foreground leading-snug">{n.body}</p>
                  <p className="mt-1 text-[10px] text-muted-foreground/60">{n.time}</p>
                </div>
              </button>
            );
          })}
        </div>

        {/* Footer */}
        <div className="border-t px-4 py-2.5">
          <p className="text-center text-[11px] text-muted-foreground">Showing last 5 notifications</p>
        </div>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}