'use client'

import React from 'react';
import { useNavigate } from '@/lib/nextRouterAdapter';
import { motion } from 'framer-motion';
import { Mic, AlertTriangle, ArrowRight, ShieldCheck, Sparkles, BarChart2 } from 'lucide-react';

const upgrades = [
  { key: 'practice', name: 'Practice', price: '₹499', attempts: '10 sessions/month', popular: true },
  { key: 'unlimited', name: 'Unlimited', price: '₹999', attempts: 'Unlimited sessions', popular: false },
];

export default function AttemptsExhausted() {
  const navigate = useNavigate();

  return (
    <div className="min-h-screen bg-[#FAF5F0] flex flex-col">
      {/* Header */}
      <div className="bg-gradient-to-r from-[#4A1429] to-[#5A1839] shadow-xl border-b-4 border-[#D4B038]">
        <div className="max-w-3xl mx-auto px-4 py-4 flex items-center gap-2.5">
          <button onClick={() => navigate('/speech-dashboard')} className="flex items-center gap-2.5">
            <div className="w-8 h-8 rounded-lg bg-[#D4B038] flex items-center justify-center">
              <Mic className="w-4 h-4 text-[#4A1429]" />
            </div>
            <span className="font-extrabold text-white text-base">Cambridge <span className="text-[#D4B038]">Veritas</span></span>
          </button>
        </div>
      </div>

      <div className="flex-1 flex items-center justify-center px-4 py-12">
        <div className="w-full max-w-md">
          {/* Alert card */}
          <motion.div
            initial={{ opacity: 0, scale: 0.92 }} animate={{ opacity: 1, scale: 1 }}
            transition={{ type: 'spring', stiffness: 180 }}
            className="bg-white rounded-3xl shadow-2xl overflow-hidden mb-6"
          >
            <div className="h-2 bg-gradient-to-r from-red-400 via-red-500 to-red-400" />
            <div className="p-8 text-center">
              <motion.div
                initial={{ scale: 0 }} animate={{ scale: 1 }} transition={{ delay: 0.2, type: 'spring', stiffness: 200 }}
                className="w-20 h-20 rounded-2xl bg-red-50 border-2 border-red-100 flex items-center justify-center mx-auto mb-5"
              >
                <AlertTriangle className="w-10 h-10 text-red-400" />
              </motion.div>
              <h1 className="text-2xl font-extrabold text-[#4A1429] mb-3">All Attempts Used!</h1>
              <p className="text-gray-500 text-sm leading-relaxed mb-2">
                You&apos;ve exhausted all your speaking test attempts on your current plan.
              </p>
              <p className="text-gray-400 text-xs leading-relaxed mb-6">
                Upgrade your plan to continue practising and improving your English speaking score.
              </p>

              {/* Upgrade options */}
              <div className="space-y-3 mb-6">
                {upgrades.map((u) => (
                  <button
                    key={u.key}
                    onClick={() => navigate(`/speech-dashboard/payment?plan=${u.key}`)}
                    className={`w-full flex items-center justify-between px-5 py-4 rounded-2xl border-2 transition-all font-bold ${
                      u.popular
                        ? 'bg-[#4A1429] border-[#4A1429] text-white hover:bg-[#3A1020]'
                        : 'border-[#E5DDD5] text-[#4A1429] hover:border-[#D4B038] bg-white'
                    }`}
                  >
                    <div className="text-left">
                      <div className="text-sm font-extrabold flex items-center gap-2">
                        {u.name}
                        {u.popular && <span className="text-[10px] bg-[#D4B038] text-[#4A1429] px-2 py-0.5 rounded-full font-extrabold">Popular</span>}
                      </div>
                      <div className={`text-xs font-semibold mt-0.5 ${u.popular ? 'text-white/60' : 'text-gray-400'}`}>{u.attempts}</div>
                    </div>
                    <div className="flex items-center gap-2">
                      <span className="text-xl font-extrabold">{u.price}</span>
                      <ArrowRight className="w-4 h-4" />
                    </div>
                  </button>
                ))}
              </div>

              {/* View past results */}
              <button
                onClick={() => navigate('/speech-dashboard/past-results')}
                className="w-full flex items-center justify-center gap-2 py-3.5 rounded-2xl border-2 border-[#E5DDD5] text-[#4A1429] font-bold text-sm hover:border-[#D4B038] transition-all"
              >
                <BarChart2 className="w-4 h-4" />
                View My Past Results
              </button>
            </div>
          </motion.div>

          {/* Trust badges */}
          <motion.div
            initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.4 }}
            className="flex items-center justify-center gap-5 flex-wrap text-xs text-gray-400 font-semibold"
          >
            <span className="flex items-center gap-1"><ShieldCheck className="w-3.5 h-3.5 text-emerald-500" /> Secure</span>
            <span className="flex items-center gap-1"><Sparkles className="w-3.5 h-3.5 text-[#D4B038]" /> Instant Access</span>
          </motion.div>

          <div className="text-center mt-5">
            <button onClick={() => navigate('/speech-dashboard')} className="text-sm text-gray-400 hover:text-[#4A1429] transition-colors font-semibold">
              ← Back to Dashboard
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}