// components/admin/ManualEntryForm.tsx
// Client form for the logged manual-entry path. Calls manualEntryAction (server,
// operator+, writes the audit log and mints tickets flagged rail=manual). Reuses
// participant identity normalization on the server. Accessible: labeled inputs,
// required proof reference, text errors.

"use client";

import * as React from "react";
import { useRouter } from "next/navigation";
import { Button, Input, Checkbox, Card } from "@/components/ui";
import { manualEntryAction } from "@/app/admin/_lib/actions";

export function ManualEntryForm({
  raffleId,
  raffleName,
}: {
  raffleId: string;
  raffleName: string;
}) {
  const router = useRouter();
  const [busy, setBusy] = React.useState(false);
  const [msg, setMsg] = React.useState<{ text: string; ok: boolean } | null>(null);

  const [fullName, setFullName] = React.useState("");
  const [phone, setPhone] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [chances, setChances] = React.useState("1");
  const [amount, setAmount] = React.useState("");
  const [proof, setProof] = React.useState("");
  const [marketing, setMarketing] = React.useState(false);

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    setBusy(true);
    setMsg(null);
    const res = await manualEntryAction({
      raffleId,
      fullName: fullName.trim(),
      phone: phone.trim(),
      email: email.trim(),
      chances: Number(chances),
      amountSoles: Number(amount),
      proofReference: proof.trim(),
      marketingConsent: marketing,
    });
    setBusy(false);
    setMsg({ text: res.message ?? res.error ?? "", ok: res.ok });
    if (res.ok) {
      setFullName("");
      setPhone("");
      setEmail("");
      setChances("1");
      setAmount("");
      setProof("");
      setMarketing(false);
      router.refresh();
    }
  }

  return (
    <Card elevation="tight" className="p-lg">
      <h2 className="font-display text-heading-md font-bold text-ink-strong">
        Registrar entrada en {raffleName}
      </h2>
      {msg ? (
        <p
          role="alert"
          className={
            "mt-4 rounded-md border px-4 py-3 font-body text-body-md " +
            (msg.ok
              ? "border-steelblue text-ink-strong"
              : "border-primary bg-primary-tint/20 text-ink-strong")
          }
        >
          {msg.text}
        </p>
      ) : null}

      <form onSubmit={submit} className="mt-4 grid grid-cols-1 gap-md sm:grid-cols-2" noValidate>
        <Input
          label="Nombre completo"
          value={fullName}
          onChange={(e) => setFullName(e.target.value)}
          autoComplete="off"
          required
        />
        <Input
          label="Teléfono"
          value={phone}
          onChange={(e) => setPhone(e.target.value)}
          inputMode="tel"
          autoComplete="off"
          required
        />
        <Input
          label="Correo electrónico"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          inputMode="email"
          autoComplete="off"
          required
        />
        <Input
          label="Oportunidades"
          value={chances}
          onChange={(e) => setChances(e.target.value)}
          inputMode="numeric"
          required
        />
        <Input
          label="Monto recibido (S/)"
          value={amount}
          onChange={(e) => setAmount(e.target.value)}
          inputMode="decimal"
          required
        />
        <Input
          label="Comprobante (operación Yape, depósito, nota)"
          value={proof}
          onChange={(e) => setProof(e.target.value)}
          required
          hint="Obligatorio para trazabilidad"
        />
        <div className="sm:col-span-2">
          <Checkbox
            id="manual-marketing"
            label="La persona acepta recibir comunicaciones de marketing"
            checked={marketing}
            onChange={(e) => setMarketing(e.target.checked)}
          />
        </div>
        <div className="sm:col-span-2">
          <Button type="submit" variant="primary" disabled={busy}>
            {busy ? "Registrando..." : "Registrar entrada manual"}
          </Button>
        </div>
      </form>
    </Card>
  );
}