"use client";

import type { WatchlistItem } from "@dci/core";
import { Bookmark, BookmarkCheck, Loader2 } from "lucide-react";
import Link from "next/link";
import { useCallback, useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import { cn } from "@/components/ui/cn";
import { clientApiBase } from "@/lib/api";
import { routes } from "@/lib/routes";

export type WatchEntityType = WatchlistItem["entityType"];

interface Props {
  entityType: WatchEntityType;
  slug: string;
  entityId?: string;
  name: string;
  size?: "xs" | "sm" | "md";
  className?: string;
  /** compact icon-only rendering (tables) */
  compact?: boolean;
}

interface Envelope<T> {
  data: T;
}

async function readJson<T>(res: Response): Promise<T | null> {
  try {
    const j = (await res.json()) as Envelope<T> | T;
    return j && typeof j === "object" && "data" in (j as object) ? (j as Envelope<T>).data : (j as T);
  } catch {
    return null;
  }
}

/** Module-level cache of the watchlist so several buttons on a page share one GET. */
let cache: Promise<WatchlistItem[]> | null = null;
const listeners = new Set<() => void>();
function invalidate() {
  cache = null;
  for (const l of listeners) l();
}
function loadList(): Promise<WatchlistItem[]> {
  if (!cache) {
    cache = fetch(`${clientApiBase()}/watchlist`, { credentials: "include", headers: { accept: "application/json" } })
      .then(async (r) => (r.ok ? ((await readJson<WatchlistItem[]>(r)) ?? []) : []))
      .catch(() => []);
  }
  return cache;
}

/**
 * Follow / unfollow an operator, market, country, project or facility. State lives in the private,
 * cookie-scoped watchlist (POST / DELETE /api/v1/watchlist, credentials included). No account needed.
 */
export function WatchButton({ entityType, slug, entityId, name, size = "sm", className, compact }: Props) {
  const [item, setItem] = useState<WatchlistItem | null | undefined>(undefined);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const refresh = useCallback(() => {
    void loadList().then((list) => setItem(list.find((w) => w.entityType === entityType && (w.slug === slug || (entityId && w.entityId === entityId))) ?? null));
  }, [entityType, slug, entityId]);

  useEffect(() => {
    refresh();
    listeners.add(refresh);
    return () => {
      listeners.delete(refresh);
    };
  }, [refresh]);

  const toggle = async () => {
    if (busy) return;
    setBusy(true);
    setError(null);
    try {
      if (item) {
        const r = await fetch(`${clientApiBase()}/watchlist/${encodeURIComponent(item.id)}`, { method: "DELETE", credentials: "include" });
        if (!r.ok && r.status !== 404) throw new Error(`HTTP ${r.status}`);
      } else {
        const r = await fetch(`${clientApiBase()}/watchlist`, { method: "POST", credentials: "include", headers: { "content-type": "application/json", accept: "application/json" }, body: JSON.stringify({ entityType, slug, ...(entityId ? { entityId } : {}) }) });
        if (r.status === 409) throw new Error("watchlist full (200 items)");
        if (!r.ok) throw new Error(`HTTP ${r.status}`);
      }
      invalidate();
    } catch (e) {
      setError(e instanceof Error ? e.message : "failed");
    } finally {
      setBusy(false);
    }
  };

  const watching = Boolean(item);
  const label = watching ? `Stop watching ${name}` : `Watch ${name}`;
  return (
    <span className={cn("inline-flex items-center gap-2", className)}>
      <Button size={size} variant={watching ? "primary" : "secondary"} onClick={() => void toggle()} disabled={busy || item === undefined} aria-pressed={watching} aria-label={label} title={label}>
        {busy ? <Loader2 className="size-3.5 animate-spin" aria-hidden /> : watching ? <BookmarkCheck className="size-3.5" strokeWidth={1.75} aria-hidden /> : <Bookmark className="size-3.5" strokeWidth={1.75} aria-hidden />}
        {!compact && (watching ? "Watching" : "Watch")}
      </Button>
      {watching && !compact && (
        <Link href={routes.watchlist()} className="hidden text-[11.5px] text-ink-3 hover:text-ink sm:inline">
          Watchlist →
        </Link>
      )}
      {error && <span className="text-[11px] text-danger">{error}</span>}
    </span>
  );
}