"use client";

import Link from "next/link";
import { useEffect, useMemo, useRef, useState } from "react";

import {
  countUnread,
  isAlertUnread,
  markAllSeen as markAllSeenState,
  markSeen as markSeenState,
  reconcileSeen,
  type AlertSeenState,
} from "@/lib/admin/alert-seen";
import type { AdminAlertSummary } from "@/lib/data/admin-alerts";

type Props = { summary: AdminAlertSummary };

type AlertItem = {
  /** Stabilna šifra — NE adresa: više stavki vodi na istu stranu. */
  id: string;
  label: string;
  count: number;
  href: string;
  tone: "rose" | "amber" | "blue";
};

/**
 * Verzija je podignuta na v2 jer se značenje zapisa promenilo: ranije je ključ
 * bila adresa, sada je šifra stavke. Stari zapisi bi se pogrešno čitali, pa se
 * namerno ne nasleđuju.
 */
const STORAGE_KEY = "bp_admin_alerts_seen_v2";

/**
 * Zvono za obaveštenja u admin zaglavlju — broj stavki koje čekaju akciju.
 *
 * Šta se pamti i zašto, uključujući dva kvara zbog kojih broj ranije nikad
 * nije dolazio do nule, stoji u `lib/admin/alert-seen.ts`.
 */
