import React, { useState } from 'react';
import { Wallet, DollarSign, Link as LinkIcon, RefreshCw, AlertTriangle, ArrowRight, ShieldCheck, Sparkles, ExternalLink } from 'lucide-react';
import { HOW_TO_BUY_STEPS, YOUR_BUY_LINK, CONTRACT_ADDRESS } from '../config';
import { triggerBirthdayConfetti } from '../utils/confetti';
import coinImg from '../assets/images/bm_connect_coin_1787085516443.jpg';

export const HowToBuySection: React.FC = () => {
  const [solAmount, setSolAmount] = useState<string>('1.0');
  
  // Hypothetical estimated launch rate calculation (e.g. 1 SOL = 50,000 BMALPHA for interactive fun)
  const calculatedTokens = () => {
    const num = parseFloat(solAmount);
    if (isNaN(num) || num <= 0) return '0';
    return (num * 50000).toLocaleString();
  };

  const handleCtaClick = () => {
    triggerBirthdayConfetti();
  };

  const stepIcons = [Wallet, DollarSign, LinkIcon, RefreshCw];

  return (
    <section id="how-to-buy" className="py-24 relative overflow-hidden bg-transparent">
      {/* Background ambient accents */}
      <div className="absolute top-1/2 left-0 w-80 h-80 bg-[#FF8C32]/10 rounded-full blur-[140px] pointer-events-none -z-10" />
      <div className="absolute bottom-10 right-0 w-80 h-80 bg-[#00D7FF]/10 rounded-full blur-[140px] pointer-events-none -z-10" />

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        {/* Section Header */}
        <div className="text-center max-w-3xl mx-auto mb-16">
          <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 text-xs font-bold text-[#FF8C32] mb-3 shadow-sm">
            <Sparkles className="w-3.5 h-3.5 text-[#FF8C32]" />
            SWAP & PARTICIPATE
          </div>

          <h2
            id="how-to-buy-heading"
            className="font-display text-4xl sm:text-5xl font-black text-slate-900 dark:text-white tracking-tight"
          >
            HOW TO BUY <span className="text-gradient-brand">BM ALPHA</span>
          </h2>
          <p className="mt-4 text-slate-600 dark:text-gray-400 text-base sm:text-lg font-medium">
            Follow these 4 simple steps to join the BirthdayMessaging Solana meme revolution on launch day.
          </p>
        </div>

        {/* 4 Steps Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
          {HOW_TO_BUY_STEPS.map((item, idx) => {
            const Icon = stepIcons[idx];
            return (
              <div
                key={item.step}
                className="relative flex flex-col justify-between p-6 sm:p-7 rounded-2xl bg-white/90 dark:bg-[#161b2b]/90 border border-slate-200 dark:border-white/10 hover:border-[#FF8C32]/50 transition-all duration-300 group hover:-translate-y-1 shadow-md dark:shadow-lg backdrop-blur-xl"
              >
                <div>
                  {/* Step Number Badge */}
                  <div className="flex items-center justify-between mb-5">
                    <span className="font-display text-3xl font-black text-slate-300 dark:text-gray-600 group-hover:text-[#FF8C32] transition-colors">
                      {item.step}
                    </span>
                    <div className="w-10 h-10 rounded-xl bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10 group-hover:border-[#00D7FF] flex items-center justify-center transition-colors">
                      <Icon className="w-5 h-5 text-[#00A6DB] dark:text-[#00D7FF] group-hover:text-[#FF8C32] transition-colors" />
                    </div>
                  </div>

                  {/* Title & Description */}
                  <h3 className="font-display font-extrabold text-lg sm:text-xl text-slate-900 dark:text-white tracking-tight group-hover:text-[#00A6DB] dark:group-hover:text-[#00D7FF] transition-colors">
                    {item.title}
                  </h3>
                  <p className="mt-3 text-xs sm:text-sm text-slate-600 dark:text-gray-300 leading-relaxed font-normal">
                    {item.description}
                  </p>
                </div>

                {/* Practical Pro Tip */}
                <div className="mt-6 pt-4 border-t border-slate-200 dark:border-white/5">
                  <p className="text-[11px] font-medium text-slate-500 dark:text-gray-400">
                    💡 <span className="text-slate-700 dark:text-gray-300">{item.tip}</span>
                  </p>
                </div>
              </div>
            );
          })}
        </div>

        {/* Strong Security Warning Box */}
        <div className="p-5 sm:p-6 rounded-2xl bg-amber-50 dark:bg-amber-500/10 border border-amber-200 dark:border-amber-500/30 flex flex-col sm:flex-row items-start sm:items-center gap-4 mb-12 shadow-md dark:shadow-lg backdrop-blur-xl">
          <div className="w-10 h-10 rounded-xl bg-amber-100 dark:bg-amber-500/20 border border-amber-300 dark:border-amber-500/40 flex items-center justify-center shrink-0">
            <AlertTriangle className="w-5 h-5 text-amber-600 dark:text-amber-400" />
          </div>
          <div className="flex-1">
            <h4 className="font-display font-bold text-amber-900 dark:text-amber-300 text-sm sm:text-base">
              OFFICIAL VERIFICATION WARNING
            </h4>
            <p className="text-xs sm:text-sm text-amber-800/90 dark:text-amber-200/90 mt-0.5 leading-relaxed font-medium">
              Always verify official BM Alpha links and the contract address before making a transaction. Never trust unsolicited DMs or imitation tokens.
            </p>
          </div>
        </div>

        {/* Interactive Swap Preview & Pre-Launch Calculator */}
        <div className="max-w-xl mx-auto rounded-2xl bg-white/95 dark:bg-[#161b2b]/90 border border-slate-200 dark:border-white/10 p-6 sm:p-8 shadow-xl dark:shadow-2xl backdrop-blur-xl mb-12">
          <div className="flex items-center justify-between border-b border-slate-200 dark:border-white/5 pb-4 mb-5">
            <div className="flex items-center gap-2">
              <RefreshCw className="w-4 h-4 text-[#FF8C32]" />
              <span className="font-display font-bold text-xs uppercase tracking-wider text-slate-700 dark:text-gray-300">
                SWAP ESTIMATION PREVIEW
              </span>
            </div>
            <span className="text-[10px] font-bold px-2 py-0.5 rounded-full bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 border border-emerald-500/30">
              0% Slippage Tax
            </span>
          </div>

          <div className="space-y-4">
            {/* Input SOL */}
            <div className="p-4 rounded-xl bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10">
              <div className="flex items-center justify-between text-xs font-semibold text-slate-500 dark:text-gray-400 mb-1.5">
                <span>YOU PAY</span>
                <span>SOLANA</span>
              </div>
              <div className="flex items-center justify-between gap-4">
                <input
                  type="number"
                  min="0.1"
                  step="0.5"
                  value={solAmount}
                  onChange={(e) => setSolAmount(e.target.value)}
                  className="bg-transparent font-display text-2xl font-black text-slate-900 dark:text-white focus:outline-none w-full"
                  placeholder="1.0"
                />
                <div className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-slate-200 dark:bg-white/10 text-slate-900 dark:text-white font-bold text-xs shrink-0">
                  <span className="w-2 h-2 rounded-full bg-[#00D7FF]" />
                  <span>SOL</span>
                </div>
              </div>
            </div>

            {/* Down Arrow separator */}
            <div className="flex justify-center -my-2 relative z-10">
              <div className="w-8 h-8 rounded-full bg-slate-100 dark:bg-[#0a0c14] border border-slate-200 dark:border-white/10 flex items-center justify-center shadow">
                <ArrowRight className="w-4 h-4 text-slate-600 dark:text-gray-300 rotate-90" />
              </div>
            </div>

            {/* Output BM Alpha */}
            <div className="p-4 rounded-xl bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10">
              <div className="flex items-center justify-between text-xs font-semibold text-slate-500 dark:text-gray-400 mb-1.5">
                <span>YOU RECEIVE (ESTIMATED)</span>
                <span>BM ALPHA</span>
              </div>
              <div className="flex items-center justify-between gap-4">
                <div className="font-display text-2xl font-black text-[#FF8C32] truncate">
                  ~ {calculatedTokens()}
                </div>
                <div className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-[#FF8C32]/15 text-[#FF8C32] border border-[#FF8C32]/30 font-bold text-xs shrink-0">
                  <img src={coinImg} alt="Coin" className="w-4 h-4 rounded-full" />
                  <span>BMALPHA</span>
                </div>
              </div>
            </div>
          </div>

          {/* Action CTA Button */}
          <div className="mt-6">
            <a
              id="how-to-buy-cta"
              href={YOUR_BUY_LINK}
              onClick={handleCtaClick}
              className="w-full flex items-center justify-center gap-2 px-6 py-4 rounded-full font-display font-black text-sm sm:text-base text-black bg-[#FF8C32] hover:bg-[#E6761D] shadow-[0_0_25px_rgba(255,140,50,0.4)] transition-all active:scale-95 text-center"
            >
              <span>GET READY TO BUY</span>
              <ArrowRight className="w-4 h-4 text-black" />
            </a>
            <p className="text-[11px] text-center text-slate-500 dark:text-gray-400 mt-2.5">
              Trading opens on Solana decentralized exchanges upon launch on August 31, 2026 at 10 PM GMT.
            </p>
          </div>
        </div>

      </div>
    </section>
  );
};
