"use client";

import { Plus, Trash2, X } from "lucide-react";
import { useCallback, useEffect, useMemo, useState } from "react";
import { COUNTRIES, EVENT_TYPES } from "@websensor/core/client";
import { EventRow } from "@/components/event-row";
import { LiveDot } from "@/components/live-feed";
import { Chip, Empty, Flag, Panel, SkeletonRows, type Tone } from "@/components/ui";
import { liveToEvent, type EventItem, type LiveEvent, type SearchResult, type Watchlist } from "@/lib/api";
import { CHANNEL_KEYS, GROUP_LABELS, hostOf, typeLabel } from "@/lib/format";
import { ownerFetch, publicFetch } from "@/lib/owner";
import { useLive } from "@/lib/use-live";

type Kind = "entity" | "source" | "keyword" | "category" | "url" | "event_type" | "country" | "group";
type Item = { kind: Kind; value: string };

const KIND_TONE: Record<Kind, Tone> = { entity: "signal", source: "info", category: "ok", keyword: "default", url: "warn", event_type: "high", country: "default", group: "silent" };
const KIND_LABEL: Record<Kind, string> = { entity: "entity", source: "source", keyword: "keyword", category: "category", url: "url", event_type: "type", country: "country", group: "group" };

function itemLabel(i: { kind: string; value: string }): string {
  switch (i.kind) {
    case "entity":
      return i.value.replace(/^(org|prd|ent)_/, "");
    case "url":
      return i.value.length > 48 ? `${hostOf(i.value)}…${i.value.slice(-18)}` : i.value;
    case "event_type":
      return EVENT_TYPES[i.value]?.label ?? typeLabel(i.value);
    case "group":
      return GROUP_LABELS[i.value] ?? i.value;
    case "country":
      return COUNTRIES[i.value]?.name ?? i.value;
    default:
      return i.value;
  }
}

