'use client'

import { useState } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { SectionHeader } from '@/components/ui/SectionHeader'
import { GlassCard } from '@/components/ui/GlassCard'
import { Badge } from '@/components/ui/Badge'
import { fadeUp, staggerContainer, viewportConfig } from '@/lib/animations'

type RoadmapStep = {
  phase: string
  title: string
  desc: string
  metrics: string[]
  icon: string
  status: 'completed' | 'current' | 'upcoming'
}

const ROADMAP: RoadmapStep[] = [
  {
    phase: 'Phase 01',
    title: 'Society Geofencing',
    desc: 'Cooperative societies sign partnership agreements. Geofences are digitally matching with strict boundary lines.',
    metrics: ['99.8% Geofence Accuracy', 'Escrow Account Mappings', 'Resident Onboarding'],
    icon: '🗺️',
    status: 'completed',
  },
  {
    phase: 'Phase 02',
    title: 'Merchant Integration',
    desc: 'Onboarding nearby grocery shops, premium restaurants, pharmacies, and trusted home service professionals.',
    metrics: ['Catalog Editor Sync', 'Fast Merchant Approvals', 'API Device Activation'],
    icon: '🏪',
    status: 'current',
  },
  {
    phase: 'Phase 03',
    title: 'Fleet Calibration',
    desc: 'Activating Nearle Gear delivery riders. Dispatch rules are optimized with real-time navigation tools.',
    metrics: ['Optimal Path Training', 'Equipment Issuance', 'Payout System Verified'],
    icon: '🛵',
    status: 'upcoming',
  },
  {
    phase: 'Phase 04',
    title: 'Go-Live society Launch',
    desc: 'Platform soft launch within the geofenced society limits accompanied by exclusive society discounts.',
    metrics: ['Society Launch Event', 'Support Centers Active', '12-Minute Deliveries'],
    icon: '🔮',
    status: 'upcoming',
  },
]

export function OperationalPlan() {
  const [activeStep, setActiveStep] = useState<number>(1) // Default to active step (Phase 02)

  return (
    <div className="py-24 sm:py-32 bg-nearle-bgsoft px-5 sm:px-8 relative overflow-hidden">
      {/* Decorative vectors */}
      <div className="absolute inset-0 bg-grid-soft opacity-30 pointer-events-none" />

      <div className="max-w-7xl mx-auto">
        <SectionHeader
          label="Execution Blueprint"
          heading={
            <>
              Our Operational
              <br />
              <span className="bg-gradient-purple bg-clip-text text-transparent">
                Launch Roadmap
              </span>
            </>
          }
          sub="Watch how Nearle systematically activates cooperative societies and curates merchant networks."
          align="center"
          className="mb-16 sm:mb-20"
        />

        <div className="grid lg:grid-cols-12 gap-8 items-stretch">
          {/* Timeline side controls (5 cols) */}
          <div className="lg:col-span-5 flex flex-col gap-4">
            {ROADMAP.map((step, idx) => {
              const isActive = activeStep === idx
              return (
                <button
                  key={step.phase}
                  onClick={() => setActiveStep(idx)}
                  className={`text-left p-5 rounded-2xl border transition-all duration-300 focus:outline-none flex items-center justify-between ${
                    isActive
                      ? 'bg-purple-deep text-white border-purple-deep shadow-nearle-md'
                      : 'bg-white border-nearle-border hover:border-purple-primary text-nearle-dark'
                  }`}
                >
                  <div className="flex items-center gap-4">
                    <span className="text-2xl">{step.icon}</span>
                    <div>
                      <span className={`text-[10px] font-mono font-bold tracking-widest ${isActive ? 'text-purple-lavender' : 'text-purple-primary'}`}>
                        {step.phase}
                      </span>
                      <h4 className="font-display font-bold text-base mt-0.5">
                        {step.title}
                      </h4>
                    </div>
                  </div>

                  {step.status === 'completed' && (
                    <span className={`text-[10px] font-mono uppercase font-bold tracking-wider px-2 py-0.5 rounded-full ${isActive ? 'bg-white/20 text-white' : 'bg-green-100 text-green-700'}`}>
                      Completed
                    </span>
                  )}
                  {step.status === 'current' && (
                    <span className={`text-[10px] font-mono uppercase font-bold tracking-wider px-2 py-0.5 rounded-full animate-pulse ${isActive ? 'bg-white/20 text-white' : 'bg-purple-lavender text-purple-deep'}`}>
                      Active
                    </span>
                  )}
                </button>
              )
            })}
          </div>

          {/* Timeline detail container (7 cols) */}
          <div className="lg:col-span-7">
            <AnimatePresence mode="wait">
              <motion.div
                key={activeStep}
                initial={{ opacity: 0, x: 20 }}
                animate={{ opacity: 1, x: 0 }}
                exit={{ opacity: 0, x: -20 }}
                transition={{ duration: 0.3 }}
                className="h-full"
              >
                <GlassCard className="h-full p-8 flex flex-col justify-between border-purple-lavender/50 hover:border-purple-primary shadow-nearle-md">
                  <div>
                    <span className="text-xs font-mono font-bold text-purple-primary uppercase tracking-widest block mb-2">
                      Active Operational phase
                    </span>
                    <h3 className="h3-display text-nearle-dark mb-4">
                      {ROADMAP[activeStep]!.title}
                    </h3>
                    <p className="font-body text-nearle-mid text-sm leading-relaxed mb-8">
                      {ROADMAP[activeStep]!.desc}
                    </p>

                    <h4 className="font-display font-bold text-xs uppercase text-purple-deep mb-4 tracking-wider">
                      Key Deliverables & Metrics
                    </h4>

                    <div className="grid sm:grid-cols-2 gap-4">
                      {ROADMAP[activeStep]!.metrics.map((metric) => (
                        <div
                          key={metric}
                          className="flex items-center gap-3 p-4 bg-purple-soft/40 border border-purple-lavender/20 rounded-xl"
                        >
                          <span className="w-1.5 h-1.5 rounded-full bg-purple-primary" />
                          <span className="font-display font-bold text-xs text-nearle-dark">
                            {metric}
                          </span>
                        </div>
                      ))}
                    </div>
                  </div>

                  <div className="mt-8 pt-6 border-t border-nearle-border flex justify-between items-center flex-wrap gap-4">
                    <p className="font-body text-xs text-nearle-light">
                      * Launch timings subject to merchant onboarding rate and society density geofencing tests.
                    </p>
                  </div>
                </GlassCard>
              </motion.div>
            </AnimatePresence>
          </div>
        </div>
      </div>
    </div>
  )
}
