"use client";

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

type License = {
  id: string;
  name: string;
  maxTravelers: number;
  price: number;
  rank: number;
  active: boolean;
};

export default function LicenseForm({ license }: { license?: License }) {
  const [open, setOpen] = useState(false);
  const [saving, setSaving] = useState(false);
  const router = useRouter();
  const editing = Boolean(license);

  async function onSubmit(formData: FormData) {
    setSaving(true);
    await saveLicense(formData);
    setSaving(false);
    setOpen(false);
    router.refresh();
  }

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

      <Modal open={open} onClose={() => setOpen(false)} title={editing ? "Editar licencia" : "Nueva licencia"}>
        <form action={onSubmit} className="space-y-4">
          {license ? <input type="hidden" name="id" value={license.id} /> : null}
          <div>
            <label className="label">Nombre *</label>
            <input name="name" required defaultValue={license?.name} className="input" />
          </div>
          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="label">Máx. viajeros *</label>
              <input
                name="maxTravelers"
                type="number"
                min={1}
                required
                defaultValue={license?.maxTravelers ?? 25}
                className="input"
              />
            </div>
            <div>
              <label className="label">Precio (USD)</label>
              <input
                name="price"
                type="number"
                min={0}
                step="0.01"
                defaultValue={license?.price ?? 0}
                className="input"
              />
            </div>
          </div>
          <div>
            <label className="label">Orden (rank)</label>
            <input
              name="rank"
              type="number"
              min={0}
              defaultValue={license?.rank ?? 1}
              className="input"
            />
            <p className="mt-1 text-xs text-slate-400">
              Define el orden de actualización automática (menor a mayor cupo).
            </p>
          </div>
          <label className="flex items-center gap-2 text-sm">
            <input type="checkbox" name="active" defaultChecked={license?.active ?? true} />
            Licencia activa
          </label>
          <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>
    </>
  );
}