"use client";

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

export type TripData = {
  id: string;
  name: string;
  originCountry: string | null;
  destinationCountry: string | null;
  startDate: string | null;
  endDate: string | null;
  baseCost: number;
  currencyFrom: string | null;
  currencyTo: string | null;
  exchangeRate: number | null;
  description: string | null;
};

const CURRENCIES = Array.from(new Set(COUNTRIES.map((c) => c.currency))).sort();

export default function TripForm({ trip }: { trip?: TripData }) {
  const [open, setOpen] = useState(false);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState("");
  const router = useRouter();
  const editing = Boolean(trip);

  async function onSubmit(formData: FormData) {
    setSaving(true);
    setError("");
    const res = editing ? await updateTrip(formData) : await createTrip(formData);
    setSaving(false);
    if (res && "error" in res && res.error) return setError(res.error);
    setOpen(false);
    router.refresh();
    if (!editing && res && "id" in res && res.id) router.push(`/agency/trips/${res.id}`);
  }

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

      <Modal open={open} onClose={() => setOpen(false)} title={editing ? "Editar viaje" : "Crear viaje"} wide>
        <form action={onSubmit} className="space-y-4">
          {trip ? <input type="hidden" name="id" value={trip.id} /> : null}
          <div>
            <label className="label">Nombre del viaje *</label>
            <input name="name" required defaultValue={trip?.name} className="input" placeholder="Ej. París Mágico 2026" />
          </div>
          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
            <div>
              <label className="label">País de origen</label>
              <select name="originCountry" defaultValue={trip?.originCountry ?? "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">País destino</label>
              <select name="destinationCountry" defaultValue={trip?.destinationCountry ?? ""} 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">Fecha inicio</label>
              <input name="startDate" type="date" defaultValue={trip?.startDate?.slice(0, 10) ?? ""} className="input" />
            </div>
            <div>
              <label className="label">Fecha fin</label>
              <input name="endDate" type="date" defaultValue={trip?.endDate?.slice(0, 10) ?? ""} className="input" />
            </div>
            <div>
              <label className="label">Costo base por viajero</label>
              <input name="baseCost" type="number" step="0.01" min="0" defaultValue={trip?.baseCost ?? 0} className="input" />
            </div>
            <div className="grid grid-cols-3 gap-2">
              <div>
                <label className="label">De</label>
                <select name="currencyFrom" defaultValue={trip?.currencyFrom ?? "MXN"} className="input">
                  {CURRENCIES.map((c) => <option key={c} value={c}>{c}</option>)}
                </select>
              </div>
              <div>
                <label className="label">A</label>
                <select name="currencyTo" defaultValue={trip?.currencyTo ?? "EUR"} className="input">
                  {CURRENCIES.map((c) => <option key={c} value={c}>{c}</option>)}
                </select>
              </div>
              <div>
                <label className="label">Tasa</label>
                <input name="exchangeRate" type="number" step="0.0001" defaultValue={trip?.exchangeRate ?? ""} className="input" placeholder="auto" />
              </div>
            </div>
          </div>
          <div>
            <label className="label">Descripción</label>
            <textarea name="description" defaultValue={trip?.description ?? ""} className="input" rows={2} />
          </div>
          <p className="text-xs text-slate-400">
            Si dejas la tasa vacía, el panel del viajero usará el tipo de cambio diario automático.
          </p>
          {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…" : "Guardar"}</button>
          </div>
        </form>
      </Modal>
    </>
  );
}