import type { Metadata } from "next";
import Link from "next/link";
import { getPaths } from "yt-dlp-transcript-common/lib/paths";
import { getSettings } from "yt-dlp-transcript-common/lib/settings";
import { readXSessionStatus } from "yt-dlp-transcript-common/social/xSessionBroker";
import { resolveXCookieSourceFor } from "yt-dlp-transcript-common/social/xBrowserLogin";
import { xCookieSourceView } from "yt-dlp-transcript-common/social/xCookieSource";
import { xPostsVisibility } from "yt-dlp-transcript-common/lib/postsVisibility";
import { SettingsForm } from "./components/SettingsForm";
import { XSessionSection } from "./components/XSessionSection";

export const dynamic = "force-dynamic";

export const metadata: Metadata = { title: "Settings" };

const POINTER_LINK = "underline underline-offset-2 hover:text-foreground";

export default async function SettingsPage() {
  const paths = getPaths();
  const settings = getSettings();

  const pathRows: [string, string][] = [
    ["monorepoRoot", paths.monorepoRoot],
    ["transcriptsDir", paths.transcriptsDir],
    ["channelsDir", paths.channelsDir],
    ["jobsDir", paths.jobsDir],
    ["lmdbPath", paths.lmdbPath],
    ["exportPublicDir", paths.exportPublicDir],
    ["ytdlpBin", paths.ytdlpBin],
    ["whisperBin", paths.whisperBin],
    ["whisperModel", paths.whisperModel],
    ["galleryDlBin", paths.galleryDlBin],
  ];

  // The X session broker's current state and the X login source in use (see
  // xSessionActions.ts). The source is resolved here, not read: with no stored
  // choice it depends on cookiesFromBrowser and the profile.
  const xSession = await readXSessionStatus(paths);
  const xSource = xCookieSourceView(
    await resolveXCookieSourceFor(paths, settings),
  );

  return (
    <div className="flex flex-col gap-8">
      <h1 className="text-2xl font-semibold">Settings</h1>

      <section className="flex flex-col gap-3">
        <div>
          <h2 className="text-lg font-semibold">Site settings</h2>
          <p className="text-sm text-muted-foreground">
            Persisted in <code>settings.json</code> at the monorepo root.
            Used by the export build to title the static site.
          </p>
          {/* A POINTER, NOT A CONTROL. Slice 3 moved four fieldsets that
              configured operations onto the operation pages, so this page is
              the machine and the site. Deliberately a paragraph rather than a
              fieldset: a form here would be the second place to edit those
              blocks, which is the thing being undone. No route retired, so
              there is nothing to redirect. */}
          <p className="text-sm text-muted-foreground mt-2">
            An operation&apos;s own settings live on its page, beside its
            backlog and its sweep:{" "}
            <Link href="/operations/digest" className={POINTER_LINK}>
              Digest
            </Link>
            ,{" "}
            <Link href="/operations/diarization" className={POINTER_LINK}>
              Diarization
            </Link>{" "}
            (with the shared speaker work lane),{" "}
            <Link href="/operations/attribution-text" className={POINTER_LINK}>
              Speaker names (from the transcript)
            </Link>{" "}
            and{" "}
            <Link
              href="/operations/attribution-diarized"
              className={POINTER_LINK}
            >
              Speaker names (from the audio)
            </Link>
            . The sync scheduler is one of them:{" "}
            <Link href="/operations/sync" className={POINTER_LINK}>
              Sync
            </Link>{" "}
            carries the whole block, below the schedule it drives. The
            transcription worker list is configured on{" "}
            <Link href="/workers" className={POINTER_LINK}>
              Workers
            </Link>
            , beside the workers it describes.
          </p>
        </div>
        <SettingsForm initial={settings} />
      </section>

      <section className="flex flex-col gap-3 border-t border-border pt-6">
        <XSessionSection
          initial={xSession}
          initialSource={xSource}
          initialVisibility={xPostsVisibility(settings)}
        />
      </section>

      <section className="flex flex-col gap-3 border-t border-border pt-6">
        <details>
          <summary className="cursor-pointer text-lg font-semibold">
            System paths
          </summary>
          <p className="text-sm text-muted-foreground mt-2">
            Read-only view of <code>getPaths()</code>. Set the matching env
            vars (TRANSCRIPTS_DIR, SETTINGS_FILE, EXPORT_PUBLIC_DIR, YTDLP_BIN,
            WHISPER_BIN, WHISPER_MODEL, CHOUGH_BIN, CHOUGH_URL, CHOUGH_MODEL)
            before launching to override. The per-app Binary / Model fields in
            the transcription settings above take precedence over these defaults
            when running channel transcribe actions.
          </p>
          <table className="text-sm mt-3 w-full">
            <tbody>
              {pathRows.map(([key, value]) => (
                <tr
                  key={key}
                  className="border-b border-border"
                >
                  <th className="text-left font-medium py-2 pr-4 align-top whitespace-nowrap">
                    {key}
                  </th>
                  <td className="py-2 font-mono text-xs break-all">{value}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </details>
      </section>
    </div>
  );
}