import React, { useState } from 'react';
import { motion } from 'motion/react';
import { CheckCircle2, Clock, Calendar, ArrowRight, ShieldCheck } from 'lucide-react';
import { SectionHeading } from '../ui/SectionHeading';
import { GlassCard } from '../ui/GlassCard';
import { Badge } from '../ui/Badge';
import { roadmapData } from '../../data/roadmap';

interface RoadmapSectionProps {
  onOpenWaitlist: () => void;
}

export const RoadmapSection: React.FC<RoadmapSectionProps> = ({ onOpenWaitlist }) => {
  const [activePhaseIndex, setActivePhaseIndex] = useState<number>(1); // Default to current Phase 2

  return (
    <section id="roadmap" className="py-24 bg-slate-950 relative overflow-hidden border-t border-slate-900">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <SectionHeading
          badgeText="Public Milestones"
          badgeVariant="tangerine"
          title="Transparent Roadmap."
          gradientTitle="Execution Driven."
          subtitle="Track our engineering progression step-by-step from live micro-SaaS foundation to decentralized protocol deployment."
        />

        {/* Phase Selection Stepper Header */}
        <div className="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-5 gap-3 mb-10">
          {roadmapData.map((phase, idx) => {
            const isSelected = activePhaseIndex === idx;
            const isCompleted = phase.status === 'completed';
            const isCurrent = phase.status === 'current';

            return (
              <button
                key={phase.quarter}
                onClick={() => setActivePhaseIndex(idx)}
                className={`p-4 rounded-2xl border text-left transition-all cursor-pointer flex flex-col justify-between ${
                  isSelected
                    ? 'bg-slate-900 border-orange-500 ring-1 ring-orange-500/40 shadow-xl'
                    : 'bg-slate-950/60 border-slate-800/80 hover:border-slate-700'
                }`}
              >
                <div>
                  <div className="flex items-center justify-between mb-2">
                    <span className="text-[11px] font-mono text-slate-400">0{idx + 1}</span>
                    {isCompleted && <Badge variant="sky" showDot={false}>Done</Badge>}
                    {isCurrent && <Badge variant="tangerine" showDot={true}>Active</Badge>}
                    {!isCompleted && !isCurrent && <Badge variant="neutral" showDot={false}>Upcoming</Badge>}
                  </div>
                  <h4 className="text-xs font-bold text-white line-clamp-1">{phase.quarter}</h4>
                </div>
                <p className="text-[11px] text-slate-400 mt-2 line-clamp-1">{phase.title}</p>
              </button>
            );
          })}
        </div>

        {/* Selected Phase Active Card */}
        <motion.div
          key={activePhaseIndex}
          initial={{ opacity: 0, y: 15 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.3 }}
        >
          <GlassCard gradientBorder={true} className="p-8">
            <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 pb-6 border-b border-slate-800">
              <div>
                <div className="flex items-center gap-3">
                  <Badge
                    variant={
                      roadmapData[activePhaseIndex].status === 'completed'
                        ? 'sky'
                        : roadmapData[activePhaseIndex].status === 'current'
                        ? 'tangerine'
                        : 'sky'
                    }
                  >
                    {roadmapData[activePhaseIndex].quarter}
                  </Badge>
                  <span className="text-xs font-mono text-slate-400 flex items-center gap-1">
                    <Calendar className="w-3.5 h-3.5" /> Stage {activePhaseIndex + 1} of 5
                  </span>
                </div>
                <h3 className="text-2xl font-bold text-white mt-2">
                  {roadmapData[activePhaseIndex].title}
                </h3>
              </div>

              <button
                onClick={onOpenWaitlist}
                className="text-xs font-semibold text-orange-400 hover:text-orange-300 flex items-center gap-1 cursor-pointer"
              >
                Get early waitlist updates <ArrowRight className="w-3.5 h-3.5" />
              </button>
            </div>

            <p className="text-sm text-slate-300 mt-6 leading-relaxed">
              {roadmapData[activePhaseIndex].description}
            </p>

            {/* Milestones Checklist */}
            <div className="mt-8">
              <h4 className="text-xs font-mono uppercase tracking-widest text-slate-400 mb-4 font-semibold">
                Milestones & Deliverables
              </h4>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                {roadmapData[activePhaseIndex].milestones.map((milestone, i) => (
                  <div key={i} className="p-3.5 rounded-xl bg-slate-950/80 border border-slate-800/80 flex items-start gap-3">
                    <CheckCircle2 className={`w-4 h-4 mt-0.5 flex-shrink-0 ${
                      roadmapData[activePhaseIndex].status === 'completed'
                        ? 'text-sky-400'
                        : roadmapData[activePhaseIndex].status === 'current'
                        ? 'text-orange-400'
                        : 'text-slate-500'
                    }`} />
                    <span className="text-xs text-slate-200 leading-relaxed">{milestone}</span>
                  </div>
                ))}
              </div>
            </div>
          </GlassCard>
        </motion.div>

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