import { Bell } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Badge } from "@/components/ui/badge";

const items = [
  {
    id: 1,
    title: "Campaign approved",
    body: "‘Lagos Youth Outreach’ passed compliance review.",
    time: "2m",
    unread: true,
  },
  {
    id: 2,
    title: "Wallet top-up successful",
    body: "₦2,500,000 added to your wallet.",
    time: "1h",
    unread: true,
  },
  {
    id: 3,
    title: "AI draft ready",
    body: "3 ad variants generated for Kano-Ward 4.",
    time: "3h",
    unread: false,
  },
];

export function NotificationBell() {
  const unread = items.filter((i) => i.unread).length;
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="ghost" size="icon" aria-label="Notifications" className="relative">
          <Bell className="h-4 w-4" />
          {unread > 0 && (
            <span className="absolute top-1.5 right-1.5 h-2 w-2 rounded-full bg-destructive ring-2 ring-background" />
          )}
        </Button>
      </PopoverTrigger>
      <PopoverContent align="end" className="w-80 p-0">
        <div className="flex items-center justify-between px-4 py-3 border-b">
          <div className="text-sm font-semibold">Notifications</div>
          <Badge variant="secondary" className="text-[10px]">
            {unread} new
          </Badge>
        </div>
        <div className="max-h-80 overflow-y-auto divide-y">
          {items.map((i) => (
            <div key={i.id} className="px-4 py-3 hover:bg-muted/50 cursor-pointer">
              <div className="flex items-start gap-2">
                {i.unread && (
                  <span className="mt-1.5 h-1.5 w-1.5 rounded-full bg-primary shrink-0" />
                )}
                <div className="flex-1 min-w-0">
                  <div className="text-sm font-medium">{i.title}</div>
                  <div className="text-xs text-muted-foreground mt-0.5">{i.body}</div>
                </div>
                <div className="text-[10px] text-muted-foreground shrink-0">{i.time}</div>
              </div>
            </div>
          ))}
        </div>
        <div className="px-4 py-2 border-t text-center">
          <button className="text-xs text-primary hover:underline">View all notifications</button>
        </div>
      </PopoverContent>
    </Popover>
  );
}