"use client";

import { FormEvent, useEffect, useState } from "react";
import { useAuth } from "@/context/AuthContext";
import { AccountSection } from "@/components/account/AccountSection";
import { shippingFieldClass } from "@/lib/colombia";

export default function InfoPage() {
  const { customer, updateProfile } = useAuth();
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [busy, setBusy] = useState(false);
  const [saved, setSaved] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (!customer) return;
    setFirstName(customer.first_name || "");
    setLastName(customer.last_name || "");
  }, [customer]);

  if (!customer) {
    return <AccountSection title="Mi información">Cargando…</AccountSection>;
  }

  const onSubmit = async (e: FormEvent) => {
    e.preventDefault();
    setBusy(true);
    setError(null);
    setSaved(false);
    try {
      await updateProfile({ firstName, lastName });
      setSaved(true);
    } catch (err) {
      setError(
        err instanceof Error ? err.message : "No se pudo guardar."
      );
    } finally {
      setBusy(false);
    }
  };

  return (
    <AccountSection title="Mi información">
      <form onSubmit={onSubmit} className="space-y-4 max-w-md">
        <div>
          <label className="ot-label-condensed text-[11px] text-ot-muted">
            Nombre
          </label>
          <input
            className={`${shippingFieldClass} mt-2`}
            value={firstName}
            onChange={(e) => setFirstName(e.target.value)}
            required
          />
        </div>
        <div>
          <label className="ot-label-condensed text-[11px] text-ot-muted">
            Apellido
          </label>
          <input
            className={`${shippingFieldClass} mt-2`}
            value={lastName}
            onChange={(e) => setLastName(e.target.value)}
          />
        </div>
        <div>
          <label className="ot-label-condensed text-[11px] text-ot-muted">
            Email
          </label>
          <input
            className={`${shippingFieldClass} mt-2 opacity-70`}
            value={customer.email}
            disabled
            readOnly
          />
        </div>
        <button className="ot-btn" type="submit" disabled={busy}>
          {busy ? "Guardando…" : "Guardar cambios"}
        </button>
        {saved ? (
          <p className="text-sm text-ot-green">Datos actualizados.</p>
        ) : null}
        {error ? <p className="text-sm text-red-700">{error}</p> : null}
      </form>
      <p className="mt-6 text-sm text-ot-muted max-w-md">
        Puedes entrar a esta misma cuenta con Google o con el correo y la clave
        de OLD TENNIS. Esa clave no es la de Gmail.
      </p>
    </AccountSection>
  );
}