"use client";

import { useActionState, useEffect } from "react";
import { useFormStatus } from "react-dom";
import { useRouter } from "next/navigation";
import { FileDown } from "lucide-react";
import { importApprovedCurriculumAction } from "@/app/actions/curricula";
import type { ActionResult } from "@/app/actions/shared";
import { buttonClass } from "@/components/ui";
import { useToast } from "@/components/toast";

function Submit() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" className={buttonClass("primary", "sm")} disabled={pending}>
      <FileDown className="h-3.5 w-3.5" aria-hidden />
      {pending ? "Importing…" : "Import embedded approved curriculum"}
    </button>
  );
}

/** SPEC 53 — one-click load of the approved MMC CAST source dataset. */
export function ImportApprovedButton() {
  const router = useRouter();
  const { toast } = useToast();
  const [state, action] = useActionState<ActionResult, FormData>(importApprovedCurriculumAction, {
    ok: false,
    message: null,
  });

  useEffect(() => {
    if (!state.message) return;
    toast({ tone: state.ok ? "success" : "error", title: state.message });
    if (state.ok) router.refresh();
  }, [state, toast, router]);

  return (
    <form action={action}>
      <Submit />
    </form>
  );
}