"use client";

/**
 * FormField — a single form question input, shared by:
 *   - the in-app form builder preview (components/form/form-builder-view), and
 *   - the public submit page (app/f/[slug]/page.tsx).
 *
 * Controlled: the parent owns `value` (the raw answer, NOT the RecordValue —
 * the RecordValue coercion happens once, at submit, via
 * questionAnswerToValue in hooks/use-forms so both surfaces stay in sync).
 *
 * Raw answer shapes per type (the server coerces via coerceAnswer):
 *   SHORT_TEXT/LONG_TEXT/EMAIL → string
 *   NUMBER/RATING              → number
 *   DATE                       → "YYYY-MM-DD" string
 *   CHECKBOX                   → boolean
 *   SINGLE_SELECT              → option NAME string (server stores String(raw))
 *   MULTI_SELECT               → option NAME[] (server wraps single in array)
 *   FILE                       → fileId[] (uploaded via @/lib/api uploadFile)
 *
 * Question types are UPPERCASE (API/Prisma/FormQuestionType). Select options
 * live in question.validation.options.
 */
import { useRef, useState } from "react";
import { Upload, X } from "lucide-react";
import { cn } from "@/lib/utils";
import { FormOption, FormQuestion, questionOptions } from "@/hooks/use-forms";
import { uploadFile } from "@/lib/api";

export interface FormFieldProps {
  question: FormQuestion;
  value: unknown;
  onChange: (value: unknown) => void;
  error?: string;
  disabled?: boolean;
}

const inputCls =
  "w-full rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50";

export function FormField({ question: q, value, onChange, error, disabled }: FormFieldProps) {
  const options: FormOption[] = questionOptions(q);
  const validation = q.validation ?? {};
  const placeholder = q.placeholder ?? "";

  switch (q.type) {
    case "SHORT_TEXT":
      return (
        <FieldShell question={q} error={error}>
          <input
            className={inputCls}
            type="text"
            placeholder={placeholder}
            maxLength={typeof validation.maxLength === "number" ? (validation.maxLength as number) : undefined}
            value={typeof value === "string" ? value : ""}
            disabled={disabled}
            onChange={(e) => onChange(e.target.value)}
            aria-label={q.label}
          />
        </FieldShell>
      );

    case "LONG_TEXT":
      return (
        <FieldShell question={q} error={error}>
          <textarea
            className={cn(inputCls, "min-h-24 resize-y")}
            placeholder={placeholder}
            maxLength={typeof validation.maxLength === "number" ? (validation.maxLength as number) : undefined}
            value={typeof value === "string" ? value : ""}
            disabled={disabled}
            onChange={(e) => onChange(e.target.value)}
            aria-label={q.label}
          />
        </FieldShell>
      );

    case "NUMBER":
      return (
        <FieldShell question={q} error={error}>
          <input
            className={inputCls}
            type="number"
            placeholder={placeholder}
            min={typeof validation.min === "number" ? (validation.min as number) : undefined}
            max={typeof validation.max === "number" ? (validation.max as number) : undefined}
            value={typeof value === "number" ? value : ""}
            disabled={disabled}
            onChange={(e) => {
              const n = e.target.value;
              onChange(n === "" ? null : Number(n));
            }}
            aria-label={q.label}
          />
        </FieldShell>
      );

    case "EMAIL":
      return (
        <FieldShell question={q} error={error}>
          <input
            className={inputCls}
            type="email"
            placeholder={placeholder || "name@example.com"}
            value={typeof value === "string" ? value : ""}
            disabled={disabled}
            onChange={(e) => onChange(e.target.value)}
            aria-label={q.label}
          />
        </FieldShell>
      );

    case "DATE":
      return (
        <FieldShell question={q} error={error}>
          <input
            className={inputCls}
            type="date"
            value={typeof value === "string" ? value : ""}
            disabled={disabled}
            onChange={(e) => onChange(e.target.value || null)}
            aria-label={q.label}
          />
        </FieldShell>
      );

    case "CHECKBOX":
      return (
        <FieldShell question={q} error={error}>
          <label className="flex cursor-pointer items-center gap-2 text-sm">
            <input
              type="checkbox"
              className="size-4 accent-[oklch(var(--primary))]"
              checked={value === true}
              disabled={disabled}
              onChange={(e) => onChange(e.target.checked)}
              aria-label={q.label}
            />
            {q.placeholder || "Yes"}
          </label>
        </FieldShell>
      );

    case "SINGLE_SELECT":
      return (
        <FieldShell question={q} error={error}>
          <select
            className={inputCls}
            value={typeof value === "string" ? value : ""}
            disabled={disabled}
            onChange={(e) => onChange(e.target.value || null)}
            aria-label={q.label}
          >
            <option value="">Select an option…</option>
            {options.map((o) => (
              <option key={o.id ?? o.name} value={o.name}>
                {o.name}
              </option>
            ))}
          </select>
        </FieldShell>
      );

    case "MULTI_SELECT":
      return (
        <FieldShell question={q} error={error}>
          <div className="flex flex-wrap gap-1.5">
            {options.map((o) => {
              const selected = Array.isArray(value) && (value as string[]).includes(o.name);
              return (
                <button
                  key={o.id ?? o.name}
                  type="button"
                  disabled={disabled}
                  className={cn(
                    "rounded-full border px-2.5 py-1 text-xs transition-colors",
                    selected
                      ? "border-primary bg-primary/10 text-primary"
                      : "border-border text-muted-foreground hover:bg-muted"
                  )}
                  onClick={() => {
                    const cur = Array.isArray(value) ? (value as string[]) : [];
                    onChange(selected ? cur.filter((x) => x !== o.name) : [...cur, o.name]);
                  }}
                  aria-pressed={selected}
                >
                  {o.name}
                </button>
              );
            })}
            {options.length === 0 && <span className="text-xs text-muted-foreground">No options configured.</span>}
          </div>
        </FieldShell>
      );

    case "RATING": {
      const max = typeof validation.max === "number" ? (validation.max as number) : 5;
      const current = typeof value === "number" ? value : 0;
      return (
        <FieldShell question={q} error={error}>
          <div className="flex items-center gap-1" role="radiogroup" aria-label={q.label}>
            {Array.from({ length: max }, (_, i) => i + 1).map((n) => (
              <button
                key={n}
                type="button"
                disabled={disabled}
                className={cn("text-xl leading-none transition-opacity", n <= current ? "opacity-100" : "opacity-30", "hover:scale-110")}
                onClick={() => onChange(n === current ? 0 : n)}
                aria-label={`${n} of ${max}`}
                aria-pressed={n === current}
              >
                ★
              </button>
            ))}
          </div>
        </FieldShell>
      );
    }

    case "FILE":
      return <FileField question={q} value={value} onChange={onChange} error={error} disabled={disabled} />;

    default:
      return (
        <FieldShell question={q} error={error}>
          <input className={inputCls} type="text" value="" disabled aria-label={q.label} />
        </FieldShell>
      );
  }
}