export function Watchlists() {
  const [lists, setLists] = useState<Watchlist[] | null>(null);
  const [active, setActive] = useState<string | null>(null);
  /** Keyed by watchlist id: switching lists shows a loading state without a synchronous reset. */
  const [feed, setFeed] = useState<{ id: string; items: EventItem[] } | null>(null);
  const events = feed && feed.id === active ? feed.items : null;
  const [error, setError] = useState<string | null>(null);
  const [name, setName] = useState("");
  const [q, setQ] = useState("");
  const [url, setUrl] = useState("");
  const [results, setResults] = useState<SearchResult | null>(null);
  const [typeSel, setTypeSel] = useState("");
  const [countrySel, setCountrySel] = useState("");

  const load = useCallback(
    () =>
      ownerFetch<{ items: Watchlist[] }>("/api/v1/watchlists")
        .then((r) => {
          setLists(r.items);
          setActive((cur) => cur ?? r.items[0]?.id ?? null);
        })
        .catch((e: Error) => {
          setError(e.message);
          setLists([]);
        }),
    [],
  );
  useEffect(() => {
    void load();
  }, [load]);

  useEffect(() => {
    if (!active) return;
    const id = active;
    let cancelled = false;
    ownerFetch<{ items: EventItem[] }>(`/api/v1/watchlists/${id}/events?limit=60`)
      .then((r) => {
        if (!cancelled) setFeed({ id, items: r.items });
      })
      .catch(() => {
        if (!cancelled) setFeed({ id, items: [] });
      });
    return () => {
      cancelled = true;
    };
  }, [active, lists]);

  useEffect(() => {
    const t = setTimeout(() => {
      if (q.trim().length < 2) {
        setResults(null);
        return;
      }
      publicFetch<SearchResult>(`/api/v1/search?q=${encodeURIComponent(q.trim())}&limit=8`).then(setResults).catch(() => setResults(null));
    }, 250);
    return () => clearTimeout(t);
  }, [q]);

  const channels = useMemo(() => (active ? [`watchlist:${active}`] : []), [active]);
  const status = useLive(channels, (e: LiveEvent) => setFeed((prev) => (!prev || prev.id !== active || prev.items.some((x) => x.id === e.id) ? prev : { id: prev.id, items: [liveToEvent(e), ...prev.items].slice(0, 200) })));

  const current = lists?.find((l) => l.id === active) ?? null;

  const create = async (): Promise<void> => {
    try {
      const wl = await ownerFetch<Watchlist>("/api/v1/watchlists", { method: "POST", body: JSON.stringify({ name: name.trim() || "My watchlist", items: [] }) });
      setName("");
      await load();
      setActive(wl.id);
    } catch (e) {
      setError((e as Error).message);
    }
  };
  const remove = async (id: string): Promise<void> => {
    await ownerFetch(`/api/v1/watchlists/${id}`, { method: "DELETE" }).catch((e: Error) => setError(e.message));
    setActive(null);
    await load();
  };
  const setItems = async (items: Item[]): Promise<void> => {
    if (!current) return;
    try {
      await ownerFetch(`/api/v1/watchlists/${current.id}`, { method: "PUT", body: JSON.stringify({ items: items.map((i) => ({ kind: i.kind, value: i.value })) }) });
      setError(null);
    } catch (e) {
      setError((e as Error).message);
    }
    await load();
  };
  const currentItems = (): Item[] => (current?.items ?? []).map((i) => ({ kind: i.kind as Kind, value: i.value }));
  const add = (it: Item): void => {
    if (!current) return;
    const items = currentItems();
    if (!items.some((i) => i.kind === it.kind && i.value === it.value)) void setItems([...items, it]);
    setQ("");
  };
  const del = (it: { kind: string; value: string }): void => {
    if (!current) return;
    void setItems(currentItems().filter((i) => !(i.kind === it.kind && i.value === it.value)));
  };
  const addUrl = (): void => {
    const v = url.trim();
    if (!/^https?:\/\//i.test(v)) {
      setError("URL must start with http:// or https://");
      return;
    }
    add({ kind: "url", value: v });
    setUrl("");
  };

  const selectCls = "h-8 min-w-0 flex-1 rounded-md border border-line bg-panel px-2 text-[12.5px]";
  const addBtn = "inline-flex h-8 shrink-0 items-center gap-1 rounded-md border border-line bg-panel-2 px-2 text-[12px] hover:border-line-strong disabled:opacity-50";

  return (
    <div className="grid gap-4 lg:grid-cols-[320px_minmax(0,1fr)]">
      <aside className="flex min-w-0 flex-col gap-4">
        <Panel title="Your watchlists" dense>
          {lists === null ? (
            <SkeletonRows rows={2} />
          ) : (
            <ul className="divide-y divide-line">
              {lists.map((l) => (
                <li key={l.id} className={`flex items-center justify-between gap-2 px-3 py-1.5 text-[13px] ${l.id === active ? "bg-panel-2" : ""}`}>
                  <button type="button" aria-pressed={l.id === active} onClick={() => setActive(l.id)} className="min-w-0 flex-1 truncate text-left hover:underline">
                    {l.name} <span className="font-mono text-[11px] text-fg-subtle">· {l.items.length}</span>
                  </button>
                  <button type="button" aria-label={`Delete watchlist ${l.name}`} onClick={() => remove(l.id)} className="text-fg-subtle hover:text-danger"><Trash2 className="size-3.5" /></button>
                </li>
              ))}
              {lists.length === 0 && <Empty>No watchlist yet — create one below.</Empty>}
            </ul>
          )}
          <form
            className="flex gap-1 border-t border-line p-2"
            onSubmit={(e) => {
              e.preventDefault();
              void create();
            }}
          >
            <input value={name} onChange={(e) => setName(e.target.value)} placeholder="New watchlist name" aria-label="New watchlist name" className={selectCls} />
            <button type="submit" className={addBtn}><Plus className="size-3.5" /> Add</button>
          </form>
          {error && <p className="px-3 pb-2 text-[11px] text-danger">{error}</p>}
        </Panel>

        {current && (
          <Panel title={<span>Items <span className="font-mono text-fg-subtle">{current.items.length}</span></span>}>
            <div className="mb-3 flex flex-wrap gap-1">
              {current.items.map((i) => (
                <Chip key={`${i.kind}:${i.value}`} tone={KIND_TONE[i.kind as Kind] ?? "default"} title={`${i.kind}: ${i.value}`}>
                  <span className="font-mono text-[9.5px] uppercase tracking-wider opacity-70">{KIND_LABEL[i.kind as Kind] ?? i.kind}</span>
                  {i.kind === "country" && <Flag code={i.value} />}
                  <span className="max-w-[14rem] truncate">{itemLabel(i)}</span>
                  <button type="button" aria-label={`Remove ${i.kind} ${i.value}`} onClick={() => del(i)} className="ml-0.5 hover:text-danger"><X className="size-3" /></button>
                </Chip>
              ))}
              {current.items.length === 0 && <span className="text-[12px] text-fg-subtle">Empty — add entities, sources, keywords, categories, URLs, event types, countries or groups.</span>}
            </div>

            <div className="flex flex-col gap-3 text-[12.5px]">
              <div>
                <div className="label mb-1">Entity · source · keyword</div>
                <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search entities / sources, or type a keyword…" aria-label="Search entities, sources or keyword" className="h-8 w-full rounded-md border border-line bg-panel px-2 text-[12.5px]" />
                {q.trim().length >= 2 && (
                  <div className="mt-1 max-h-64 overflow-auto rounded-md border border-line bg-panel text-[12.5px]">
                    <button type="button" onClick={() => add({ kind: "keyword", value: q.trim().toLowerCase() })} className="block w-full px-2 py-1.5 text-left hover:bg-panel-2"><span className="label mr-1 !text-[9.5px]">keyword</span> “{q.trim()}”</button>
                    {results?.entities.map((e) => (
                      <button key={e.id} type="button" onClick={() => add({ kind: "entity", value: e.id })} className="block w-full truncate px-2 py-1.5 text-left hover:bg-panel-2"><span className="label mr-1 !text-[9.5px] !text-signal">entity</span> {e.name} <span className="text-fg-subtle">{e.type}</span></button>
                    ))}
                    {results?.sources.map((s) => (
                      <button key={s.id} type="button" onClick={() => add({ kind: "source", value: s.id })} className="block w-full truncate px-2 py-1.5 text-left hover:bg-panel-2"><span className="label mr-1 !text-[9.5px] !text-info">source</span> {s.name} <span className="text-fg-subtle">{s.domain}</span></button>
                    ))}
                    {results && !results.entities.length && !results.sources.length && <div className="px-2 py-1.5 text-[11.5px] text-fg-subtle">No entity or source matches — add as a keyword.</div>}
                  </div>
                )}
              </div>

              <div>
                <div className="label mb-1">URL</div>
                <form
                  className="flex gap-1"
                  onSubmit={(e) => {
                    e.preventDefault();
                    addUrl();
                  }}
                >
                  <input type="url" value={url} onChange={(e) => setUrl(e.target.value)} placeholder="https://example.com/pricing" aria-label="URL to watch" className={`${selectCls} font-mono text-[12px]`} />
                  <button type="submit" disabled={!url.trim()} className={addBtn}><Plus className="size-3.5" /></button>
                </form>
                <p className="mt-1 text-[11px] text-fg-subtle">Matches events whose monitored URL equals this address. To watch a page WebSensor does not cover yet, create a <a href="/monitors" className="text-info hover:underline">custom monitor</a>.</p>
              </div>

              <div>
                <div className="label mb-1">Event type</div>
                <div className="flex gap-1">
                  <select value={typeSel} onChange={(e) => setTypeSel(e.target.value)} aria-label="Event type" className={selectCls}>
                    <option value="">Choose an event type…</option>
                    {Object.entries(EVENT_TYPES).map(([k, v]) => (
                      <option key={k} value={k}>{v.label}</option>
                    ))}
                  </select>
                  <button
                    type="button"
                    disabled={!typeSel}
                    onClick={() => {
                      if (typeSel) add({ kind: "event_type", value: typeSel });
                      setTypeSel("");
                    }}
                    className={addBtn}
                  >
                    <Plus className="size-3.5" />
                  </button>
                </div>
              </div>

              <div>
                <div className="label mb-1">Country</div>
                <div className="flex gap-1">
                  <select value={countrySel} onChange={(e) => setCountrySel(e.target.value)} aria-label="Country" className={selectCls}>
                    <option value="">Choose a country…</option>
                    {Object.entries(COUNTRIES).map(([code, c]) => (
                      <option key={code} value={code}>{c.flag} {c.name} ({code})</option>
                    ))}
                  </select>
                  <button
                    type="button"
                    disabled={!countrySel}
                    onClick={() => {
                      if (countrySel) add({ kind: "country", value: countrySel });
                      setCountrySel("");
                    }}
                    className={addBtn}
                  >
                    <Plus className="size-3.5" />
                  </button>
                </div>
              </div>

              <div>
                <div className="label mb-1">Group</div>
                <div className="flex flex-wrap gap-1">
                  {Object.entries(GROUP_LABELS).map(([k, v]) => {
                    const on = current.items.some((i) => i.kind === "group" && i.value === k);
                    return (
                      <button key={k} type="button" aria-pressed={on} disabled={on} onClick={() => add({ kind: "group", value: k })} className={`rounded-sm border px-1.5 py-px text-[10.5px] leading-4 ${on ? "border-silent/40 bg-silent-soft text-silent" : "border-line text-fg-muted hover:text-fg"}`}>
                        {on ? "" : "+ "}{v}
                      </button>
                    );
                  })}
                </div>
              </div>

              <div>
                <div className="label mb-1">Category</div>
                <div className="flex flex-wrap gap-1">
                  {CHANNEL_KEYS.map((c) => {
                    const on = current.items.some((i) => i.kind === "category" && i.value === c);
                    return (
                      <button key={c} type="button" aria-pressed={on} disabled={on} onClick={() => add({ kind: "category", value: c })} className={`rounded-sm border px-1.5 py-px text-[10.5px] leading-4 ${on ? "border-ok/40 bg-ok/10 text-ok" : "border-line text-fg-muted hover:text-fg"}`}>
                        {on ? "" : "+ "}{c}
                      </button>
                    );
                  })}
                </div>
              </div>
            </div>
          </Panel>
        )}
      </aside>

      <Panel title={<span className="flex items-center gap-3">{current ? current.name : "Events"} {active && <LiveDot status={status} />}</span>} dense>
        {!current ? (
          <Empty>{lists && lists.length === 0 ? "Create a watchlist to start following entities, sources, URLs, types, countries or groups." : "Select a watchlist."}</Empty>
        ) : events === null ? (
          <SkeletonRows rows={6} />
        ) : events.length ? (
          events.map((e) => <EventRow key={e.id} ev={e} showDate />)
        ) : (
          <Empty>{current.items.length === 0 ? "This watchlist is empty — add items on the left." : "No events match this watchlist yet — new ones will appear live."}</Empty>
        )}
      </Panel>
    </div>
  );
}