"use client";

/**
 * FormRenderer — a public-facing form (used by BOTH the in-app "form" view
 * and the top-level /f/[slug] page).
 *
 * Loads the form by id (in-app, auth) or by slug (public, no auth), validates
 * required questions client-side (the server re-validates + coerces), collects
 * RAW answers keyed by question id, and submits via POST /f/:slug/submit
 * (no auth) which creates a record in the linked database.
 *
 * Status is UPPERCASE (DRAFT/PUBLISHED/CLOSED). On the public path only
 * PUBLISHED forms resolve (publicGet 404s otherwise), so the DRAFT notice is
 * really an in-app-only affordance.
 */
import { useMemo, useState } from "react";
import { CheckCircle2, Loader2, Send } from "lucide-react";
import { cn } from "@/lib/utils";
import {
  FormDto,
  isAnswerEmpty,
  useForm,
  useFormBySlug,
  useSubmitForm
} from "@/hooks/use-forms";
import { FormField } from "@/components/form/form-field";

export interface FormRendererProps {
  /** In-app: load by form id (auth). */
  formId?: string;
  /** Public: load by slug (no auth). */
  slug?: string;
  className?: string;
}

/**
 * Map a submit 422's per-field details (ApiError.details = [{ questionId,
 * issue, message }]) to "Label: message" strings keyed to the question's
 * label. Non-422 errors / unknown shapes → [] (the caller falls back to the
 * raw message).
 */
function submitFieldErrors(
  questions: { id: string; label: string }[],
  error: unknown
): string[] {
  if (!error || !("details" in (error as object))) return [];
  const details = (error as { details?: unknown }).details;
  if (!Array.isArray(details)) return [];
  const label = new Map(questions.map((q) => [q.id, q.label]));
  const out: string[] = [];
  for (const d of details) {
    const item = d as { questionId?: string; message?: string };
    if (item?.questionId && item?.message) {
      out.push(`${label.get(item.questionId) ?? "Question"}: ${item.message}`);
    }
  }
  return out;
}

export function FormRenderer({ formId, slug, className }: FormRendererProps) {
  const byId = useForm(formId);
  const bySlug = useFormBySlug(slug);
  const form: FormDto | undefined = byId.data ?? bySlug.data;
  const isLoading = (formId ? byId.isLoading : bySlug.isLoading) || (formId ? byId.isFetching : bySlug.isFetching);
  const error = (formId ? byId.error : bySlug.error) as Error | null;
  const submit = useSubmitForm(slug ?? form?.slug ?? "");

  const [answers, setAnswers] = useState<Record<string, unknown>>({});
  const [errors, setErrors] = useState<Record<string, string>>({});
  const [done, setDone] = useState(false);

  const questions = useMemo(() => form?.questions ?? [], [form]);

  const setAnswer = (qid: string, v: unknown) => {
    setAnswers((a) => ({ ...a, [qid]: v }));
    if (errors[qid]) setErrors((e) => ({ ...e, [qid]: "" }));
  };

  const validate = () => {
    const next: Record<string, string> = {};
    for (const q of questions) {
      if (!q.required) continue;
      if (isAnswerEmpty(answers[q.id])) next[q.id] = "This field is required.";
    }
    setErrors(next);
    return Object.keys(next).length === 0;
  };

  const onSubmit = (e?: React.FormEvent) => {
    e?.preventDefault();
    if (!form || !form.slug) return;
    if (!validate()) return;
    submit.mutate(answers, {
      onSuccess: () => {
        setDone(true);
        setAnswers({});
      }
    });
  };

  // ---- states -----------------------------------------------------------------
  if (isLoading) {
    return (
      <div className={cn("space-y-3 p-6", className)} aria-busy="true">
        {Array.from({ length: 5 }).map((_, i) => (
          <div key={i} className="h-10 animate-pulse rounded bg-muted" />
        ))}
      </div>
    );
  }

  if (error || !form) {
    return (
      <div className={cn("rounded-lg border border-dashed p-6 text-center text-sm text-muted-foreground", className)}>
        This form is not available.
      </div>
    );
  }

  if (form.status === "CLOSED") {
    return (
      <div className={cn("rounded-lg border border-border p-8 text-center", className)}>
        <h2 className="text-lg font-medium">Form closed</h2>
        <p className="mt-1 text-sm text-muted-foreground">
          {form.config.closedMessage || "This form is no longer accepting submissions."}
        </p>
      </div>
    );
  }

  const isDraft = form.status === "DRAFT";

  // The submit's 422 carries per-field details: [{ questionId, issue, message }].
  // Map them to the offending question's label so the error reads as a field
  // error, not an opaque server message.
  const fieldErrors = submitFieldErrors(questions, submit.error);

  return (
    <form className={cn("mx-auto max-w-xl", className)} onSubmit={onSubmit} noValidate>
      {isDraft && (
        <p className="mb-3 rounded-md border border-yellow-500/30 bg-yellow-500/10 px-3 py-2 text-xs text-yellow-700">
          This form is a draft — only you can see it. Publish it to share the link.
        </p>
      )}

      {form.config.intro && <p className="mb-4 text-sm text-muted-foreground">{form.config.intro}</p>}

      <div className="space-y-4">
        {questions.map((q) => (
          <FormField key={q.id} question={q} value={answers[q.id]} onChange={(v) => setAnswer(q.id, v)} error={errors[q.id]} disabled={done} />
        ))}
      </div>

      {done ? (
        <div className="mt-6 flex items-center gap-2 rounded-md border border-emerald-500/30 bg-emerald-500/10 px-4 py-3 text-sm text-emerald-700">
          <CheckCircle2 className="size-5" aria-hidden />
          <span>{form.config.successMessage || "Thanks! Your response was recorded."}</span>
        </div>
      ) : (
        <div className="mt-6">
          <button
            type="submit"
            disabled={submit.isPending || isDraft}
            className="inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
          >
            {submit.isPending && <Loader2 className="size-4 animate-spin" aria-hidden />}
            <Send className="size-4" aria-hidden />
            Submit
          </button>
          {submit.error && (
            <div className="mt-2 space-y-1 text-xs text-destructive">
              {fieldErrors.length > 0 ? (
                <ul data-testid="form-submit-field-errors" className="list-disc space-y-0.5 pl-4">
                  {fieldErrors.map((e, i) => (
                    <li key={i}>{e}</li>
                  ))}
                </ul>
              ) : (
                <p>{(submit.error as Error).message}</p>
              )}
            </div>
          )}
        </div>
      )}
    </form>
  );
}