"use client";

import { useActionState } from "react";
import type { HomepageConfig } from "yt-dlp-transcript-common/lib/homepage";
import { saveHomepageConfigAction, type SaveResult } from "../lib/homepageActions";
import { SeededInput } from "../../components/forms/Field";
import { seedChecked } from "../../lib/formState";

const input =
  "rounded-md border border-border bg-card px-3 py-1.5 text-sm";
const label = "flex flex-col gap-1 text-sm font-medium";

export function HomepageConfigForm({ config }: { config: HomepageConfig }) {
  const [state, formAction, pending] = useActionState<
    SaveResult | undefined,
    FormData
  >(saveHomepageConfigAction, undefined);

  return (
    <form action={formAction} className="flex flex-col gap-3 max-w-xl">
      <label className={label}>
        Site title
        <SeededInput
          state={state}
          className={input}
          name="siteTitle"
          initial={config.siteTitle}
        />
      </label>
      <label className={label}>
        Header title
        <SeededInput
          state={state}
          className={input}
          name="headerTitle"
          initial={config.headerTitle}
        />
      </label>
      <label className={label}>
        Description
        <SeededInput
          state={state}
          className={input}
          name="siteDescription"
          initial={config.siteDescription}
        />
      </label>
      <label className={label}>
        Home tagline
        <SeededInput
          state={state}
          className={input}
          name="homeTagline"
          initial={config.homeTagline}
        />
      </label>
      <label className={label}>
        Public URL
        <SeededInput
          state={state}
          className={input}
          name="siteUrl"
          placeholder="https://archilyzer-hub.pages.dev"
          initial={config.siteUrl ?? ""}
        />
      </label>
      <label className={label}>
        Cloudflare Pages project
        <SeededInput
          state={state}
          className={input}
          name="cloudflareProject"
          placeholder="archilyzer-hub"
          initial={config.cloudflareProject ?? ""}
        />
      </label>
      <label className="flex items-center gap-2 text-sm">
        <input
          type="checkbox"
          name="transcriptDownloads"
          defaultChecked={seedChecked(
            state,
            "transcriptDownloads",
            config.transcriptDownloads !== false,
          )}
          className="accent-brand"
        />
        Per-video transcript downloads (Download menu, Copy Markdown)
      </label>
      <p className="-mt-2 text-xs text-muted-foreground">
        On by default: the hub&apos;s transcript viewer offers the transcript as a
        file and as Markdown, for every archive it federates. Turn off to hide
        both on the hub; the yt-dlp command for a marked clip stays.
      </p>
      <div className="flex items-center gap-3">
        <button
          type="submit"
          disabled={pending}
          className="rounded-md bg-info px-3 py-1.5 text-sm font-medium text-info-foreground hover:bg-info disabled:opacity-50"
        >
          {pending ? "Saving…" : "Save config"}
        </button>
        {state && !state.ok && (
          <span className="text-sm text-destructive">
            {state.error}
          </span>
        )}
        {state && state.ok && (
          <span className="text-sm text-success">
            Saved.
          </span>
        )}
      </div>
    </form>
  );
}