"use client";

import { useMemo, useState } from "react";
import { assignTraveler } from "../../actions";

type TravelerOption = { id: string; firstName: string; lastName: string };

export default function AssignTravelerSearch({
  tripId,
  baseCost,
  available,
}: {
  tripId: string;
  baseCost: number;
  available: TravelerOption[];
}) {
  const [query, setQuery] = useState("");
  const [selected, setSelected] = useState<TravelerOption | null>(null);

  const filtered = useMemo(() => {
    const q = query.trim().toLowerCase();
    if (!q) return available;
    return available.filter((t) =>
      `${t.firstName} ${t.lastName}`.toLowerCase().includes(q)
    );
  }, [available, query]);

  if (available.length === 0) {
    return <p className="text-xs text-slate-400">Todos los viajeros están asignados.</p>;
  }

  function pick(t: TravelerOption) {
    setSelected(t);
    setQuery(`${t.firstName} ${t.lastName}`);
  }

  function clearSelection() {
    setSelected(null);
    setQuery("");
  }

  return (
    <form action={assignTraveler} className="space-y-2">
      <input type="hidden" name="tripId" value={tripId} />
      <input type="hidden" name="travelerId" value={selected?.id ?? ""} required />

      <div className="relative">
        <input
          type="search"
          value={query}
          onChange={(e) => {
            setQuery(e.target.value);
            if (selected && e.target.value !== `${selected.firstName} ${selected.lastName}`) {
              setSelected(null);
            }
          }}
          placeholder="Buscar viajero por nombre…"
          className="input"
          autoComplete="off"
        />
        {selected ? (
          <button
            type="button"
            onClick={clearSelection}
            className="absolute right-2 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600"
            aria-label="Limpiar búsqueda"
          >
            ✕
          </button>
        ) : null}
      </div>

      {query.trim() && !selected ? (
        <ul className="max-h-44 overflow-y-auto rounded-lg ring-1 ring-slate-200">
          {filtered.length === 0 ? (
            <li className="px-3 py-2 text-sm text-slate-400">Sin resultados.</li>
          ) : (
            filtered.map((t) => (
              <li key={t.id}>
                <button
                  type="button"
                  onClick={() => pick(t)}
                  className="w-full px-3 py-2 text-left text-sm transition hover:bg-blue-50"
                >
                  {t.firstName} {t.lastName}
                </button>
              </li>
            ))
          )}
        </ul>
      ) : null}

      {selected ? (
        <p className="text-xs text-emerald-600">
          Seleccionado: <b>{selected.firstName} {selected.lastName}</b>
        </p>
      ) : null}

      <div className="flex gap-2">
        <input
          name="cost"
          type="number"
          step="0.01"
          placeholder={`Costo (${baseCost})`}
          className="input"
        />
        <button
          type="submit"
          disabled={!selected}
          className="btn-primary text-sm whitespace-nowrap disabled:opacity-50"
        >
          Asignar
        </button>
      </div>
    </form>
  );
}