"use client";

// The X account session — where the X fetchers' login comes from, whether a
// login is visible there, and the operator-facing half of the session broker.
//
// Two sources (release 16 slice XL, common/social/xCookieSource.ts):
//   - the operator's everyday browser (`cookiesFromBrowser`): gallery-dl reads
//     its X login on every fetch, so nothing expires while the operator stays
//     logged in to x.com there — no window at all;
//   - a profile connected here once: a persistent, logged-in browser profile
//     the fetcher re-exports fresh cookies from, because X cookies otherwise
//     expire within days.

import { useEffect, useState, useTransition } from "react";
import {
  checkXLoginAction,
  clearXSessionAction,
  connectXAccountAction,
  refreshXCookiesAction,
  setXCookieSourceAction,
  type XSessionActionResult,
} from "../xSessionActions";
import type { XSessionStatus } from "yt-dlp-transcript-common/social/xSessionBroker";
import type { XLoginStatus } from "yt-dlp-transcript-common/social/xBrowserLogin";
import {
  resolveXCookieSource,
  xCookieSourceLabel,
  type XCookieSourceView,
  type XPostsVisibility,
} from "yt-dlp-transcript-common/social/xCookieSource";
import { XPostsVisibilityControl } from "./XPostsVisibilityControl";

export function XSessionSection({
  initial,
  initialSource,
  initialVisibility,
}: {
  initial: XSessionStatus;
  initialSource: XCookieSourceView;
  // `social.x.visibility`, resolved (absent = "public"); release 17 slice XP.
  initialVisibility: XPostsVisibility;
}) {
  const [status, setStatus] = useState<XSessionStatus>(initial);
  const [source, setSource] = useState<XCookieSourceView>(initialSource);
  const [login, setLogin] = useState<XLoginStatus | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [note, setNote] = useState<string | null>(null);
  // Two transitions: the session actions (Connect waits for the window to
  // close) and the source controls (Check, the source select).
  const [pending, startTransition] = useTransition();
  const [checking, startChecking] = useTransition();

  // A save of cookiesFromBrowser above (or another tab's choice) re-renders the
  // page with a new resolved source; take it.
  useEffect(() => {
    setSource(initialSource);
    // Keyed on the values, not the object: every server render makes a new one.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [initialSource.source, initialSource.chosen, initialSource.browserSpec]);

  const run = (fn: () => Promise<XSessionActionResult>, okNote: (r: { browser?: string }) => string) =>
    startTransition(async () => {
      setError(null);
      setNote(null);
      const res = await fn();
      if (res.ok) {
        setStatus(res.status);
        setSource(res.source);
        setLogin(null);
        setNote(okNote(res));
      } else {
        setError(res.error);
      }
    });

  const check = () =>
    startChecking(async () => {
      setError(null);
      setNote(null);
      const res = await checkXLoginAction();
      if (res.ok) {
        setLogin(res.login);
        setSource(res.login);
      } else {
        setError(res.error);
      }
    });

  const choose = (choice: string) =>
    startChecking(async () => {
      setError(null);
      setNote(null);
      const res = await setXCookieSourceAction(choice);
      if (res.ok) {
        setSource(res.source);
        setLogin(null);
        setNote("Login source saved.");
      } else {
        setError(res.error);
      }
    });

  // What "Automatic" resolves to right now, for its option's text.
  const automatic = xCookieSourceLabel(
    resolveXCookieSource({
      browserSpec: source.browserSpec,
      profileConnected: status.looksAuthenticated,
    }),
  );

  return (
    <section
      data-x-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">X account session</h2>
        <span
          aria-label="x session state"
          className={
            "text-xs " +
            (status.looksAuthenticated ? "text-success" : "text-muted-foreground")
          }
        >
          {status.looksAuthenticated
            ? "connected"
            : status.hasProfile
              ? "profile present, not logged in"
              : "not connected"}
        </span>
      </div>

      <p className="text-xs text-muted-foreground">
        X post archiving needs a logged-in session, from one of two sources.{" "}
        <strong>Browser login</strong>: your everyday browser, named by{" "}
        <code>cookiesFromBrowser</code> above — gallery-dl reads its X login on
        every fetch, so nothing expires while you stay logged in to x.com there,
        and no window is needed. <strong>Connected profile</strong>: a browser
        profile connected here once; the fetcher re-exports fresh cookies from
        it, because X cookies otherwise expire within days.
      </p>

      <div className="flex flex-wrap items-center gap-2">
        <label htmlFor="x-cookie-source" className="text-sm">
          Login source
        </label>
        <select
          id="x-cookie-source"
          aria-label="x cookie source"
          value={source.chosen ? source.source : "auto"}
          onChange={(e) => choose(e.target.value)}
          disabled={pending || checking}
          className="rounded-md border border-border bg-background px-2 py-1 text-sm disabled:opacity-50"
        >
          <option value="auto">Automatic — now: {automatic}</option>
          <option value="browser">
            Browser login{source.browserSpec ? ` (${source.browserSpec})` : ""}
          </option>
          <option value="profile">Connected profile</option>
        </select>
        <button
          type="button"
          onClick={check}
          disabled={pending || checking}
          aria-label="check x login"
          className="rounded-md border border-border px-3 py-1 text-sm hover:bg-muted disabled:opacity-50"
        >
          {checking ? "Checking…" : "Check"}
        </button>
      </div>

      <p aria-label="x cookie source in use" className="text-xs text-muted-foreground">
        In use: {source.label}
        {source.chosen ? "" : " (automatic)"}
      </p>

      {login && (
        <p
          aria-label="x login status"
          className={
            "text-xs " +
            (login.authTokenVisible === true && !login.walOnly
              ? "text-success"
              : login.authTokenVisible === false
                ? "text-destructive"
                : "text-muted-foreground")
          }
        >
          {login.summary}{" "}
          <span className="text-muted-foreground">
            (checked {new Date(login.checkedAt).toLocaleTimeString()})
          </span>
        </p>
      )}

      {status.cookiesUpdatedAt && (
        <p className="text-xs text-muted-foreground">
          Cookies last exported:{" "}
          {new Date(status.cookiesUpdatedAt).toLocaleString()}
        </p>
      )}

      <div className="flex flex-wrap gap-2">
        <button
          type="button"
          onClick={() =>
            run(connectXAccountAction, (r) =>
              `Connected${r.browser ? ` with ${r.browser}` : ""}. Cookies exported.`,
            )
          }
          disabled={pending}
          aria-label="connect x account"
          className="rounded-md bg-primary px-3 py-1 text-sm font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50"
        >
          {pending ? "Working…" : "Connect X account"}
        </button>
        <button
          type="button"
          onClick={() => run(refreshXCookiesAction, () => "Cookies refreshed.")}
          disabled={pending || !status.hasProfile}
          aria-label="refresh x cookies"
          className="rounded-md border border-border px-3 py-1 text-sm hover:bg-muted disabled:opacity-50"
        >
          Refresh cookies
        </button>
        <button
          type="button"
          onClick={() => run(clearXSessionAction, () => "Session cleared.")}
          disabled={pending || !status.hasProfile}
          aria-label="clear x session"
          className="rounded-md border border-border px-3 py-1 text-sm hover:bg-muted disabled:opacity-50"
        >
          Forget session
        </button>
      </div>

      <p className="text-xs text-muted-foreground">
        Connecting opens a browser window <strong>on the machine running the
        editor</strong>: your own Chromium or Chrome when one is installed (else
        Playwright&apos;s bundled Chromium), without the automation signals.
        Complete the login (2FA and captcha included), then close the window.
        Google&apos;s sign-in may still refuse an embedded browser (&ldquo;this
        browser or app may not be secure&rdquo;) — <strong>X&apos;s own
        password login is the reliable path</strong>. The login is never
        automated — that is what gets accounts flagged.
      </p>

      {note && (
        <p role="status" className="text-xs text-success">
          {note}
        </p>
      )}
      {error && (
        <p role="alert" className="text-xs text-destructive">
          {error}
        </p>
      )}

      <div className="border-t border-border pt-3">
        <XPostsVisibilityControl initial={initialVisibility} />
      </div>
    </section>
  );
}