"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { saveBracelet, assignBracelet, deleteBracelet, markNfcWritten } from "../actions";

type T = { id: string; name: string; token: string };
type B = {
  id: string;
  number: string;
  nfcWritten: boolean;
  traveler: T | null;
};

export default function BraceletsManager({
  bracelets,
  travelers,
  baseUrl,
}: {
  bracelets: B[];
  travelers: T[];
  baseUrl: string;
}) {
  const router = useRouter();
  const [nfcSupported, setNfcSupported] = useState(false);
  const [status, setStatus] = useState<{ id: string; msg: string; ok: boolean } | null>(null);
  const [writing, setWriting] = useState<string | null>(null);

  useEffect(() => {
    const id = setTimeout(
      () => setNfcSupported(typeof window !== "undefined" && "NDEFReader" in window),
      0
    );
    return () => clearTimeout(id);
  }, []);

  async function writeNfc(b: B) {
    if (!b.traveler) return;
    const url = `${baseUrl}/p/${b.traveler.token}`;
    setWriting(b.id);
    setStatus(null);
    try {
      // @ts-expect-error - Web NFC API no está en los tipos estándar
      const ndef = new NDEFReader();
      await ndef.write({ records: [{ recordType: "url", data: url }] });
      const fd = new FormData();
      fd.set("id", b.id);
      await markNfcWritten(fd);
      setStatus({ id: b.id, msg: "✅ Pulsera grabada correctamente.", ok: true });
      router.refresh();
    } catch (err) {
      const m = err instanceof Error ? err.message : String(err);
      setStatus({ id: b.id, msg: `❌ Error al grabar: ${m}`, ok: false });
    } finally {
      setWriting(null);
    }
  }

  async function onCreate(formData: FormData) {
    await saveBracelet(formData);
    router.refresh();
    (document.getElementById("bracelet-form") as HTMLFormElement)?.reset();
  }

  async function onAssign(formData: FormData) {
    await assignBracelet(formData);
    router.refresh();
  }

  async function onDelete(formData: FormData) {
    await deleteBracelet(formData);
    router.refresh();
  }

  return (
    <div className="space-y-6">
      <div className="card p-5">
        <h2 className="mb-3 font-semibold">➕ Nueva pulsera</h2>
        <form id="bracelet-form" action={onCreate} className="grid grid-cols-1 gap-3 sm:grid-cols-12">
          <input name="number" placeholder="Número de pulsera" required className="input sm:col-span-4" />
          <select name="travelerId" className="input sm:col-span-6">
            <option value="">— Sin asignar —</option>
            {travelers.map((t) => <option key={t.id} value={t.id}>{t.name}</option>)}
          </select>
          <button className="btn-primary sm:col-span-2">Crear</button>
        </form>
      </div>

      {!nfcSupported && (
        <div className="rounded-xl bg-amber-50 p-4 text-sm text-amber-800">
          ⚠️ Este dispositivo/navegador no soporta <b>Web NFC</b>. Para grabar pulseras usa
          Chrome en Android con conexión segura (HTTPS).
        </div>
      )}

      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
        {bracelets.map((b) => (
          <div key={b.id} className="card p-5">
            <div className="flex items-center justify-between">
              <div className="text-lg font-bold">📿 {b.number}</div>
              {b.nfcWritten ? (
                <span className="badge bg-emerald-100 text-emerald-700">NFC grabada</span>
              ) : (
                <span className="badge bg-slate-100 text-slate-500">Sin grabar</span>
              )}
            </div>

            <div className="mt-3">
              <form action={onAssign} className="flex gap-2">
                <input type="hidden" name="id" value={b.id} />
                <select name="travelerId" defaultValue={b.traveler?.id ?? ""} className="input text-sm">
                  <option value="">— Sin asignar —</option>
                  {travelers.map((t) => <option key={t.id} value={t.id}>{t.name}</option>)}
                </select>
                <button className="btn-ghost text-sm text-blue-600 whitespace-nowrap">Guardar</button>
              </form>
            </div>

            <div className="mt-3 flex items-center justify-between border-t border-slate-100 pt-3">
              <button
                disabled={!b.traveler || !nfcSupported || writing === b.id}
                onClick={() => writeNfc(b)}
                className="btn-primary text-sm"
                title={!b.traveler ? "Asigna un viajero primero" : "Acerca la pulsera al equipo"}
              >
                {writing === b.id ? "Grabando…" : "📡 Grabar NFC"}
              </button>
              <form action={onDelete}>
                <input type="hidden" name="id" value={b.id} />
                <button className="text-sm text-red-400 hover:text-red-600">Eliminar</button>
              </form>
            </div>

            {status?.id === b.id ? (
              <p className={`mt-2 text-xs ${status.ok ? "text-emerald-600" : "text-red-600"}`}>{status.msg}</p>
            ) : null}
            {b.traveler ? (
              <p className="mt-2 truncate text-xs text-slate-400">→ {b.traveler.name}</p>
            ) : null}
          </div>
        ))}
      </div>

      {bracelets.length === 0 && (
        <div className="card p-10 text-center text-slate-500">Aún no hay pulseras registradas.</div>
      )}
    </div>
  );
}