"use client";

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

export default function ReturnsPage() {
  const { customer } = useAuth();
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [order, setOrder] = useState("");
  const [type, setType] = useState("cambio");
  const [message, setMessage] = useState("");
  const [busy, setBusy] = useState(false);
  const [done, setDone] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [prefilled, setPrefilled] = useState(false);

  useEffect(() => {
    if (!customer || prefilled) return;
    const full = [customer.first_name, customer.last_name]
      .filter(Boolean)
      .join(" ");
    if (full) setName(full);
    if (customer.email) setEmail(customer.email);
    setPrefilled(true);
  }, [customer, prefilled]);

  const onSubmit = async (e: FormEvent) => {
    e.preventDefault();
    setBusy(true);
    setError(null);
    setDone(false);
    const res = await fetch("/api/contact", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ name, email, order, type, message }),
    });
    const data = (await res.json().catch(() => ({}))) as {
      message?: string;
      ok?: boolean;
    };
    setBusy(false);
    if (!res.ok) {
      setError(data.message || "No se pudo enviar la solicitud.");
      return;
    }
    setDone(true);
    setMessage("");
    setOrder("");
  };

  return (
    <AccountSection title="Cambio y devolución" wide>
      <div className="space-y-4 text-sm leading-relaxed text-ot-ink/90 max-w-xl">
        <p>
          <strong>Antes del envío:</strong> puedes pedir cancelación mientras el
          pedido esté por alistar o alistado. Con guía generada (despachado) ya
          no se cancela.
        </p>
        <p>
          <strong>Después de recibir:</strong> tienes{" "}
          <strong>30 días</strong> para cambio o devolución, con la prenda sin
          uso, etiquetas y empaque.
        </p>
      </div>

      <form onSubmit={onSubmit} className="mt-8 space-y-4 max-w-xl">
        <p className="text-[11px] tracking-[0.16em] uppercase text-ot-gold">
          Solicitud
        </p>
        <div>
          <label className="ot-label-condensed text-[11px] text-ot-muted">
            Nombre
          </label>
          <input
            className={`${shippingFieldClass} mt-2`}
            value={name}
            onChange={(e) => setName(e.target.value)}
            required
          />
        </div>
        <div>
          <label className="ot-label-condensed text-[11px] text-ot-muted">
            Email
          </label>
          <input
            type="email"
            className={`${shippingFieldClass} mt-2`}
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            required
          />
        </div>
        <div className="grid sm:grid-cols-2 gap-4">
          <div>
            <label className="ot-label-condensed text-[11px] text-ot-muted">
              Nº de pedido
            </label>
            <input
              className={`${shippingFieldClass} mt-2`}
              placeholder="Ej. 1042"
              value={order}
              onChange={(e) => setOrder(e.target.value)}
            />
          </div>
          <div>
            <label className="ot-label-condensed text-[11px] text-ot-muted">
              Tipo
            </label>
            <select
              className={`${shippingFieldClass} mt-2`}
              value={type}
              onChange={(e) => setType(e.target.value)}
            >
              <option value="cambio">Cambio</option>
              <option value="devolucion">Devolución</option>
              <option value="cancelacion">Cancelación</option>
              <option value="otro">Otro</option>
            </select>
          </div>
        </div>
        <div>
          <label className="ot-label-condensed text-[11px] text-ot-muted">
            Motivo / detalle
          </label>
          <textarea
            className={`${shippingFieldClass} mt-2 min-h-[100px] resize-y`}
            placeholder="Talla, color, motivo…"
            value={message}
            onChange={(e) => setMessage(e.target.value)}
            required
            minLength={8}
          />
        </div>
        <button className="ot-btn" type="submit" disabled={busy}>
          {busy ? "Enviando…" : "Enviar solicitud"}
        </button>
        {done ? (
          <p className="text-sm text-ot-green">
            Solicitud enviada. Te responderemos a {email}.
          </p>
        ) : null}
        {error ? <p className="text-sm text-red-700">{error}</p> : null}
      </form>

      <Link
        href="/cambios-y-devoluciones"
        className="inline-block ot-btn ot-btn-ghost mt-6"
      >
        Ver política completa
      </Link>
    </AccountSection>
  );
}