"use client";

import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import {
  channelCachedPages,
  downloadChannelOffline,
  evictChannelOffline,
  isPinned,
  swSupported,
} from "../lib/offlineCache";
import {
  buildChannelIndex,
  dropChannelIndex,
  searchChannel,
  workerSupported,
  type IndexHit,
} from "yt-dlp-transcript-common/components/searchIndexWorkerClient";
import { inTrackLabel } from "yt-dlp-transcript-common/lib/captionTracks";

export type OfflineChannel = { slug: string; name: string };

type ChannelState = {
  download: "idle" | "downloading" | "cached" | "error";
  done: number;
  total: number;
  // Worker FlexSearch index state.
  index: "none" | "building" | "ready" | "error";
  idxDone: number;
  idxTotal: number;
  docCount: number;
};

const DEFAULT: ChannelState = {
  download: "idle",
  done: 0,
  total: 0,
  index: "none",
  idxDone: 0,
  idxTotal: 0,
  docCount: 0,
};

function useOnline(): boolean {
  const [online, setOnline] = useState(true);
  useEffect(() => {
    const set = () => setOnline(navigator.onLine);
    set();
    window.addEventListener("online", set);
    window.addEventListener("offline", set);
    return () => {
      window.removeEventListener("online", set);
      window.removeEventListener("offline", set);
    };
  }, []);
  return online;
}

