"use client";

import { useState } from "react";
import { Check, Loader2, Sparkles, Tag, Ticket, Truck, X } from "lucide-react";
import { useCart } from "@/context/CartContext";

/*
  Os cupons no carrinho dos temas Padrão e Vitrine (o Vendor tem os seus, em
  templates/vendor). Até dois por pedido: um de desconto e um de frete grátis.
  Mostra os que o servidor deixou valer (digitados ou automáticos), cada um
  com o seu X; o campo para digitar outro; o motivo quando um código não
  ficou ("faltam R$ 20"), com "Tirar"; e os cupons que a loja deixou à vista
  para tocar e usar. O desconto vem sempre do servidor (/api/catalog/cupom).
*/

export default function CupomNoCarrinho({ corDaLoja, compacto = false }: { corDaLoja?: string; compacto?: boolean }) {
  const { appliedCoupons, applyCoupon, removeCoupon, couponNotices, availableCoupons } = useCart();
  const [codigo, setCodigo] = useState("");
  const [aplicando, setAplicando] = useState<string | null>(null);
  const [resposta, setResposta] = useState<{ ok: boolean; texto: string } | null>(null);
  const cor = corDaLoja || "#4f46e5";

  const aplicar = async (valor: string) => {
    const limpo = valor.trim();
    if (!limpo || aplicando) return;
    setAplicando(limpo.toUpperCase());
    const r = await applyCoupon(limpo);
    setResposta({ ok: r.ok, texto: r.message });
    if (r.ok) setCodigo("");
    setAplicando(null);
  };

  const remover = (code: string) => {
    removeCoupon(code);
    setResposta({ ok: true, texto: "Cupom removido." });
  };

  const cheio = appliedCoupons.length >= 2;

  return (
    <div className="space-y-2">
      <span className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-gray-500">
        <Tag size={12} />
        {appliedCoupons.length > 1 ? "Cupons de desconto" : "Cupom de desconto"}
      </span>

      {appliedCoupons.map((cupom) => (
        <div key={cupom.code} className="flex items-start gap-3 rounded-xl px-3 py-2.5 text-white shadow-sm" style={{ backgroundColor: cor }}>
          <span className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-white/20">
            {cupom.slot === "frete" ? <Truck size={14} /> : cupom.automatic ? <Sparkles size={14} /> : <Ticket size={14} />}
          </span>
          <div className="min-w-0 flex-1">
            <p className="text-sm font-bold leading-tight">
              {cupom.slot === "frete"
                ? `Frete grátis: ${cupom.automatic ? cupom.name : cupom.code}`
                : cupom.automatic
                  ? `Desconto aplicado: ${cupom.name}`
                  : `Desconto: ${cupom.code}`}
            </p>
            <p className="mt-0.5 text-[11px] leading-snug text-white/85">{cupom.description}</p>
            {cupom.waitingShipping ? (
              <p className="mt-1 text-[11px] font-semibold text-white">O frete grátis entra quando você escolher a entrega.</p>
            ) : null}
          </div>
          {cupom.removable ? (
            <button
              type="button"
              onClick={() => remover(cupom.code)}
              className="shrink-0 rounded-full p-1 text-white/85 transition hover:bg-white/15 hover:text-white"
              aria-label={`Remover o cupom ${cupom.code}`}
            >
              <X size={16} />
            </button>
          ) : null}
        </div>
      ))}

      {!(compacto && cheio) ? (
        <form
          className="flex items-center gap-2"
          onSubmit={(e) => {
            e.preventDefault();
            void aplicar(codigo);
          }}
        >
          <input
            value={codigo}
            onChange={(e) => {
              setCodigo(e.target.value.toUpperCase());
              setResposta(null);
            }}
            placeholder={appliedCoupons.length ? "Tem outro cupom?" : "Digite seu cupom"}
            autoCapitalize="characters"
            autoComplete="off"
            spellCheck={false}
            aria-label="Código do cupom"
            className="min-w-0 flex-1 rounded-lg border border-gray-200 px-3 py-2 text-sm uppercase tracking-wide placeholder:normal-case placeholder:tracking-normal focus:outline-none focus:ring-2 focus:ring-indigo-500/20"
          />
          <button
            type="submit"
            disabled={Boolean(aplicando) || !codigo.trim()}
            className="rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50"
          >
            {aplicando && aplicando === codigo.trim().toUpperCase() ? <Loader2 size={16} className="animate-spin" /> : "Aplicar"}
          </button>
        </form>
      ) : null}

      {resposta && !resposta.ok ? (
        <p className="rounded-lg border border-rose-100 bg-rose-50 px-3 py-2 text-xs text-rose-600" role="status">
          {resposta.texto}
        </p>
      ) : resposta?.ok ? (
        <p className="flex items-center gap-1.5 text-xs font-medium text-emerald-600" role="status">
          <Check size={13} strokeWidth={3} /> {resposta.texto}
        </p>
      ) : null}

      {/* Os códigos guardados (do link ou digitados) que ainda não valem: saem num toque. */}
      {couponNotices.map((aviso) => (
        <div key={aviso.code} className="flex items-start gap-2 rounded-lg border border-rose-100 bg-rose-50 px-3 py-2 text-xs text-rose-600" role="status">
          <p className="min-w-0 flex-1">
            <strong className="font-semibold">{aviso.code}: </strong>
            {aviso.message}
          </p>
          <button type="button" onClick={() => remover(aviso.code)} className="shrink-0 font-semibold text-rose-700 hover:underline">
            Tirar
          </button>
        </div>
      ))}

      {availableCoupons.length ? (
        <div className="space-y-1.5 pt-1">
          <p className="text-[11px] font-semibold text-gray-500">Cupons da loja</p>
          <div className="flex flex-wrap gap-1.5">
            {availableCoupons.map((c) => (
              <button
                key={c.code}
                type="button"
                onClick={() => void aplicar(c.code)}
                disabled={Boolean(aplicando)}
                title={c.frase}
                className="group inline-flex max-w-full items-center gap-1.5 rounded-full border border-dashed px-2.5 py-1 text-left text-xs transition hover:bg-gray-50 disabled:opacity-60"
                style={{ borderColor: cor }}
              >
                {aplicando === c.code ? (
                  <Loader2 size={12} className="animate-spin" style={{ color: cor }} />
                ) : c.vaga === "frete" ? (
                  <Truck size={12} style={{ color: cor }} />
                ) : (
                  <Ticket size={12} style={{ color: cor }} />
                )}
                <span className="font-bold tracking-wide" style={{ color: cor }}>{c.code}</span>
                <span className="truncate text-gray-600">{c.rotulo}</span>
              </button>
            ))}
          </div>
          {appliedCoupons.length === 1 ? (
            <p className="text-[11px] text-gray-500">Um cupom de desconto e um de frete grátis podem ir juntos.</p>
          ) : null}
        </div>
      ) : null}
    </div>
  );
}