// ---------------------------------------------------------------------------
// File input (uploads via the core uploadFile helper, @/lib/api)
// ---------------------------------------------------------------------------

function FileField({ question: q, value, onChange, error, disabled }: FormFieldProps) {
  const [uploading, setUploading] = useState(false);
  const [names, setNames] = useState<string[]>([]);
  const inputRef = useRef<HTMLInputElement>(null);

  const ids: string[] = Array.isArray(value) ? (value as string[]) : [];

  const onFiles = async (files: FileList | null) => {
    if (!files || files.length === 0) return;
    setUploading(true);
    try {
      const next: string[] = [...ids];
      const nextNames: string[] = [...names];
      for (const f of Array.from(files)) {
        const meta = await uploadFile(f);
        next.push(meta.id);
        nextNames.push(meta.name ?? f.name);
      }
      setNames(nextNames);
      onChange(next);
    } catch (e) {
      // Surface the failure inline (the public page shows a toast on its side).
      onChange(ids);
      // eslint-disable-next-line no-console
      console.error("File upload failed:", e);
    } finally {
      setUploading(false);
      if (inputRef.current) inputRef.current.value = "";
    }
  };

  return (
    <FieldShell question={q} error={error}>
      <div className="flex flex-wrap items-center gap-2">
        <input ref={inputRef} type="file" multiple className="hidden" onChange={(e) => void onFiles(e.target.files)} disabled={disabled || uploading} aria-label={`Upload files for ${q.label}`} />
        <button
          type="button"
          className="inline-flex items-center gap-1.5 rounded-md border border-dashed px-3 py-1.5 text-xs text-muted-foreground hover:bg-muted disabled:opacity-50"
          onClick={() => inputRef.current?.click()}
          disabled={disabled || uploading}
        >
          <Upload className="size-3.5" aria-hidden />
          {uploading ? "Uploading…" : "Upload files"}
        </button>
        {names.map((n, i) => (
          <span key={`${n}-${i}`} className="inline-flex items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-xs">
            {n}
            <button
              type="button"
              className="text-muted-foreground hover:text-foreground"
              onClick={() => {
                const nextIds = ids.filter((_, j) => j !== i);
                const nextNames = names.filter((_, j) => j !== i);
                setNames(nextNames);
                onChange(nextIds);
              }}
              aria-label={`Remove ${n}`}
            >
              <X className="size-3" />
            </button>
          </span>
        ))}
      </div>
    </FieldShell>
  );
}

// ---------------------------------------------------------------------------
// Label + error wrapper
// ---------------------------------------------------------------------------

function FieldShell({
  question: q,
  error,
  children
}: {
  question: FormQuestion;
  error?: string;
  children: React.ReactNode;
}) {
  return (
    <div>
      <label className="mb-1 block text-sm font-medium">
        {q.label}
        {q.required && <span className="ml-0.5 text-destructive">*</span>}
      </label>
      {children}
      {error && <p className="mt-1 text-xs text-destructive">{error}</p>}
    </div>
  );
}