"use client";

import { FormEvent, useCallback, useEffect, useState } from "react";
import { AccountSection } from "@/components/account/AccountSection";
import { useAuth } from "@/context/AuthContext";
import { COLOMBIA_DEPARTMENTS, shippingFieldClass } from "@/lib/colombia";
import {
  createCustomerAddress,
  deleteCustomerAddress,
  formatAddressLabel,
  listCustomerAddresses,
  setDefaultShippingAddress,
  updateCustomerAddress,
  type SavedAddress,
} from "@/lib/customer-addresses";

type Draft = {
  id?: string;
  name: string;
  phone: string;
  address: string;
  address2: string;
  city: string;
  province: string;
  notes: string;
  addressName: string;
};

const emptyDraft = (): Draft => ({
  name: "",
  phone: "",
  address: "",
  address2: "",
  city: "",
  province: "",
  notes: "",
  addressName: "Casa",
});

export default function AddressesPage() {
  const { customer } = useAuth();
  const [addresses, setAddresses] = useState<SavedAddress[]>([]);
  const [loading, setLoading] = useState(true);
  const [draft, setDraft] = useState<Draft | null>(null);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [ok, setOk] = useState<string | null>(null);

  const reload = useCallback(async () => {
    setLoading(true);
    try {
      setAddresses(await listCustomerAddresses());
    } catch {
      setAddresses([]);
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    if (customer) reload();
  }, [customer, reload]);

  if (!customer) {
    return <AccountSection title="Mis direcciones">Cargando…</AccountSection>;
  }

  const openNew = () => {
    setError(null);
    setOk(null);
    setDraft({
      ...emptyDraft(),
      name: [customer.first_name, customer.last_name].filter(Boolean).join(" "),
    });
  };

  const openEdit = (addr: SavedAddress) => {
    setError(null);
    setOk(null);
    setDraft({
      id: addr.id,
      name: [addr.first_name, addr.last_name].filter(Boolean).join(" "),
      phone: addr.phone || "",
      address: addr.address_1 || "",
      address2: addr.address_2 || "",
      city: addr.city || "",
      province: addr.province || "",
      notes: String(addr.metadata?.delivery_notes || ""),
      addressName: addr.address_name || "Envío",
    });
  };

  const onSave = async (e: FormEvent) => {
    e.preventDefault();
    if (!draft) return;
    setBusy(true);
    setError(null);
    setOk(null);
    const parts = draft.name.trim().split(/\s+/);
    const firstName = parts[0] || draft.name;
    const lastName = parts.slice(1).join(" ") || "OT";
    const payload = {
      firstName,
      lastName,
      phone: draft.phone.trim(),
      address: draft.address.trim(),
      address2: draft.address2.trim(),
      city: draft.city.trim(),
      province: draft.province.trim(),
      notes: draft.notes.trim(),
      addressName: draft.addressName.trim() || "Envío",
      isDefaultShipping: true,
    };
    try {
      if (draft.id) await updateCustomerAddress(draft.id, payload);
      else await createCustomerAddress(payload);
      setDraft(null);
      setOk("Dirección guardada.");
      await reload();
    } catch (err) {
      setError(err instanceof Error ? err.message : "No se pudo guardar.");
    } finally {
      setBusy(false);
    }
  };

  return (
    <AccountSection title="Mis direcciones">
      <p className="mb-6">
        Guarda direcciones de envío para verificarlas en cada compra, editarlas o
        agregar una nueva.
      </p>

      {loading ? <p>Cargando…</p> : null}

      {!loading && !addresses.length && !draft ? (
        <p className="text-ot-muted mb-4">Aún no tienes direcciones guardadas.</p>
      ) : null}

      <div className="space-y-3 mb-6">
        {addresses.map((addr) => (
          <div
            key={addr.id}
            className="border border-black/10 bg-white px-4 py-3 text-sm"
          >
            <div className="flex flex-wrap justify-between gap-2">
              <p className="font-medium">
                {formatAddressLabel(addr)}
                {addr.is_default_shipping ? (
                  <span className="ml-2 text-[10px] tracking-[0.12em] uppercase text-ot-gold">
                    Predeterminada
                  </span>
                ) : null}
              </p>
              <div className="flex flex-wrap gap-2">
                {!addr.is_default_shipping ? (
                  <button
                    type="button"
                    className="underline text-xs"
                    onClick={async () => {
                      await setDefaultShippingAddress(addr.id);
                      await reload();
                      setOk("Dirección marcada como predeterminada.");
                    }}
                  >
                    Usar como predeterminada
                  </button>
                ) : null}
                <button
                  type="button"
                  className="underline text-xs"
                  onClick={() => openEdit(addr)}
                >
                  Editar
                </button>
                <button
                  type="button"
                  className="underline text-xs text-red-700"
                  onClick={async () => {
                    await deleteCustomerAddress(addr.id);
                    await reload();
                    setOk("Dirección eliminada.");
                  }}
                >
                  Eliminar
                </button>
              </div>
            </div>
            <p className="mt-1 text-ot-muted">
              {[addr.address_1, addr.address_2, addr.city, addr.province, addr.phone]
                .filter(Boolean)
                .join(" · ")}
            </p>
          </div>
        ))}
      </div>

      {!draft ? (
        <button type="button" className="ot-btn" onClick={openNew}>
          Agregar dirección
        </button>
      ) : (
        <form onSubmit={onSave} className="space-y-3 border border-black/10 p-4 bg-white">
          <p className="font-serif text-2xl">
            {draft.id ? "Editar dirección" : "Nueva dirección"}
          </p>
          <input
            className={shippingFieldClass}
            placeholder="Nombre de la dirección (Casa, Oficina…)"
            value={draft.addressName}
            onChange={(e) => setDraft({ ...draft, addressName: e.target.value })}
          />
          <input
            className={shippingFieldClass}
            placeholder="Nombre completo"
            value={draft.name}
            onChange={(e) => setDraft({ ...draft, name: e.target.value })}
            required
          />
          <input
            className={shippingFieldClass}
            placeholder="Teléfono / WhatsApp"
            value={draft.phone}
            onChange={(e) => setDraft({ ...draft, phone: e.target.value })}
            required
          />
          <input
            className={shippingFieldClass}
            placeholder="Dirección"
            value={draft.address}
            onChange={(e) => setDraft({ ...draft, address: e.target.value })}
            required
          />
          <input
            className={shippingFieldClass}
            placeholder="Complemento (opcional)"
            value={draft.address2}
            onChange={(e) => setDraft({ ...draft, address2: e.target.value })}
          />
          <div className="grid sm:grid-cols-2 gap-3">
            <input
              className={shippingFieldClass}
              placeholder="Ciudad"
              value={draft.city}
              onChange={(e) => setDraft({ ...draft, city: e.target.value })}
              required
            />
            <select
              className={shippingFieldClass}
              value={draft.province}
              onChange={(e) => setDraft({ ...draft, province: e.target.value })}
              required
            >
              <option value="" disabled>
                Departamento
              </option>
              {COLOMBIA_DEPARTMENTS.map((d) => (
                <option key={d} value={d}>
                  {d}
                </option>
              ))}
            </select>
          </div>
          <textarea
            className={shippingFieldClass}
            placeholder="Notas de entrega (opcional)"
            rows={2}
            value={draft.notes}
            onChange={(e) => setDraft({ ...draft, notes: e.target.value })}
          />
          <div className="flex flex-wrap gap-2">
            <button className="ot-btn" type="submit" disabled={busy}>
              {busy ? "Guardando…" : "Guardar"}
            </button>
            <button
              type="button"
              className="ot-btn-ghost ot-btn"
              onClick={() => setDraft(null)}
            >
              Cancelar
            </button>
          </div>
        </form>
      )}

      {ok ? <p className="mt-4 text-sm text-ot-green">{ok}</p> : null}
      {error ? <p className="mt-4 text-sm text-red-700">{error}</p> : null}
    </AccountSection>
  );
}