"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import Modal from "@/components/Modal";
import FileUpload from "@/components/FileUpload";
import { createAgency, updateAgency } from "../actions";

type License = { id: string; name: string; maxTravelers: number };
type Agency = {
  id: string;
  name: string;
  logoUrl: string | null;
  taxId: string | null;
  address: string | null;
  phone: string | null;
  whatsapp: string | null;
  email: string | null;
  ownerName: string;
  ownerEmail: string | null;
  ownerPhone: string | null;
  licenseId: string | null;
  billingCutoffDay: number | null;
  invoiceCreationDay: number | null;
  loginPassword: string | null;
  loginEmail: string | null;
};

export default function AgencyForm({
  licenses,
  agency,
  trigger,
}: {
  licenses: License[];
  agency?: Agency;
  trigger?: "button" | "edit";
}) {
  const [open, setOpen] = useState(false);
  const [error, setError] = useState("");
  const [saving, setSaving] = useState(false);
  const router = useRouter();
  const editing = Boolean(agency);

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

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

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

          <fieldset className="space-y-3">
            <legend className="text-sm font-semibold text-slate-700">Datos de la agencia</legend>
            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
              <div className="sm:col-span-2">
                <label className="label">Nombre de la agencia *</label>
                <input name="name" required defaultValue={agency?.name} className="input" />
              </div>
              <div>
                <label className="label">RFC / Identificación</label>
                <input name="taxId" defaultValue={agency?.taxId ?? ""} className="input" />
              </div>
              <div className="sm:col-span-2">
                <FileUpload
                  name="logoUrl"
                  label="Logotipo"
                  accept="image/*"
                  defaultUrl={agency?.logoUrl}
                  preview
                />
              </div>
              <div className="sm:col-span-2">
                <label className="label">Dirección</label>
                <input name="address" defaultValue={agency?.address ?? ""} className="input" />
              </div>
              <div>
                <label className="label">Teléfono</label>
                <input name="phone" defaultValue={agency?.phone ?? ""} className="input" />
              </div>
              <div>
                <label className="label">WhatsApp</label>
                <input name="whatsapp" defaultValue={agency?.whatsapp ?? ""} className="input" placeholder="+52..." />
              </div>
              <div>
                <label className="label">Correo de contacto</label>
                <input name="email" type="email" defaultValue={agency?.email ?? ""} className="input" />
              </div>
              <div>
                <label className="label">Licencia</label>
                <select name="licenseId" defaultValue={agency?.licenseId ?? ""} className="input">
                  <option value="">— Sin licencia —</option>
                  {licenses.map((l) => (
                    <option key={l.id} value={l.id}>
                      {l.name} (hasta {l.maxTravelers})
                    </option>
                  ))}
                </select>
              </div>
              <div>
                <label className="label">Día de corte</label>
                <input
                  name="billingCutoffDay"
                  type="number"
                  min={1}
                  max={31}
                  defaultValue={agency?.billingCutoffDay ?? ""}
                  className="input"
                  placeholder="1–31"
                />
              </div>
              <div>
                <label className="label">Día de creación de factura</label>
                <input
                  name="invoiceCreationDay"
                  type="number"
                  min={1}
                  max={31}
                  defaultValue={agency?.invoiceCreationDay ?? ""}
                  className="input"
                  placeholder="1–31"
                />
              </div>
            </div>
          </fieldset>

          <fieldset className="space-y-3">
            <legend className="text-sm font-semibold text-slate-700">Dueño / Administrador</legend>
            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
              <div>
                <label className="label">Nombre del dueño *</label>
                <input name="ownerName" required defaultValue={agency?.ownerName} className="input" />
              </div>
              <div>
                <label className="label">Teléfono del dueño</label>
                <input name="ownerPhone" defaultValue={agency?.ownerPhone ?? ""} className="input" />
              </div>
              <div className="sm:col-span-2">
                <label className="label">Correo del dueño</label>
                <input name="ownerEmail" type="email" defaultValue={agency?.ownerEmail ?? ""} className="input" />
              </div>
            </div>
          </fieldset>

          {!editing ? (
            <fieldset className="space-y-3">
              <legend className="text-sm font-semibold text-slate-700">Acceso de la agencia</legend>
              <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                <div>
                  <label className="label">Correo de acceso *</label>
                  <input name="loginEmail" type="email" required className="input" />
                </div>
                <div>
                  <label className="label">Contraseña *</label>
                  <input name="password" type="text" required className="input" />
                </div>
              </div>
            </fieldset>
          ) : (
            <fieldset className="space-y-3">
              <legend className="text-sm font-semibold text-slate-700">Acceso de la agencia</legend>
              <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                <div>
                  <label className="label">Correo de acceso</label>
                  <input
                    name="loginEmail"
                    type="email"
                    required
                    defaultValue={agency?.loginEmail ?? ""}
                    className="input"
                  />
                </div>
                <div>
                  <label className="label">Contraseña</label>
                  <input
                    name="password"
                    type="text"
                    defaultValue={agency?.loginPassword ?? ""}
                    className="input"
                    placeholder="Contraseña de acceso"
                  />
                </div>
              </div>
              {!agency?.loginPassword ? (
                <p className="text-xs text-slate-500">
                  Las agencias creadas antes de esta función no tienen contraseña guardada. Escribe
                  una nueva para registrarla y actualizar el acceso.
                </p>
              ) : null}
            </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"}
            </button>
          </div>
        </form>
      </Modal>
    </>
  );
}