import { openExternal } from "../api";
import { HELP } from "./ui";

/** Opens in the real browser — Takeout needs your signed-in Google session. */
function ExternalLink({ href, children }: { href: string; children?: string }) {
  return (
    <button
      onClick={() => openExternal(href)}
      title={href}
      className="cursor-pointer break-all text-left text-sky-600 underline underline-offset-2
                 hover:text-sky-500 dark:text-sky-400"
    >
      {children ?? href}
    </button>
  );
}

interface Step {
  title: string;
  body: React.ReactNode;
}

const STEPS: Step[] = [
  {
    title: "Open Google Takeout",
    body: (
      <>
        <ExternalLink href="https://takeout.google.com/" />
        <div className="mt-1">
          Or jump straight to the YouTube section, which pre-selects it for you:{" "}
          <ExternalLink href="https://takeout.google.com/settings/takeout/custom/youtube" />
        </div>
      </>
    ),
  },
  {
    title: "Select only YouTube",
    body: (
      <>
        Click <b>Deselect all</b>, then tick <b>YouTube and YouTube Music</b>. Leave
        everything else off — the other products make the export enormous and slow.
      </>
    ),
  },
  {
    title: "Narrow it to subscriptions",
    body: (
      <>
        Click <b>All YouTube data included</b> → <b>Deselect all</b> → tick only{" "}
        <b>subscriptions</b> → <b>OK</b>. Without this you get your entire watch
        history and every video you have uploaded.
      </>
    ),
  },
  {
    title: "Check the format is CSV",
    body: (
      <>
        Click <b>Multiple formats</b> and confirm <b>subscriptions</b> is set to{" "}
        <b>CSV</b>. FlightTube reads the CSV, not the JSON.
      </>
    ),
  },
  {
    title: "Create the export",
    body: (
      <>
        <b>Next step</b> → transfer <b>Send download link by email</b>, frequency{" "}
        <b>Export once</b>, type <b>.zip</b> → <b>Create export</b>. A subscriptions-only
        export is small and usually lands in a minute or two.
      </>
    ),
  },
  {
    title: "Download and unzip",
    body: (
      <>
        Follow the emailed link, download the <b>.zip</b>, and unzip it. The file you
        need is at:
        <code
          className="mt-1 block rounded bg-slate-100 px-2 py-1 text-[11px] break-all
                     dark:bg-slate-800"
        >
          Takeout/YouTube and YouTube Music/subscriptions/subscriptions.csv
        </code>
      </>
    ),
  },
  {
    title: "Import it",
    body: (
      <>
        Close this, then pick that <code>subscriptions.csv</code> with{" "}
        <b>Import subscriptions.csv</b>. The feed refreshes itself afterwards.
      </>
    ),
  },
];

export default function TakeoutGuide() {
  return (
    <ol className="space-y-3">
      {STEPS.map((s, i) => (
        <li key={s.title} className="flex gap-2.5">
          <span
            className="mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full
                       bg-sky-500 text-[9px] font-bold leading-none text-white"
          >
            {i + 1}
          </span>
          <div className="min-w-0">
            <div className="text-[12px] font-medium text-slate-700 dark:text-slate-200">
              {s.title}
            </div>
            <div className={`mt-0.5 ${HELP}`}>{s.body}</div>
          </div>
        </li>
      ))}
    </ol>
  );
}
