import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Link } from "@tanstack/react-router";
import { Bell, MessageCircle, ShoppingBag, Clock, Gavel, Newspaper, Cog } from "lucide-react";
import { useState, type ReactNode } from "react";
import { notifications as seed } from "@/features/_mock/data";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

const ICON = {
  message: MessageCircle,
  purchase: ShoppingBag,
  expiry: Clock,
  punishment: Gavel,
  news: Newspaper,
  system: Cog,
};

export function NotificationBell({ trigger }: { trigger: ReactNode }) {
  const [items, setItems] = useState(seed);
  const unread = items.filter((n) => !n.read).length;

  function markAll() {
    setItems((xs) => xs.map((x) => ({ ...x, read: true })));
  }
  function markOne(id: string) {
    setItems((xs) => xs.map((x) => (x.id === id ? { ...x, read: true } : x)));
  }

  return (
    <Popover>
      <PopoverTrigger asChild>{trigger}</PopoverTrigger>
      <PopoverContent
        align="end"
        sideOffset={10}
        className="w-[360px] rounded-xl border-border bg-popover p-0 shadow-elevated"
      >
        <div className="flex items-center justify-between border-b border-border/60 px-4 py-3">
          <div className="flex items-center gap-2">
            <Bell className="h-4 w-4 text-secondary" />
            <span className="text-sm font-semibold">Notifications</span>
            {unread > 0 && (
              <span className="rounded-full bg-primary/20 px-1.5 py-0.5 text-[10px] font-semibold text-secondary">
                {unread} new
              </span>
            )}
          </div>
          <button
            onClick={markAll}
            className="text-[11px] text-secondary hover:underline disabled:text-muted-foreground"
            disabled={unread === 0}
          >
            Mark all read
          </button>
        </div>
        <div className="max-h-[360px] space-y-1 overflow-y-auto p-2">
          {items.length === 0 && (
            <div className="p-6 text-center text-xs text-muted-foreground">All clear.</div>
          )}
          {items.map((n) => {
            const Icon = ICON[n.type];
            return (
              <button
                type="button"
                key={n.id}
                onClick={() => markOne(n.id)}
                className={cn(
                  "flex w-full items-start gap-3 rounded-lg px-2.5 py-2 text-left transition-colors hover:bg-surface/60",
                  !n.read && "bg-primary/5",
                )}
              >
                <div className="grid h-8 w-8 shrink-0 place-items-center rounded-md bg-surface-elevated">
                  <Icon className="h-4 w-4 text-secondary" />
                </div>
                <div className="min-w-0 flex-1">
                  <div className="flex items-baseline justify-between gap-2">
                    <span className="truncate text-sm font-medium">{n.title}</span>
                    <span className="shrink-0 text-[10px] text-muted-foreground">{n.time}</span>
                  </div>
                  <p className="mt-0.5 line-clamp-2 text-xs text-muted-foreground">{n.body}</p>
                </div>
                {!n.read && <span className="mt-1 h-2 w-2 shrink-0 rounded-full bg-primary" />}
              </button>
            );
          })}
        </div>
        <div className="border-t border-border/60 p-2">
          <Button variant="ghost" size="sm" className="w-full justify-center" asChild>
            <Link to="/account/notifications">Open notification center</Link>
          </Button>
        </div>
      </PopoverContent>
    </Popover>
  );
}

// Back-compat shim in case anything still imports the old panel API.
export function NotificationPanel(_: { open?: boolean; onOpenChange?: (v: boolean) => void }) {
  return null;
}