"use client";

import { useState } from "react";
import { CreditCard, Loader2, ToggleLeft, ToggleRight, CheckCircle } from "lucide-react";

type Props = {
  initialMercadoPago: boolean;
  initialPayku: boolean;
};

export default function AdminPaymentSettings({ initialMercadoPago, initialPayku }: Props) {
  const [mpEnabled, setMpEnabled] = useState(initialMercadoPago);
  const [paykuEnabled, setPaykuEnabled] = useState(initialPayku);
  const [loading, setLoading] = useState(false);
  const [saved, setSaved] = useState(false);
  const [error, setError] = useState("");

  const save = async () => {
    setLoading(true);
    setSaved(false);
    setError("");
    try {
      const res = await fetch("/api/admin/site-config", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          payment_mercadopago_enabled: mpEnabled ? "true" : "false",
          payment_payku_enabled: paykuEnabled ? "true" : "false",
        }),
      });
      if (!res.ok) {
        const data = await res.json().catch(() => ({}));
        setError(data.error || "No se pudo guardar la configuración de pagos");
        return;
      }
      setSaved(true);
      setTimeout(() => setSaved(false), 3000);
    } finally {
      setLoading(false);
    }
  };

  const bothOff = !mpEnabled && !paykuEnabled;

  return (
    <div className="glass-panel rounded-2xl p-6 space-y-5 border border-[#009ee3]/20">
      <div>
        <div className="flex items-center gap-2 mb-1">
          <CreditCard className="w-5 h-5 text-[#009ee3]" />
          <h2 className="text-lg font-bold text-white">Medios de pago en la tienda</h2>
        </div>
        <p className="text-sm text-gray-400 max-w-2xl">
          Enciende o apaga los botones del carrito. Si un medio está apagado, tampoco se acepta
          en el checkout aunque alguien lo envíe a mano.
        </p>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
        <button
          type="button"
          onClick={() => setMpEnabled((v) => !v)}
          disabled={loading}
          className={`flex items-center justify-between gap-3 px-4 py-3 rounded-xl font-bold text-sm transition border ${
            mpEnabled
              ? "bg-[#009ee3]/15 text-[#7dd3fc] border-[#009ee3]/40"
              : "bg-white/5 text-gray-400 border-white/10"
          }`}
        >
          <span>Mercado Pago</span>
          <span className="flex items-center gap-1.5">
            {mpEnabled ? <ToggleRight className="w-5 h-5" /> : <ToggleLeft className="w-5 h-5" />}
            {mpEnabled ? "ON" : "OFF"}
          </span>
        </button>

        <button
          type="button"
          onClick={() => setPaykuEnabled((v) => !v)}
          disabled={loading}
          className={`flex items-center justify-between gap-3 px-4 py-3 rounded-xl font-bold text-sm transition border ${
            paykuEnabled
              ? "bg-[#10b981]/15 text-[#6ee7b7] border-[#10b981]/40"
              : "bg-white/5 text-gray-400 border-white/10"
          }`}
        >
          <span>Payku</span>
          <span className="flex items-center gap-1.5">
            {paykuEnabled ? <ToggleRight className="w-5 h-5" /> : <ToggleLeft className="w-5 h-5" />}
            {paykuEnabled ? "ON" : "OFF"}
          </span>
        </button>
      </div>

      {bothOff && (
        <p className="text-amber-400 text-sm">
          Ambos están apagados: el carrito no tendrá medio de pago online. Los clientes solo podrán
          comprar por WhatsApp / transferencia.
        </p>
      )}

      <div className="flex items-center gap-3 flex-wrap">
        <button
          type="button"
          onClick={save}
          disabled={loading}
          className="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-[#009ee3] text-white font-bold text-sm hover:opacity-90 disabled:opacity-50"
        >
          {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : null}
          Guardar
        </button>
        {saved && (
          <span className="flex items-center gap-1.5 text-green-400 text-sm">
            <CheckCircle className="w-4 h-4" /> Guardado
          </span>
        )}
        {error && <span className="text-red-400 text-sm">{error}</span>}
      </div>
    </div>
  );
}