"use client";

import type { EventDTO, WatchlistItem } from "@dci/core";
import { RefreshCw } from "lucide-react";
import Link from "next/link";
import { useCallback, useEffect, useState } from "react";
import { EventList } from "@/components/event-list";
import { WatchButton } from "@/components/intelligence/watch-button";
import { Button } from "@/components/ui/button";
import { Metric, MetricCell, MetricRow } from "@/components/ui/metric";
import { SkeletonRows } from "@/components/ui/skeleton";
import { EmptyState, ErrorState } from "@/components/ui/states";
import { clientApiBase } from "@/lib/api";
import { fmtInt } from "@/lib/format";
import { ENTITY_TYPE_LABEL } from "@/lib/labels";
import { entityHref, routes } from "@/lib/routes";

const PER_PAGE = 50;
const TYPE_ORDER: WatchlistItem["entityType"][] = ["operator", "metro", "country", "project", "facility"];

/** Cookie-scoped call (credentials included) — apiGet has no credentials option. */
async function get<T>(path: string): Promise<{ ok: boolean; data: T | null; total: number; error: string | null }> {
  try {
    const res = await fetch(`${clientApiBase()}${path}`, { credentials: "include", headers: { accept: "application/json" }, cache: "no-store" });
    if (!res.ok) return { ok: false, data: null, total: 0, error: `HTTP ${res.status}` };
    const j = (await res.json()) as { data: T; meta?: { total?: number } };
    return { ok: true, data: j.data, total: j.meta?.total ?? 0, error: null };
  } catch (e) {
    return { ok: false, data: null, total: 0, error: e instanceof Error ? e.message : "network error" };
  }
}

interface Fetched {
  ok: boolean;
  items: WatchlistItem[];
  feed: EventDTO[];
  feedTotal: number;
  error: string | null;
}

/**
 * The watchlist is keyed by an httpOnly cookie on the API origin, so it is read in the browser with
 * credentials — the server never sees it. Items + feed load together; unfollow refreshes both.
 */
async function fetchAll(): Promise<Fetched> {
  const [a, b] = await Promise.all([get<WatchlistItem[]>("/watchlist"), get<EventDTO[]>(`/watchlist/feed?per_page=${PER_PAGE}`)]);
  return { ok: a.ok, items: a.data ?? [], feed: b.data ?? [], feedTotal: b.total || (b.data?.length ?? 0), error: a.ok ? null : a.error };
}

export function WatchlistView() {
  const [state, setState] = useState<Fetched | null>(null);
  const [more, setMore] = useState(false);
  const [tick, setTick] = useState(0);
  const load = useCallback(() => setTick((t) => t + 1), []);

  useEffect(() => {
    let alive = true;
    void fetchAll().then((s) => {
      if (alive) setState(s);
    });
    return () => {
      alive = false;
    };
  }, [tick]);

  const loadMore = async () => {
    if (!state) return;
    setMore(true);
    const page = Math.floor(state.feed.length / PER_PAGE) + 1;
    const r = await get<EventDTO[]>(`/watchlist/feed?page=${page}&per_page=${PER_PAGE}`);
    setMore(false);
    if (r.ok && Array.isArray(r.data)) setState({ ...state, feed: [...state.feed, ...r.data.filter((e) => !state.feed.some((x) => x.id === e.id))] });
  };

  if (!state) return <SkeletonRows rows={6} />;
  if (!state.ok) return <ErrorState compact title="Watchlist unavailable" description="The API did not respond to the watchlist call. Cookies must be allowed for the API origin." detail={state.error ?? undefined} action={<Button size="sm" onClick={load}>Retry</Button>} />;

  const groups = TYPE_ORDER.map((t) => ({ type: t, items: state.items.filter((i) => i.entityType === t) })).filter((g) => g.items.length);

  if (state.items.length === 0) {
    return (
      <EmptyState
        title="Nothing watched yet"
        description="Press “Watch” on an operator, market, country or project page and its changes will appear here. The list is private and cookie-based — no account, up to 200 items on this browser."
        action={
          <div className="flex flex-wrap justify-center gap-2">
            <Button size="sm" href={routes.operators()}>
              Operators
            </Button>
            <Button size="sm" href={routes.markets()}>
              Markets
            </Button>
            <Button size="sm" href={routes.countries()}>
              Countries
            </Button>
            <Button size="sm" href={routes.projects()}>
              Projects
            </Button>
          </div>
        }
      />
    );
  }

  return (
    <div className="flex flex-col gap-8">
      <MetricRow cols={3}>
        <MetricCell>
          <Metric size="sm" value={fmtInt(state.items.length)} label="Watched entities" note="of 200 max" />
        </MetricCell>
        <MetricCell>
          <Metric size="sm" value={fmtInt(groups.length)} label="Entity types" />
        </MetricCell>
        <MetricCell>
          <Metric size="sm" value={fmtInt(state.feedTotal)} label="Changes in the feed" note="one row per announcement" />
        </MetricCell>
      </MetricRow>

      <section aria-labelledby="watched-h">
        <div className="mb-2 flex items-baseline justify-between gap-3">
          <h2 id="watched-h" className="text-[15px] font-semibold text-ink">
            Watched
          </h2>
          <Button size="xs" variant="ghost" onClick={load} aria-label="Refresh watchlist">
            <RefreshCw className="size-3.5" aria-hidden /> Refresh
          </Button>
        </div>
        <div className="grid gap-4 md:grid-cols-2">
          {groups.map((g) => (
            <div key={g.type} className="rounded-sm border border-hair bg-surface">
              <div className="flex items-baseline justify-between border-b border-hair px-3 py-2">
                <h3 className="text-[13px] font-semibold text-ink">{ENTITY_TYPE_LABEL[g.type] ?? g.type}</h3>
                <span className="figure text-[11.5px] text-ink-3">{fmtInt(g.items.length)}</span>
              </div>
              <ul className="divide-y divide-hair">
                {g.items.map((it) => (
                  <li key={it.id} className="flex items-center justify-between gap-3 px-3 py-1.5">
                    <Link href={entityHref(it.entityType, it.slug, it.name)} className="min-w-0 truncate text-[13px] font-medium text-ink hover:text-accent hover:underline">
                      {it.name}
                    </Link>
                    <WatchButton entityType={it.entityType} slug={it.slug} entityId={it.entityId} name={it.name} compact size="xs" />
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </section>

      <section aria-labelledby="feed-h">
        <div className="mb-2 flex items-baseline justify-between gap-3">
          <h2 id="feed-h" className="text-[15px] font-semibold text-ink">
            Watchlist feed
          </h2>
          <span className="text-[12px] text-ink-3">Newest first · deduplicated per announcement</span>
        </div>
        <EventList events={state.feed} groupByDay emptyTitle="No change yet for the watched entities" emptyDescription="Changes appear as connectors detect them." />
        {state.feed.length > 0 && state.feed.length < state.feedTotal && (
          <div className="flex justify-center py-4">
            <Button onClick={() => void loadMore()} disabled={more} size="md">
              <RefreshCw className="size-3.5" aria-hidden /> {more ? "Loading…" : "Load more"}
            </Button>
          </div>
        )}
      </section>
    </div>
  );
}