"use client";

// Hub offline manager: save an archive's channels for offline use, grouped by
// source site. This is the hub consumer for the origin-aware offline API — each
// download/evict/status call is scoped to (origin, slug) so channels from
// different archives never collide. Kept lean (no per-channel offline search
// index) to stay clear of the shipped single-site OfflineManager.

import { useEffect, useState } from "react";
import { splitId } from "yt-dlp-transcript-common/components/originId";
import { useSearchData } from "yt-dlp-transcript-common/components/SearchDataContext";
import {
  channelCachedPages,
  downloadChannelOffline,
  evictChannelOffline,
  isPinned,
  swSupported,
} from "../../lib/offlineCache";

type DlState = {
  status: "idle" | "downloading" | "cached" | "error";
  done: number;
  total: number;
};
const IDLE: DlState = { status: "idle", done: 0, total: 0 };

export default function HubOfflineManager() {
  const { channels, groups } = useSearchData();
  const [states, setStates] = useState<Record<string, DlState>>({});
  const [supported, setSupported] = useState(true);

  const set = (key: string, patch: Partial<DlState>) =>
    setStates((prev) => ({ ...prev, [key]: { ...(prev[key] ?? IDLE), ...patch } }));

  // Reflect already-pinned/cached channels on mount.
  useEffect(() => {
    if (!swSupported()) {
      setSupported(false);
      return;
    }
    let cancelled = false;
    (async () => {
      for (const c of channels) {
        const { origin, slug } = splitId(c.key);
        if (!isPinned(origin, slug)) continue;
        const cached = await channelCachedPages(origin, slug);
        if (!cancelled && cached > 0) {
          set(c.key, { status: "cached", done: cached, total: cached });
        }
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [channels]);

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

  async function remove(key: string) {
    const { origin, slug } = splitId(key);
    await evictChannelOffline(origin, slug);
    set(key, { ...IDLE });
  }

  if (!supported || channels.length === 0) return null;

  // Group channels by their origin (= the group id in hub mode).
  const byGroup = new Map<string, typeof channels>();
  for (const c of channels) {
    const list = byGroup.get(c.groupId) ?? [];
    list.push(c);
    byGroup.set(c.groupId, list);
  }

  return (
    <details className="rounded-lg border border-border bg-card/40">
      <summary className="cursor-pointer select-none px-4 py-2 text-sm font-medium text-foreground">
        Save archives for offline
      </summary>
      <div className="flex flex-col gap-4 px-4 pb-4 pt-1">
        <p className="text-xs text-muted-foreground">
          Download a channel to read its transcripts without a connection. Saved
          channels stay on this device until you remove them.
        </p>
        {groups
          .filter((g) => byGroup.has(g.id))
          .map((g) => (
            <div key={g.id} className="flex flex-col gap-1.5">
              <div className="flex items-center gap-2">
                {g.accent && (
                  <span
                    aria-hidden="true"
                    className="inline-block size-2 shrink-0 rounded-full"
                    style={{ background: g.accent }}
                  />
                )}
                <span className="font-mono text-xs uppercase tracking-[0.12em] text-muted-foreground">
                  {g.name}
                </span>
              </div>
              <ul className="flex flex-col gap-1 list-none">
                {(byGroup.get(g.id) ?? []).map((c) => {
                  const st = states[c.key] ?? IDLE;
                  return (
                    <li
                      key={c.key}
                      className="flex flex-wrap items-center justify-between gap-x-3 gap-y-1 rounded border border-border/60 px-3 py-1.5 text-sm"
                    >
                      <span className="truncate text-foreground">{c.name}</span>
                      {st.status === "downloading" ? (
                        <span className="shrink-0 font-mono text-xs text-muted-foreground tabular-nums">
                          {st.total ? `${st.done}/${st.total}` : "…"}
                        </span>
                      ) : st.status === "cached" ? (
                        <button
                          type="button"
                          onClick={() => remove(c.key)}
                          className="shrink-0 rounded border border-success/40 bg-success-soft px-2 py-0.5 text-xs text-success transition-colors hover:bg-success/15"
                        >
                          Saved · Remove
                        </button>
                      ) : (
                        <button
                          type="button"
                          onClick={() => download(c.key)}
                          className="shrink-0 rounded border border-brand/30 bg-brand-soft px-2 py-0.5 text-xs font-medium text-brand-strong transition-colors hover:bg-brand/15"
                        >
                          {st.status === "error" ? "Retry" : "Save"}
                        </button>
                      )}
                    </li>
                  );
                })}
              </ul>
            </div>
          ))}
      </div>
    </details>
  );
}