"use client";

// The social (posts) channel view: a minimal two-stage rail — Fetch → Index —
// instead of the six video stages and their 18 pathology buckets, none of which
// exist for an account that has no downloads, no audio and no transcripts.
// Its only failure surfaces are "the fetch failed" and "we need credentials",
// which is exactly what the state sidecar records.

import { useState, useTransition } from "react";
import {
  checkPostAvailabilityAction,
  connectForumSessionAction,
  fetchPostsAction,
  importForumPagesAction,
  setPostFetcherAction,
} from "../socialActions";
import type { ForumSessionStatus } from "yt-dlp-transcript-common/social/forumSession";

export type SocialChannelState = {
  postCount: number;
  shards: string[];
  lastFetchedAt?: string;
  lastFetchedCount?: number;
  lastError?: string;
  needsCookies?: boolean;
  fetcherLabel: string;
  handle: string;
  accountUrl?: string;
  // Which fetcher currently drives this channel, and every fetcher that could.
  fetcherId: string;
  availableFetchers: { id: string; label: string }[];
  // Deleted-post sweep state (the posts analogue of video availability).
  deletedCount: number;
  checkedCount: number;
  canCheckAvailability: boolean;
  // The older-posts backfill (a fetcher's `fetchOlder`): whether this fetcher
  // has one, and where it stands, as one line.
  canFetchOlder: boolean;
  olderStatus: string;
  // The channel's platform; "xenforo" is a forum thread.
  platform?: string;
  // A forum thread's browser session (its host's profile), when it is one.
  forumSession?: ForumSessionStatus;
};

