"use client";

import { useActionState, useEffect } from "react";
import { useFormStatus } from "react-dom";
import { useRouter } from "next/navigation";
import { Tags } from "lucide-react";
import { mapInstitutionalTypeAction } from "@/app/actions/curricula";
import type { ActionResult } from "@/app/actions/shared";
import { buttonClass, Callout, Card, CardHeader, Field, inputClass, selectClass } from "@/components/ui";
import { useToast } from "@/components/toast";

const initial: ActionResult = { ok: false, message: null };

function Submit() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" className={buttonClass("primary", "sm")} disabled={pending}>
      <Tags className="h-3.5 w-3.5" aria-hidden />
      {pending ? "Saving…" : "Save mapping"}
    </button>
  );
}

/**
 * Institutional curriculum-type mapping (SPEC 52.4, 52.13).
 *
 * An imported structure is never assumed to be Curriculum 2023, 2024 or 2025 —
 * an administrator confirms the mapping explicitly, with a reason.
 */
export function InstitutionalTypePanel({
  curriculumId,
  currentType,
  mappingStatus,
  canMap,
}: {
  curriculumId: string;
  currentType: string | null;
  mappingStatus: string | null;
  canMap: boolean;
}) {
  const router = useRouter();
  const { toast } = useToast();
  const [state, action] = useActionState<ActionResult, FormData>(mapInstitutionalTypeAction, initial);

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

  return (
    <Card>
      <CardHeader
        title="Institutional curriculum type"
        description="Which of the College's curriculum versions does this structure represent?"
      />
      <div className="space-y-3 p-5">
        {!currentType ? (
          <Callout tone="warning" title="Mapping not confirmed">
            This structure is not yet mapped to Curriculum 2023, 2024 or 2025. It must not be cloned into all three
            types. Confirm the mapping with MMC CAST before relying on automatic student assignment to it.
          </Callout>
        ) : (
          <Callout tone="success">
            Mapped to <strong>{currentType}</strong>
            {mappingStatus ? ` (${mappingStatus.replaceAll("_", " ").toLowerCase()})` : ""}.
          </Callout>
        )}

        {canMap ? (
          <form action={action} className="space-y-3">
            <input type="hidden" name="curriculum_id" value={curriculumId} />
            <Field label="Institutional curriculum type" htmlFor="institutional_type">
              <select
                id="institutional_type"
                name="institutional_type"
                defaultValue={currentType ?? ""}
                className={selectClass}
              >
                <option value="">Not mapped / requires confirmation</option>
                <option value="Curriculum 2023">Curriculum 2023</option>
                <option value="Curriculum 2024">Curriculum 2024</option>
                <option value="Curriculum 2025">Curriculum 2025</option>
              </select>
            </Field>
            <Field
              label="Reason"
              htmlFor="reason"
              required
              error={state.fieldErrors?.reason}
              hint="Recorded in the audit trail."
            >
              <input
                id="reason"
                name="reason"
                className={inputClass}
                required
                minLength={5}
                placeholder="e.g. Confirmed by the Dean's office memo dated 2026-07-01."
              />
            </Field>
            <Submit />
          </form>
        ) : (
          <p className="text-[12px] text-ink-500">Your role cannot change the institutional curriculum mapping.</p>
        )}
      </div>
    </Card>
  );
}