"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import Modal from "@/components/Modal";
import FileUpload from "@/components/FileUpload";
import { COUNTRIES } from "@/lib/countries";
import { createTraveler, updateTraveler } from "../actions";

type Contact = { name: string; relationship?: string; country?: string; phone: string; email?: string };

export type TravelerData = {
  id: string;
  firstName: string;
  lastName: string;
  photoUrl: string | null;
  birthDate: string | null;
  gender: string | null;
  email: string | null;
  phone: string | null;
  passportNumber: string | null;
  nationality: string | null;
  residenceCountry: string | null;
  language: string;
  bloodType: string | null;
  allergies: string | null;
  conditions: string | null;
  medications: string | null;
  medicalNotes: string | null;
  emergencyContacts: Contact[];
};

const LANGS = [
  ["es", "Español"], ["en", "Inglés"], ["fr", "Francés"], ["it", "Italiano"],
  ["de", "Alemán"], ["pt", "Portugués"], ["ja", "Japonés"], ["zh", "Chino"],
];

export default function TravelerForm({ traveler }: { traveler?: TravelerData }) {
  const [open, setOpen] = useState(false);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState("");
  const [contacts, setContacts] = useState<Contact[]>(traveler?.emergencyContacts ?? []);
  const router = useRouter();
  const editing = Boolean(traveler);

  async function onSubmit(formData: FormData) {
    setSaving(true);
    setError("");
    formData.set("contacts", JSON.stringify(contacts));
    const res = editing ? await updateTraveler(formData) : await createTraveler(formData);
    setSaving(false);
    if (res?.error) return setError(res.error);
    setOpen(false);
    router.refresh();
  }

  function updateContact(i: number, field: keyof Contact, value: string) {
    setContacts((cs) => cs.map((c, idx) => (idx === i ? { ...c, [field]: value } : c)));
  }

  return (
    <>
      {editing ? (
        <button className="btn-ghost text-sm text-blue-600" onClick={() => setOpen(true)}>Editar</button>
      ) : (
        <button className="btn-primary" onClick={() => setOpen(true)}>+ Nuevo viajero</button>
      )}

      <Modal open={open} onClose={() => setOpen(false)} title={editing ? "Editar viajero" : "Registrar viajero"} wide>
        <form action={onSubmit} className="space-y-5">
          {traveler ? <input type="hidden" name="id" value={traveler.id} /> : null}

          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
            <div>
              <label className="label">Nombre *</label>
              <input name="firstName" required defaultValue={traveler?.firstName} className="input" />
            </div>
            <div>
              <label className="label">Apellidos *</label>
              <input name="lastName" required defaultValue={traveler?.lastName} className="input" />
            </div>
            <div className="sm:col-span-2">
              <FileUpload name="photoUrl" label="Fotografía" accept="image/*" defaultUrl={traveler?.photoUrl} preview />
            </div>
            <div>
              <label className="label">Fecha de nacimiento</label>
              <input name="birthDate" type="date" defaultValue={traveler?.birthDate?.slice(0, 10) ?? ""} className="input" />
            </div>
            <div>
              <label className="label">Género</label>
              <select name="gender" defaultValue={traveler?.gender ?? ""} className="input">
                <option value="">—</option>
                <option value="M">Masculino</option>
                <option value="F">Femenino</option>
                <option value="X">Otro</option>
              </select>
            </div>
            <div>
              <label className="label">Correo</label>
              <input name="email" type="email" defaultValue={traveler?.email ?? ""} className="input" />
            </div>
            <div>
              <label className="label">Teléfono</label>
              <input name="phone" defaultValue={traveler?.phone ?? ""} className="input" />
            </div>
            <div>
              <label className="label">Pasaporte</label>
              <input name="passportNumber" defaultValue={traveler?.passportNumber ?? ""} className="input" />
            </div>
            <div>
              <label className="label">Nacionalidad</label>
              <select name="nationality" defaultValue={traveler?.nationality ?? ""} className="input">
                <option value="">—</option>
                {COUNTRIES.map((c) => (
                  <option key={c.code} value={c.code}>{c.flag} {c.name}</option>
                ))}
              </select>
            </div>
            <div>
              <label className="label">País de residencia</label>
              <select name="residenceCountry" defaultValue={traveler?.residenceCountry ?? "MX"} className="input">
                <option value="">—</option>
                {COUNTRIES.map((c) => (
                  <option key={c.code} value={c.code}>{c.flag} {c.name}</option>
                ))}
              </select>
            </div>
            <div>
              <label className="label">Idioma del viajero</label>
              <select name="language" defaultValue={traveler?.language ?? "es"} className="input">
                {LANGS.map(([code, name]) => (
                  <option key={code} value={code}>{name}</option>
                ))}
              </select>
            </div>
          </div>

          <fieldset className="rounded-xl bg-slate-50 p-4">
            <legend className="px-2 text-sm font-semibold text-slate-700">🩺 Datos clínicos</legend>
            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
              <div>
                <label className="label">Tipo de sangre</label>
                <select name="bloodType" defaultValue={traveler?.bloodType ?? ""} className="input">
                  <option value="">—</option>
                  {["O+","O-","A+","A-","B+","B-","AB+","AB-"].map((b) => <option key={b} value={b}>{b}</option>)}
                </select>
              </div>
              <div>
                <label className="label">Alergias</label>
                <input name="allergies" defaultValue={traveler?.allergies ?? ""} className="input" />
              </div>
              <div>
                <label className="label">Condiciones / Padecimientos</label>
                <input name="conditions" defaultValue={traveler?.conditions ?? ""} className="input" />
              </div>
              <div>
                <label className="label">Medicamentos</label>
                <input name="medications" defaultValue={traveler?.medications ?? ""} className="input" />
              </div>
              <div className="sm:col-span-2">
                <label className="label">Notas médicas</label>
                <textarea name="medicalNotes" defaultValue={traveler?.medicalNotes ?? ""} className="input" rows={2} />
              </div>
            </div>
          </fieldset>

          <fieldset className="rounded-xl bg-slate-50 p-4">
            <div className="mb-2 flex items-center justify-between">
              <legend className="px-2 text-sm font-semibold text-slate-700">📞 Contactos de emergencia</legend>
              <button
                type="button"
                className="btn-ghost text-sm text-blue-600"
                onClick={() => setContacts((cs) => [...cs, { name: "", phone: "" }])}
              >
                + Agregar
              </button>
            </div>
            <div className="space-y-2">
              {contacts.length === 0 ? (
                <p className="px-2 text-xs text-slate-400">Sin contactos. Agrega al menos uno.</p>
              ) : null}
              {contacts.map((c, i) => (
                <div key={i} className="grid grid-cols-1 gap-2 rounded-lg bg-white p-2 ring-1 ring-slate-200 sm:grid-cols-12">
                  <input className="input sm:col-span-3" placeholder="Nombre" value={c.name} onChange={(e) => updateContact(i, "name", e.target.value)} />
                  <input className="input sm:col-span-2" placeholder="Parentesco" value={c.relationship ?? ""} onChange={(e) => updateContact(i, "relationship", e.target.value)} />
                  <select
                    className="input sm:col-span-2"
                    value={c.country ?? ""}
                    onChange={(e) => updateContact(i, "country", e.target.value)}
                  >
                    <option value="">Lada</option>
                    {COUNTRIES.map((co) => (
                      <option key={co.code} value={co.code}>{co.flag} {co.dial}</option>
                    ))}
                  </select>
                  <input className="input sm:col-span-2" placeholder="Teléfono" value={c.phone} onChange={(e) => updateContact(i, "phone", e.target.value)} />
                  <input className="input sm:col-span-2" placeholder="Correo" value={c.email ?? ""} onChange={(e) => updateContact(i, "email", e.target.value)} />
                  <button type="button" className="text-red-500 sm:col-span-1" onClick={() => setContacts((cs) => cs.filter((_, idx) => idx !== i))}>✕</button>
                </div>
              ))}
            </div>
          </fieldset>

          {error ? <p className="rounded-lg bg-red-50 px-3 py-2 text-sm text-red-700">{error}</p> : null}

          <div className="flex justify-end gap-2">
            <button type="button" className="btn-ghost" onClick={() => setOpen(false)}>Cancelar</button>
            <button type="submit" disabled={saving} className="btn-primary">
              {saving ? "Guardando…" : editing ? "Guardar cambios" : "Registrar viajero"}
            </button>
          </div>
        </form>
      </Modal>
    </>
  );
}