export function AdminAlertBell({ summary }: Props) {
  const [open, setOpen] = useState(false);
  const [seen, setSeen] = useState<AlertSeenState>({});
  const ref = useRef<HTMLDivElement | null>(null);

  // Učitaj stanje „pročitano" iz localStorage (posle mount-a → bez hydration mismatch-a).
  useEffect(() => {
    let timeoutId: number | undefined;
    try {
      const raw = localStorage.getItem(STORAGE_KEY);
      if (raw) {
        const stored = JSON.parse(raw) as AlertSeenState;
        timeoutId = window.setTimeout(() => setSeen(stored), 0);
      }
    } catch {
      /* ignore */
    }
    return () => {
      if (timeoutId !== undefined) window.clearTimeout(timeoutId);
    };
  }, []);

  function persist(next: AlertSeenState) {
    setSeen(next);
    try {
      localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
    } catch {
      /* ignore */
    }
  }

  const items: AlertItem[] = useMemo(
    () => [
      { id: "disputes", label: "Otvoreni sporovi", count: summary.openDisputes, href: "/admin/trust-safety", tone: "rose" },
      { id: "submissions", label: "Nove prijave", count: summary.pendingSubmissions, href: "/admin/prijave", tone: "amber" },
      { id: "reviews", label: "Recenzije na čekanju", count: summary.pendingReviews, href: "/admin/recenzije?status=PENDING", tone: "amber" },
      { id: "expiring-plans", label: "Planovi ističu (7d)", count: summary.expiringPlansSoon, href: "/admin/naplata", tone: "rose" },
      { id: "verifications", label: "Verifikacije čekaju", count: summary.pendingVerificationChecks, href: "/admin/trust-safety", tone: "blue" },
      { id: "profile-questions", label: "Pitanja bez odgovora", count: summary.pendingProfileQuestions, href: "/admin/kompanije", tone: "amber" },
      { id: "tier-without-expiry", label: "Plaćen nivo bez isteka", count: summary.paidTierWithoutExpiry, href: "/admin/kompanije", tone: "rose" },
    ],
    [
      summary.openDisputes,
      summary.pendingSubmissions,
      summary.pendingReviews,
      summary.expiringPlansSoon,
      summary.pendingVerificationChecks,
      summary.pendingProfileQuestions,
      summary.paidTierWithoutExpiry,
    ],
  );

  const visible = items.filter((i) => i.count > 0);
  const unreadCount = countUnread(items, seen);
  const hasUnread = unreadCount > 0;

  // Kad broj padne jer je posao odrađen, zapamćeni nivo se spušta za njim.
  // Bez toga bi prag ostao previsok pa nove stavke ne bi svetlele.
  useEffect(() => {
    const uskladjen = reconcileSeen(items, seen);
    if (uskladjen !== seen) persist(uskladjen);
    // Zavisimo samo od brojeva koji stižu sa servera.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [items]);

  useEffect(() => {
    function onClick(e: MouseEvent) {
      if (!ref.current?.contains(e.target as Node)) setOpen(false);
    }
    if (open) document.addEventListener("mousedown", onClick);
    return () => document.removeEventListener("mousedown", onClick);
  }, [open]);

  function markSeen(item: AlertItem) {
    const sledeci = markSeenState(item, seen);
    if (sledeci !== seen) persist(sledeci);
  }

  function markAllSeen() {
    // Sve stavke odjednom — ranije se upisivalo redom po adresi, pa je
    // poslednja gazila prethodnu i broj se nikad nije ispraznio.
    persist(markAllSeenState(items, seen));
  }

  return (
    <div ref={ref} className="relative">
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        aria-label={`Notifikacije: ${unreadCount} neotvorenih`}
        aria-expanded={open}
        className="relative flex h-10 w-10 items-center justify-center rounded-full border border-border bg-white text-foreground transition hover:border-primary/40 hover:text-primary"
      >
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
          <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
          <path d="M13.73 21a2 2 0 0 1-3.46 0" />
        </svg>
        {hasUnread && (
          <span className="absolute -right-1 -top-1 flex h-5 min-w-5 items-center justify-center rounded-full bg-rose-500 px-1 text-[0.65rem] font-bold text-white shadow-sm">
            {unreadCount > 99 ? "99+" : unreadCount}
          </span>
        )}
      </button>

      {open && (
        <div className="absolute right-0 top-12 z-50 w-80 overflow-hidden rounded-2xl border border-border bg-white shadow-[0_24px_60px_rgba(12,24,40,0.18)]">
          <div className="flex items-center justify-between gap-2 border-b border-border px-4 py-3">
            <p className="text-[0.65rem] font-extrabold uppercase tracking-[0.18em] text-muted-foreground">
              Šta čeka tvoju akciju
            </p>
            {hasUnread && (
              <button
                type="button"
                onClick={markAllSeen}
                className="text-[0.65rem] font-bold uppercase tracking-[0.1em] text-primary transition hover:underline"
              >
                Označi sve
              </button>
            )}
          </div>

          {visible.length === 0 ? (
            <div className="px-4 py-6 text-center text-sm text-muted-foreground">
              <span className="text-2xl">✨</span>
              <p className="mt-2 font-semibold text-foreground">Sve je pod kontrolom</p>
              <p className="mt-1 text-xs">Nema otvorenih akcija u ovom trenutku.</p>
            </div>
          ) : (
            <ul className="divide-y divide-border">
              {visible.map((item) => {
                const unread = isAlertUnread(item, seen);
                const dotClass =
                  item.tone === "rose" ? "bg-rose-500" : item.tone === "amber" ? "bg-amber-500" : "bg-sky-500";
                return (
                  <li key={item.id}>
                    <Link
                      href={item.href}
                      onClick={() => {
                        markSeen(item);
                        setOpen(false);
                      }}
                      className={`flex items-center justify-between gap-3 px-4 py-3 transition hover:bg-zinc-50 ${
                        unread ? "" : "opacity-55"
                      }`}
                    >
                      <span className="flex items-center gap-2.5 text-sm text-foreground">
                        <span
                          className={`inline-block h-2 w-2 rounded-full ${
                            unread ? dotClass : "border border-zinc-300 bg-transparent"
                          }`}
                        />
                        <span className={unread ? "font-semibold" : ""}>{item.label}</span>
                      </span>
                      <span
                        className={`rounded-full px-2 py-0.5 text-xs font-bold ${
                          unread ? "bg-rose-50 text-rose-600" : "bg-zinc-100 text-foreground"
                        }`}
                      >
                        {item.count}
                      </span>
                    </Link>
                  </li>
                );
              })}
            </ul>
          )}

          <div className="border-t border-border bg-zinc-50 px-4 py-2 text-center">
            <Link
              href="/admin/aktivnosti"
              onClick={() => setOpen(false)}
              className="text-xs font-semibold text-primary hover:underline"
            >
              Sve aktivnosti →
            </Link>
          </div>
        </div>
      )}
    </div>
  );
}