export function SocialChannelPanel({
  slug,
  state,
}: {
  slug: string;
  state: SocialChannelState;
}) {
  const [pending, startTransition] = useTransition();
  const [fetcherId, setFetcherId] = useState(state.fetcherId);
  const [switchNote, setSwitchNote] = useState<string | null>(null);
  const [switchErr, setSwitchErr] = useState<string | null>(null);

  const switchFetcher = (next: string) =>
    startTransition(async () => {
      setSwitchNote(null);
      setSwitchErr(null);
      const res = await setPostFetcherAction(slug, next);
      if (res.ok) {
        setFetcherId(next);
        setSwitchNote("Fetcher updated — the next fetch uses it.");
      } else {
        setSwitchErr(res.error);
      }
    });

  const checkDeleted = () =>
    startTransition(async () => {
      const res = await checkPostAvailabilityAction(slug);
      if (res.ok) void res.stream.cancel();
    });

  const forum = state.platform === "xenforo";
  // A forum thread is read page by page, newest first: the cap on pages one
  // run reads (blank = walk back until already-archived posts, or page 1).
  const [pages, setPages] = useState("");
  const [forumNote, setForumNote] = useState<string | null>(null);
  const [forumErr, setForumErr] = useState<string | null>(null);
  const [importPath, setImportPath] = useState("");

  const connect = () =>
    startTransition(async () => {
      setForumNote(null);
      setForumErr(null);
      const res = await connectForumSessionAction(slug);
      if (res.ok) {
        setForumNote(
          res.record.cleared
            ? "Connected: the thread showed before the window closed. Fetch again."
            : "The window closed before a thread page showed; the profile kept what it had.",
        );
      } else {
        setForumErr(res.error);
      }
    });

  const importPages = () =>
    startTransition(async () => {
      setForumNote(null);
      setForumErr(null);
      const res = await importForumPagesAction(slug, importPath);
      if (res.ok) {
        void res.stream.cancel();
        setForumNote("Import queued — its log is on the jobs page.");
      } else {
        setForumErr(res.error);
      }
    });

  const run = (full: boolean, older = false) =>
    startTransition(async () => {
      const n = Number(pages);
      const res = await fetchPostsAction(
        slug,
        undefined,
        full,
        undefined,
        older || undefined,
        undefined,
        undefined,
        forum && pages.trim() && Number.isInteger(n) && n > 0 ? n : undefined,
      );
      // The job streams to the jobs page; nothing to consume here, but the
      // stream must be released or its buffered chunks leak.
      if (res.ok) void res.stream.cancel();
    });

  return (
    <div className="flex flex-col gap-4">
      <section
        data-social-panel=""
        className="rounded-lg border border-border bg-card p-4"
      >
        <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
          <h2 className="text-sm font-medium">Posts</h2>
          <span className="text-xs text-muted-foreground">
            {forum ? state.handle : `@${state.handle}`} · {state.fetcherLabel}
          </span>
        </div>

        <dl className="mt-3 grid grid-cols-2 gap-x-6 gap-y-1 text-sm sm:grid-cols-4">
          <Stat label="Archived posts" value={String(state.postCount)} />
          <Stat label="Month shards" value={String(state.shards.length)} />
          <Stat
            label="Deleted"
            value={
              state.checkedCount === 0
                ? "not checked"
                : `${state.deletedCount} of ${state.checkedCount} checked`
            }
          />
          <Stat
            label="Last fetch"
            value={
              state.lastFetchedAt
                ? new Date(state.lastFetchedAt).toLocaleString()
                : "never"
            }
          />
          <Stat
            label="Added last run"
            value={
              state.lastFetchedCount === undefined
                ? "—"
                : String(state.lastFetchedCount)
            }
          />
          {state.canFetchOlder && (
            <Stat label="Older posts" value={state.olderStatus} />
          )}
        </dl>

        {state.availableFetchers.length > 1 && (
          <label className="mt-4 flex flex-col gap-1 text-sm">
            <span className="font-medium">Scraping method</span>
            <select
              value={fetcherId}
              onChange={(e) => switchFetcher(e.target.value)}
              disabled={pending}
              aria-label="post fetcher"
              className="max-w-sm rounded border border-border bg-card px-2 py-1 text-sm"
            >
              {state.availableFetchers.map((f) => (
                <option key={f.id} value={f.id}>
                  {f.label}
                </option>
              ))}
            </select>
            <span className="text-xs text-muted-foreground">
              These reach different amounts of history. For X, the Nitter path
              needs no account at all; gallery-dl can go deeper but is rate-
              limited without credentials.
            </span>
          </label>
        )}
        {switchNote && (
          <p role="status" className="mt-2 text-xs text-success">
            {switchNote}
          </p>
        )}
        {switchErr && (
          <p role="alert" className="mt-2 text-xs text-destructive">
            {switchErr}
          </p>
        )}

        <div className="mt-4 flex flex-wrap items-center gap-2">
          {forum && (
            <label className="flex items-center gap-1 text-sm">
              <span>Latest</span>
              <input
                type="number"
                min={1}
                inputMode="numeric"
                value={pages}
                onChange={(e) => setPages(e.target.value)}
                placeholder="all"
                aria-label="pages to fetch"
                className="w-20 rounded border border-border bg-card px-2 py-1 text-sm"
              />
              <span>pages</span>
            </label>
          )}
          <button
            type="button"
            onClick={() => run(false)}
            disabled={pending}
            aria-label="fetch posts"
            className="rounded-md bg-primary px-3 py-1 text-sm font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50"
          >
            {pending ? "Fetching…" : "Fetch posts"}
          </button>
          <button
            type="button"
            onClick={checkDeleted}
            disabled={pending || !state.canCheckAvailability}
            aria-label="check deleted posts"
            title={
              state.canCheckAvailability
                ? "Check which archived posts have since been deleted at the source. Least-recently-checked first, so repeated runs sweep the whole archive."
                : "This scraping method has no per-post liveness probe — switch method to enable the sweep."
            }
            className="rounded-md border border-border px-3 py-1 text-sm hover:bg-muted disabled:opacity-50"
          >
            Check deleted posts
          </button>
          <button
            type="button"
            onClick={() => run(true)}
            disabled={pending}
            aria-label="refetch full history"
            title="Re-walk the account's whole history. Already-archived posts are deduped, so this repairs a gap rather than creating duplicates."
            className="rounded-md border border-border px-3 py-1 text-sm hover:bg-muted disabled:opacity-50"
          >
            Re-fetch full history
          </button>
          {state.canFetchOlder && (
            <button
              type="button"
              onClick={() => run(false, true)}
              disabled={pending}
              aria-label="fetch older posts"
              title="Walk back from the oldest archived post through search, a few months at a time, for posts older than the timeline reaches. Needs a login. Progress is saved as it goes; a later run continues it, and it says so once the history is done."
              className="rounded-md border border-border px-3 py-1 text-sm hover:bg-muted disabled:opacity-50"
            >
              Fetch older posts
            </button>
          )}
        </div>

        {/* The two failure surfaces a social channel actually has. */}
        {state.needsCookies && (
          <p
            role="status"
            className="mt-3 rounded border border-warning/40 bg-warning-soft px-3 py-2 text-xs"
          >
            {forum
              ? "Needs the forum session: the forum showed a check (or a login) the headless browser could not get past. Use Connect forum session below, clear it in the window, close it, and fetch again."
              : "Needs credentials: the fetcher could not authenticate. Configure cookies-from-browser for this channel (or globally) and re-run."}
          </p>
        )}
        {state.lastError && (
          <p
            role="alert"
            className="mt-3 rounded border border-destructive/30 bg-destructive-soft px-3 py-2 text-xs text-destructive"
          >
            Last fetch failed: {state.lastError}
          </p>
        )}

        {state.accountUrl && (
          <p className="mt-3 text-xs text-muted-foreground">
            Source:{" "}
            <a
              href={state.accountUrl}
              target="_blank"
              rel="noopener noreferrer"
              className="underline"
            >
              {state.accountUrl}
            </a>
          </p>
        )}
      </section>

      {forum && (
        <section
          data-forum-session=""
          className="flex flex-col gap-3 rounded-lg border border-border bg-card p-4"
        >
          <div className="flex flex-wrap items-baseline gap-x-3">
            <h2 className="text-sm font-medium">Forum session</h2>
            <span aria-label="forum session state" className="text-xs text-muted-foreground">
              {state.forumSession?.lastConnect
                ? `${state.forumSession.host}: connected ${new Date(state.forumSession.lastConnect.connectedAt).toLocaleString()}` +
                  (state.forumSession.lastConnect.cleared ? "" : " (the thread did not show)")
                : state.forumSession?.hasProfile
                  ? `${state.forumSession.host}: profile in use, never connected by hand`
                  : `${state.forumSession?.host ?? "this forum"}: no profile yet`}
            </span>
          </div>
          <p className="text-xs text-muted-foreground">
            The fetcher reads the thread in a headless browser that keeps one
            profile per forum host, so a browser check it clears once (Kiwi
            Farms&apos; KiwiFlare, say) stays cleared. When a check will not
            clear by itself, or the thread needs a login, Connect opens that
            profile in a window <strong>on the machine running the
            editor</strong>, at the thread: clear it (or log in), wait for the
            thread to show, then close the window.
          </p>
          <div className="flex flex-wrap gap-2">
            <button
              type="button"
              onClick={connect}
              disabled={pending}
              aria-label="connect forum session"
              className="rounded-md border border-border px-3 py-1 text-sm hover:bg-muted disabled:opacity-50"
            >
              {pending ? "Working…" : "Connect forum session"}
            </button>
          </div>

          <div className="border-t border-border pt-3">
            <label className="flex flex-col gap-1 text-sm">
              <span className="font-medium">Import saved pages</span>
              <span className="text-xs text-muted-foreground">
                Thread pages saved from your browser (&ldquo;Save page as&rdquo;,
                complete or HTML only): a .html file, or a folder of them, on
                the editor&apos;s machine. New posts are added, edited ones
                updated.
              </span>
              <div className="flex flex-wrap gap-2">
                <input
                  type="text"
                  value={importPath}
                  onChange={(e) => setImportPath(e.target.value)}
                  placeholder="/path/to/saved/pages"
                  aria-label="saved pages path"
                  className="min-w-0 flex-1 rounded border border-border bg-card px-2 py-1 font-mono text-sm"
                />
                <button
                  type="button"
                  onClick={importPages}
                  disabled={pending || !importPath.trim()}
                  aria-label="import saved pages"
                  className="rounded-md border border-border px-3 py-1 text-sm hover:bg-muted disabled:opacity-50"
                >
                  Import
                </button>
              </div>
            </label>
          </div>
          {forumNote && (
            <p role="status" className="text-xs text-success">
              {forumNote}
            </p>
          )}
          {forumErr && (
            <p role="alert" className="text-xs text-destructive">
              {forumErr}
            </p>
          )}
        </section>
      )}

      <p className="text-xs text-muted-foreground">
        Posts are indexed into the search corpus by the normal build — there is
        no per-post download or transcription stage.
      </p>
    </div>
  );
}

function Stat({ label, value }: { label: string; value: string }) {
  return (
    <div className="flex flex-col">
      <dt className="text-xs uppercase tracking-wide text-muted-foreground">
        {label}
      </dt>
      <dd className="font-mono text-sm">{value}</dd>
    </div>
  );
}