"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import FileUpload from "@/components/FileUpload";
import { addDocument } from "../../actions";

type Assignment = { id: string; tripName: string };

const TYPES = [
  ["FLIGHT", "✈️ Vuelos"],
  ["TRAIN", "🚌 Transporte"],
  ["ENTRY", "🎫 Entradas"],
  ["RESERVATION", "🏨 Hotel"],
  ["PASSPORT", "🛂 Pasaporte"],
  ["VISA", "📑 Visa"],
  ["INE", "🪪 INE"],
  ["LICENSE", "🚗 Licencia"],
  ["INSURANCE", "🛡️ Seguro"],
  ["OTHER", "📄 Otros"],
];

export default function AddDocumentForm({
  travelerId,
  assignments,
}: {
  travelerId: string;
  assignments: Assignment[];
}) {
  const [open, setOpen] = useState(false);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState("");
  const router = useRouter();

  async function onSubmit(formData: FormData) {
    setSaving(true);
    setError("");
    const res = await addDocument(formData);
    setSaving(false);
    if (res?.error) return setError(res.error);
    setOpen(false);
    router.refresh();
  }

  if (!open) {
    return (
      <button className="btn-primary text-sm" onClick={() => setOpen(true)}>
        + Subir documento / ticket
      </button>
    );
  }

  return (
    <form action={onSubmit} className="space-y-3 rounded-xl bg-slate-50 p-4">
      <input type="hidden" name="travelerId" value={travelerId} />
      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
        <div>
          <label className="label">Tipo</label>
          <select name="type" className="input">
            {TYPES.map(([v, l]) => <option key={v} value={v}>{l}</option>)}
          </select>
        </div>
        <div>
          <label className="label">Viaje (opcional)</label>
          <select name="assignmentId" className="input">
            <option value="">— General —</option>
            {assignments.map((a) => <option key={a.id} value={a.id}>{a.tripName}</option>)}
          </select>
        </div>
        <div className="sm:col-span-2">
          <label className="label">Título</label>
          <input name="title" required placeholder="Ej. Vuelo CDMX → París" className="input" />
        </div>
        <div className="sm:col-span-2">
          <FileUpload name="fileUrl" label="Archivo (PDF o imagen)" accept="image/*,application/pdf" />
        </div>
      </div>
      {error ? <p className="text-sm text-red-600">{error}</p> : null}
      <div className="flex gap-2">
        <button type="submit" disabled={saving} className="btn-primary text-sm">{saving ? "Subiendo…" : "Guardar"}</button>
        <button type="button" className="btn-ghost text-sm" onClick={() => setOpen(false)}>Cancelar</button>
      </div>
    </form>
  );
}