"use client";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { motion, AnimatePresence } from "framer-motion";
import { Shield, Lock, Clock } from "lucide-react";

const STEPS_PENDING = [
  { label: "Order Submitted", done: true },
  { label: "Redirecting to PayPal", done: true },
  { label: "Payment Processing", done: false, active: true },
  { label: "Verifying with PayPal", done: false },
  { label: "Confirming Order", done: false },
];

export function PaymentPending() {
  const router = useRouter();
  const [progress, setProgress] = useState(0);
  const [stepIdx, setStepIdx] = useState(2);

  useEffect(() => {
    // Simulate PayPal processing
    const interval = setInterval(() => {
      setProgress((p) => {
        const next = p + (100 / 30);
        return next >= 100 ? 100 : next;
      });
    }, 100);

    const step3 = setTimeout(() => setStepIdx(3), 1500);
    const step4 = setTimeout(() => setStepIdx(4), 2800);

    // After 3.5s → redirect to success
    const done = setTimeout(() => {
      router.push("/marketplace/payment/success");
    }, 3600);

    return () => {
      clearInterval(interval);
      clearTimeout(step3);
      clearTimeout(step4);
      clearTimeout(done);
    };
  }, [router]);

  return (
    <div className="min-h-full flex flex-col items-center justify-center px-4 py-12" style={{ background: "var(--bg)" }}>
      <div className="w-full max-w-sm">
        {/* Spinner */}
        <div className="flex flex-col items-center mb-10">
          <div className="relative w-24 h-24 mb-6">
            <motion.div
              className="absolute inset-0 rounded-full border-4 border-[var(--border)]"
            />
            <motion.div
              className="absolute inset-0 rounded-full border-4 border-t-[var(--accent)] border-r-[var(--accent)]"
              animate={{ rotate: 360 }}
              transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
            />
            <div className="absolute inset-0 flex items-center justify-center">
              <Lock size={24} className="text-[var(--accent)]" />
            </div>
          </div>

          <h1 className="text-xl font-black text-[var(--text-primary)] mb-2 text-center">
            Processing Payment
          </h1>
          <p className="text-sm text-[var(--text-muted)] text-center">
            Please wait while we verify your payment with PayPal. Do not close this page.
          </p>
        </div>

        {/* Progress bar */}
        <div className="mb-8">
          <div className="flex items-center justify-between mb-2">
            <span className="text-xs text-[var(--text-muted)]">Verification Progress</span>
            <span className="text-xs font-mono text-[var(--accent)]">{Math.round(progress)}%</span>
          </div>
          <div className="h-2 rounded-full overflow-hidden" style={{ background: "rgba(255,255,255,0.08)" }}>
            <motion.div
              className="h-full rounded-full"
              style={{ background: "linear-gradient(90deg, var(--accent), #ff6b6b)" }}
              animate={{ width: `${progress}%` }}
              transition={{ duration: 0.1 }}
            />
          </div>
        </div>

        {/* Steps */}
        <div className="rounded-2xl overflow-hidden border border-[var(--border)] mb-6" style={{ background: "var(--card)" }}>
          {STEPS_PENDING.map((step, i) => {
            const isDone = i < stepIdx;
            const isActive = i === stepIdx;
            return (
              <div
                key={step.label}
                className="flex items-center gap-3 px-5 py-3 border-b border-[var(--border)] last:border-0"
              >
                <div
                  className="w-6 h-6 rounded-full flex items-center justify-center shrink-0"
                  style={{
                    background: isDone
                      ? "rgba(34,197,94,0.2)"
                      : isActive
                      ? "rgba(252,0,0,0.15)"
                      : "rgba(255,255,255,0.06)",
                  }}
                >
                  {isDone ? (
                    <motion.div
                      initial={{ scale: 0 }}
                      animate={{ scale: 1 }}
                      className="w-3 h-3 rounded-full bg-green-400"
                    />
                  ) : isActive ? (
                    <motion.div
                      className="w-3 h-3 rounded-full"
                      style={{ background: "var(--accent)" }}
                      animate={{ scale: [1, 1.3, 1] }}
                      transition={{ duration: 0.8, repeat: Infinity }}
                    />
                  ) : (
                    <div className="w-3 h-3 rounded-full" style={{ background: "rgba(255,255,255,0.15)" }} />
                  )}
                </div>
                <span
                  className="text-xs font-medium"
                  style={{
                    color: isDone
                      ? "#22c55e"
                      : isActive
                      ? "var(--text-primary)"
                      : "var(--text-muted)",
                  }}
                >
                  {step.label}
                </span>
                {isActive && (
                  <motion.span
                    className="ml-auto text-[10px] text-[var(--accent)]"
                    animate={{ opacity: [0, 1, 0] }}
                    transition={{ duration: 1.2, repeat: Infinity }}
                  >
                    Processing…
                  </motion.span>
                )}
              </div>
            );
          })}
        </div>

        {/* Trust note */}
        <div
          className="flex items-center justify-center gap-2 p-3 rounded-xl"
          style={{ background: "rgba(34,197,94,0.06)", border: "1px solid rgba(34,197,94,0.12)" }}
        >
          <Shield size={13} className="text-green-400" />
          <p className="text-[11px] text-green-400 font-medium">
            256-bit SSL encrypted · PayPal Secure
          </p>
        </div>
      </div>
    </div>
  );
}
