freezmo/components/ShareChooser.tsx

"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";

import { Button, Spinner } from "@/components/ui";
import { useI18n } from "@/lib/i18n";
import { setPendingShare, type PendingShareFile } from "@/lib/share-pending";
import { openSettings } from "@/lib/ui-events";

type Payload = { title?: string; text?: string; url?: string; files: PendingShareFile[] };

/**
 * The share-target chooser: shows what was shared and lets the user send it
 * to New deck or Make my homework. Files are stashed in sessionStorage and
 * picked up by the wizard on mount.
 */
export function ShareChooser({
  id,
  text,
  url,
  error,
}: {
  id?: string;
  text?: string;
  url?: string;
  error?: string;
}) {
  const { t } = useI18n();
  const router = useRouter();
  const [payload, setPayload] = useState<Payload | null>(id ? null : { text, url, files: [] });
  const [failed, setFailed] = useState(Boolean(error));

  useEffect(() => {
    if (!id) return;
    let cancelled = false;
    void (async () => {
      try {
        const response = await fetch(`/share-target?id=${encodeURIComponent(id)}`, { cache: "no-store" });
        if (!response.ok) throw new Error("expired");
        const data = (await response.json()) as Payload;
        if (!cancelled) setPayload(data);
      } catch {
        if (!cancelled) setFailed(true);
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [id]);

  const combinedText = [payload?.text, payload?.url].filter(Boolean).join("\n\n").trim();
  const fileCount = payload?.files.length ?? 0;

  const go = (target: "/create" | "/homework") => {
    setPendingShare({ text: combinedText || undefined, files: payload?.files ?? [] });
    router.push(target);
  };

  if (failed) {
    return (
      <div className="card mx-auto max-w-md space-y-3 p-6 text-center">
        <p className="text-3xl" aria-hidden>
          🧊
        </p>
        <h1 className="text-xl font-extrabold text-[var(--text)]">{t(error === "large" ? "share.tooLarge" : "share.expired")}</h1>
        <div className="flex justify-center gap-2 pt-1">
          <Button onClick={() => router.push("/")}>{t("common.library")}</Button>
          <Button variant="secondary" onClick={openSettings}>
            {t("common.settings")}
          </Button>
        </div>
      </div>
    );
  }

  if (!payload) {
    return (
      <div className="flex items-center justify-center gap-3 py-16 text-sm font-semibold text-[var(--text-muted)]">
        <Spinner className="size-5" /> {t("share.loading")}
      </div>
    );
  }

  return (
    <div className="mx-auto max-w-md space-y-4">
      <section className="space-y-1.5">
        <h1 className="text-[26px] font-semibold leading-tight tracking-[-0.02em] text-[var(--text)]">
          {t("share.title")}
        </h1>
        <p className="text-[14px] text-frost-600 dark:text-frost-300">{t("share.intro")}</p>
      </section>

      <div className="card space-y-2 p-4">
        <p className="text-[11px] font-semibold uppercase tracking-wide text-[var(--text-subtle)]">{t("share.preview")}</p>
        {fileCount > 0 ? (
          <p className="text-[13px] font-medium text-[var(--text)]">
            {fileCount === 1 ? payload.files[0].name : `${fileCount} files`}
          </p>
        ) : null}
        {combinedText ? (
          <p className="line-clamp-4 text-[13px] leading-relaxed text-[var(--text-muted)]">{combinedText}</p>
        ) : null}
        {fileCount === 0 && !combinedText ? (
          <p className="text-[13px] text-[var(--text-subtle)]">{t("share.nothing")}</p>
        ) : null}
      </div>

      <div className="grid gap-2">
        <Button size="lg" className="touch-target w-full" onClick={() => go("/create")}>
          {t("common.newDeck")}
        </Button>
        <Button size="lg" variant="secondary" className="touch-target w-full" onClick={() => go("/homework")}>
          {t("homework.nav")}
        </Button>
      </div>
    </div>
  );
}