export function OfflineManager({ channels }: { channels: OfflineChannel[] }) {
  const online = useOnline();
  const [supported, setSupported] = useState(true);
  const [hasWorker, setHasWorker] = useState(false);
  const [states, setStates] = useState<Record<string, ChannelState>>({});

  const setState = useCallback((slug: string, patch: Partial<ChannelState>) => {
    setStates((prev) => {
      const base = prev[slug] ?? DEFAULT;
      return { ...prev, [slug]: { ...base, ...patch } };
    });
  }, []);

  useEffect(() => {
    if (!swSupported()) {
      setSupported(false);
      return;
    }
    setHasWorker(workerSupported());
    let cancelled = false;
    (async () => {
      for (const c of channels) {
        if (!isPinned("", c.slug)) continue;
        const cached = await channelCachedPages("", c.slug);
        if (!cancelled && cached > 0) {
          setState(c.slug, { download: "cached", done: cached, total: cached });
        }
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [channels, setState]);

  async function download(slug: string) {
    setState(slug, { download: "downloading", done: 0, total: 0 });
    const ok = await downloadChannelOffline("", slug, ({ done, total }) =>
      setState(slug, { download: "downloading", done, total }),
    ).catch(() => false);
    setState(slug, { download: ok ? "cached" : "error" });
  }

  async function remove(slug: string) {
    await evictChannelOffline("", slug);
    await dropChannelIndex(slug).catch(() => {});
    setState(slug, { ...DEFAULT });
  }

  async function buildIndex(slug: string) {
    setState(slug, { index: "building", idxDone: 0, idxTotal: 0 });
    try {
      const docCount = await buildChannelIndex(slug, (done, total) =>
        setState(slug, { index: "building", idxDone: done, idxTotal: total }),
      );
      setState(slug, { index: "ready", docCount });
    } catch {
      setState(slug, { index: "error" });
    }
  }

  const indexedSlugs = useMemo(
    () =>
      channels
        .filter((c) => states[c.slug]?.index === "ready")
        .map((c) => c.slug),
    [channels, states],
  );
  const nameBySlug = useMemo(() => {
    const m = new Map<string, string>();
    for (const c of channels) m.set(c.slug, c.name);
    return m;
  }, [channels]);

  if (!supported) {
    return (
      <div
        role="status"
        className="rounded-md border border-border bg-muted px-3 py-2 text-sm text-muted-foreground"
      >
        Offline downloads aren&apos;t available in this browser (no service
        worker support). Search still works while you&apos;re online.
      </div>
    );
  }

  return (
    <div className="flex flex-col gap-4">
      <div
        role="status"
        aria-label="connection status"
        className="flex items-center gap-2 text-xs font-mono uppercase tracking-[0.14em] text-muted-foreground"
      >
        <span
          aria-hidden="true"
          className={
            "inline-block h-2 w-2 rounded-full " +
            (online ? "bg-brand" : "bg-destructive")
          }
        />
        {online ? "Online" : "Offline"}
      </div>

      {hasWorker && indexedSlugs.length > 0 && (
        <OfflineSearch indexedSlugs={indexedSlugs} nameBySlug={nameBySlug} />
      )}

      {channels.length === 0 ? (
        <p className="text-sm text-muted-foreground">
          This site has no channels.
        </p>
      ) : (
        <ul className="flex flex-col divide-y divide-border rounded-lg border border-border">
          {channels.map((c) => {
            const st = states[c.slug] ?? DEFAULT;
            return (
              <li
                key={c.slug}
                aria-label={`offline ${c.slug}`}
                className="flex flex-wrap items-center gap-x-3 gap-y-2 px-4 py-3"
              >
                <span className="min-w-0 flex-1 truncate font-medium text-foreground">
                  {c.name}
                </span>

                {st.download === "cached" && (
                  <span
                    aria-label={`${c.slug} available offline`}
                    className="rounded-full border border-brand/30 bg-brand-soft px-2 py-0.5 text-xs text-brand-strong"
                  >
                    Available offline
                  </span>
                )}
                {st.index === "ready" && (
                  <span
                    aria-label={`${c.slug} indexed`}
                    className="rounded-full border border-border bg-muted px-2 py-0.5 text-xs text-muted-foreground"
                  >
                    Indexed · {st.docCount.toLocaleString()}
                  </span>
                )}
                {(st.download === "error" || st.index === "error") && (
                  <span className="text-xs text-destructive">
                    {st.index === "error" ? "Index failed" : "Download failed"}
                  </span>
                )}
                {st.download === "downloading" && (
                  <span className="font-mono text-xs tabular-nums text-muted-foreground">
                    {st.total > 0
                      ? `${Math.round((st.done / st.total) * 100)}%`
                      : "starting…"}
                  </span>
                )}
                {st.index === "building" && (
                  <span className="font-mono text-xs tabular-nums text-muted-foreground">
                    indexing{" "}
                    {st.idxTotal > 0
                      ? `${Math.round((st.idxDone / st.idxTotal) * 100)}%`
                      : "…"}
                  </span>
                )}

                {hasWorker && st.index !== "ready" && (
                  <button
                    type="button"
                    disabled={st.index === "building" || !online}
                    onClick={() => buildIndex(c.slug)}
                    aria-label={`build search index for ${c.slug}`}
                    title={
                      !online ? "Reconnect to build the index" : undefined
                    }
                    className="min-h-9 rounded-md border border-border px-2.5 py-1 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground hover:bg-muted disabled:opacity-50"
                  >
                    {st.index === "building" ? "Indexing…" : "Build index"}
                  </button>
                )}

                {st.download === "cached" ? (
                  <button
                    type="button"
                    onClick={() => remove(c.slug)}
                    aria-label={`remove offline copy of ${c.slug}`}
                    className="min-h-9 rounded-md border border-border px-2.5 py-1 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground hover:bg-muted"
                  >
                    Remove
                  </button>
                ) : (
                  <button
                    type="button"
                    disabled={st.download === "downloading" || !online}
                    onClick={() => download(c.slug)}
                    aria-label={`download ${c.slug} for offline`}
                    title={!online ? "Reconnect to download" : undefined}
                    className="min-h-9 rounded-md border border-brand/30 bg-brand-soft px-2.5 py-1 text-xs font-medium text-brand-strong transition-colors hover:bg-brand/15 disabled:opacity-50"
                  >
                    {st.download === "downloading" ? "Downloading…" : "Download"}
                  </button>
                )}
              </li>
            );
          })}
        </ul>
      )}
    </div>
  );
}

// Instant word-search across the channels whose FlexSearch index has been built
// in the worker. Runs entirely off the main thread and works offline once the
// channel's shards are cached.
function OfflineSearch({
  indexedSlugs,
  nameBySlug,
}: {
  indexedSlugs: string[];
  nameBySlug: Map<string, string>;
}) {
  const [term, setTerm] = useState("");
  const [hits, setHits] = useState<{ channel: string; hit: IndexHit }[]>([]);
  const [searching, setSearching] = useState(false);
  const runId = useRef(0);

  useEffect(() => {
    const q = term.trim();
    if (q.length < 2) {
      setHits([]);
      return;
    }
    const id = ++runId.current;
    setSearching(true);
    const timer = setTimeout(async () => {
      const perChannel = await Promise.all(
        indexedSlugs.map((slug) =>
          searchChannel(slug, q, 20)
            .then((hs) => hs.map((hit) => ({ channel: slug, hit })))
            .catch(() => []),
        ),
      );
      if (id !== runId.current) return; // a newer query superseded this one
      setHits(perChannel.flat().slice(0, 40));
      setSearching(false);
    }, 180);
    return () => clearTimeout(timer);
  }, [term, indexedSlugs]);

  return (
    <div className="flex flex-col gap-2 rounded-lg border border-border bg-card p-4">
      <label className="flex flex-col gap-1">
        <span className="font-mono text-[11px] uppercase tracking-[0.14em] text-muted-foreground">
          Offline search · {indexedSlugs.length} channel
          {indexedSlugs.length === 1 ? "" : "s"} indexed
        </span>
        <input
          type="search"
          value={term}
          onChange={(e) => setTerm(e.target.value)}
          aria-label="offline search"
          placeholder="Search indexed transcripts…"
          className="h-11 rounded-md border border-input bg-background px-3 py-2 text-base text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring sm:h-9 sm:text-sm"
        />
      </label>
      {term.trim().length >= 2 && (
        <div
          aria-label="offline search results"
          className="flex flex-col gap-1 text-sm"
        >
          {searching && hits.length === 0 ? (
            <p className="text-muted-foreground">Searching…</p>
          ) : hits.length === 0 ? (
            <p className="text-muted-foreground">No matches.</p>
          ) : (
            <ul className="flex flex-col gap-1">
              {hits.map(({ channel, hit }, i) => (
                <li
                  key={`${channel}-${hit.slug}-${hit.start ?? i}-${i}`}
                  className="flex flex-col rounded-md px-2 py-1 hover:bg-muted"
                >
                  <span className="truncate text-foreground">{hit.text}</span>
                  <span className="font-mono text-[11px] text-muted-foreground">
                    {nameBySlug.get(channel) ?? channel} · {hit.slug}
                    {typeof hit.start === "number"
                      ? ` · ${formatTime(hit.start)}`
                      : ""}
                    {hit.track ? ` · ${inTrackLabel(hit.track)}` : ""}
                  </span>
                </li>
              ))}
            </ul>
          )}
        </div>
      )}
    </div>
  );
}

function formatTime(sec: number): string {
  const s = Math.max(0, Math.floor(sec));
  const m = Math.floor(s / 60);
  const r = s % 60;
  return `${m}:${String(r).padStart(2, "0")}`;
}