'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 AppDetails = {
  id: string
  name: string
  purpose: string
  playUrl: string
  features: string[]
  themeColor: string
  mockScreen: React.ReactNode
}

export function AppEcosystem() {
  const [activeApp, setActiveApp] = useState<string>('deal')

  const APPS: AppDetails[] = [
    {
      id: 'deal',
      name: 'Nearle Deal',
      purpose: 'Customer Shopping & Hyperlocal Commerce App',
      playUrl: 'https://play.google.com/store/apps/details?id=com.nearle.deal',
      themeColor: 'bg-purple-deep',
      features: [
        'Grocery & vegetable shopping',
        'Restaurant food delivery',
        'Exclusive hyperlocal local society discounts',
        'Smart neighborhood deals',
      ],
      mockScreen: (
        <div className="w-full h-full bg-[#FAF8FB] p-5 flex flex-col justify-between font-body text-nearle-dark select-none">
          {/* Header */}
          <div className="flex items-center justify-between pb-3 border-b border-purple-lavender/30">
            <span className="font-display font-extrabold text-sm text-purple-deep">Nearle Deal</span>
            <span className="w-2.5 h-2.5 rounded-full bg-green-500 animate-pulse" />
          </div>

          {/* Body */}
          <div className="flex-1 flex flex-col justify-center py-4">
            <p className="text-[10px] uppercase font-mono tracking-wider text-purple-primary">Best Selling Near You</p>
            <h4 className="font-display font-bold text-base mt-1">RS Puram Organic Mart</h4>

            <div className="mt-3 bg-white p-3 rounded-2xl border border-nearle-border shadow-nearle-sm flex items-center gap-3">
              <span className="text-2xl">🥬</span>
              <div className="flex-1">
                <p className="font-display font-bold text-xs">Fresh Farm Spinach</p>
                <p className="text-[10px] text-nearle-mid mt-0.5">Qty: 500g · Fast Delivery</p>
              </div>
              <span className="font-mono text-xs font-bold text-purple-deep">₹28</span>
            </div>

            <div className="mt-3 bg-purple-soft/60 border border-purple-lavender/30 p-3 rounded-2xl flex items-center justify-between">
              <div className="flex items-center gap-2">
                <span className="text-xs">🛵</span>
                <span className="text-[10px] font-bold text-purple-deep">Delivery in 14 Mins</span>
              </div>
              <span className="text-[9px] uppercase font-mono tracking-widest text-purple-primary font-bold">Track</span>
            </div>
          </div>

          {/* Footer Checkout */}
          <button className="w-full py-2.5 bg-purple-deep text-white rounded-full font-bold text-xs shadow-cta hover:bg-purple-primary transition">
            Proceed to Checkout
          </button>
        </div>
      ),
    },
    {
      id: 'partner',
      name: 'Nearle Partner',
      purpose: 'Merchant & Local Shop Management Platform',
      playUrl: 'https://play.google.com/store/apps/details?id=com.nearle.partner',
      themeColor: 'bg-purple-primary',
      features: [
        'Instant order notification alerts',
        'Intuitive inventory catalog editor',
        'Sales analysis and growth dashboards',
        'Fast direct bank payout settlements',
      ],
      mockScreen: (
        <div className="w-full h-full bg-[#FCFAFD] p-5 flex flex-col justify-between font-body text-nearle-dark select-none">
          {/* Header */}
          <div className="flex items-center justify-between pb-3 border-b border-purple-lavender/30">
            <span className="font-display font-extrabold text-sm text-purple-deep">Nearle Partner</span>
            <span className="text-[10px] font-mono bg-purple-lavender px-2 py-0.5 rounded-full text-purple-deep font-bold">Active</span>
          </div>

          {/* Body */}
          <div className="flex-1 flex flex-col justify-center py-4">
            <p className="text-[10px] uppercase font-mono tracking-wider text-purple-primary">Business Analytics</p>
            <h4 className="font-display font-bold text-base mt-1">Today&apos;s Revenue</h4>

            <div className="mt-3 bg-white p-4 rounded-2xl border border-nearle-border shadow-nearle-sm">
              <p className="text-2xl font-display font-extrabold text-nearle-dark">₹12,480</p>
              <div className="flex items-center gap-1.5 text-green-600 text-xs mt-1 font-bold">
                <span>↑ 18.5%</span>
                <span className="text-nearle-light font-normal text-[10px]">vs yesterday</span>
              </div>
            </div>

            <div className="mt-3 grid grid-cols-2 gap-2 text-center">
              <div className="bg-purple-soft/40 p-2.5 rounded-xl border border-purple-lavender/10">
                <p className="font-mono text-xs font-bold text-purple-deep">38</p>
                <p className="text-[9px] text-nearle-light mt-0.5">Orders Accepted</p>
              </div>
              <div className="bg-purple-soft/40 p-2.5 rounded-xl border border-purple-lavender/10">
                <p className="font-mono text-xs font-bold text-purple-deep">99.2%</p>
                <p className="text-[9px] text-nearle-light mt-0.5">Accuracy Rate</p>
              </div>
            </div>
          </div>

          {/* Footer Active Alert */}
          <div className="bg-emerald-500 text-white rounded-full p-2 text-center text-[10px] font-bold tracking-wider animate-pulse uppercase">
            ⚡ New Order Received
          </div>
        </div>
      ),
    },
    {
      id: 'gear',
      name: 'Nearle Gear',
      purpose: 'Delivery Partner Fleet Optimization App',
      playUrl: 'https://play.google.com/store/apps/details?id=com.nearle.gear',
      themeColor: 'bg-purple-accent',
      features: [
        'Smart real-time route path optimization',
        'Direct rider earnings and payout log',
        'Instant pickup/delivery verification alerts',
        'Flexible custom slots for riders',
      ],
      mockScreen: (
        <div className="w-full h-full bg-[#FAF8FB] p-5 flex flex-col justify-between font-body text-nearle-dark select-none">
          {/* Header */}
          <div className="flex items-center justify-between pb-3 border-b border-purple-lavender/30">
            <span className="font-display font-extrabold text-sm text-purple-deep">Nearle Gear</span>
            <span className="text-[10px] font-mono bg-purple-soft text-purple-deep px-2 py-0.5 rounded-full border border-purple-lavender/30 font-bold">On Duty</span>
          </div>

          {/* Body */}
          <div className="flex-1 flex flex-col justify-center py-4">
            <p className="text-[10px] uppercase font-mono tracking-wider text-purple-primary">Optimal Delivery Route</p>
            <h4 className="font-display font-bold text-base mt-1">Route #4902</h4>

            <div className="mt-3 bg-white p-3 rounded-2xl border border-nearle-border shadow-nearle-sm flex flex-col gap-3 font-body">
              <div className="flex gap-2">
                <span className="text-purple-primary font-mono text-xs">A</span>
                <span className="text-xs text-nearle-dark font-bold">Kalyan Grocer (Pickup)</span>
              </div>
              <div className="flex gap-2 border-t border-nearle-border/40 pt-2">
                <span className="text-purple-deep font-mono text-xs">B</span>
                <span className="text-xs text-nearle-dark font-bold">Siddharth Apts (Drop)</span>
              </div>
            </div>

            <div className="mt-3 bg-purple-soft/60 border border-purple-lavender/30 p-2.5 rounded-xl flex justify-between items-center">
              <span className="text-[10px] text-nearle-mid font-semibold">Active Slot Earnings</span>
              <span className="font-mono text-xs font-bold text-purple-deep">₹480</span>
            </div>
          </div>

          {/* Footer Action */}
          <button className="w-full py-2.5 bg-purple-deep text-white rounded-full font-bold text-xs shadow-cta hover:bg-purple-primary transition">
            Swipe to Complete Drop
          </button>
        </div>
      ),
    },
    {
      id: 'admin',
      name: 'Nearle Admin',
      purpose: 'Operations Control & Analytics Platform',
      playUrl: 'https://play.google.com/store/apps/details?id=com.nearle.admin',
      themeColor: 'bg-purple-deep',
      features: [
        'Real-time society network dashboard',
        'Automatic rider assigning algorithms',
        'Comprehensive user feedback tracker',
        'Escrow and merchant settlement monitoring',
      ],
      mockScreen: (
        <div className="w-full h-full bg-[#FAF8FB] p-5 flex flex-col justify-between font-body text-nearle-dark select-none">
          {/* Header */}
          <div className="flex items-center justify-between pb-3 border-b border-purple-lavender/30">
            <span className="font-display font-extrabold text-sm text-purple-deep">Nearle Admin</span>
            <span className="text-[10px] font-mono bg-purple-deep text-white px-2 py-0.5 rounded-full font-bold">HQ</span>
          </div>

          {/* Body */}
          <div className="flex-1 flex flex-col justify-center py-4">
            <p className="text-[10px] uppercase font-mono tracking-wider text-purple-primary">Operations Center</p>
            <h4 className="font-display font-bold text-base mt-1">Platform Diagnostics</h4>

            <div className="mt-3 bg-white p-3 rounded-2xl border border-nearle-border shadow-nearle-sm flex flex-col gap-2">
              <div className="flex justify-between items-center">
                <span className="text-xs text-nearle-mid">Active Society Hubs</span>
                <span className="font-mono text-xs font-bold text-purple-deep">24 / 25</span>
              </div>
              <div className="flex justify-between items-center border-t border-nearle-border/40 pt-2">
                <span className="text-xs text-nearle-mid">Fleet Operational</span>
                <span className="font-mono text-xs font-bold text-purple-deep">98.4%</span>
              </div>
            </div>

            <div className="mt-3 bg-green-50 border border-green-200 p-2.5 rounded-xl text-center">
              <span className="text-[10px] text-green-700 font-bold">✓ All services operational</span>
            </div>
          </div>

          {/* Footer Option */}
          <button className="w-full py-2.5 bg-nearle-dark text-white rounded-full font-bold text-xs hover:bg-nearle-mid transition">
            Launch Admin Center
          </button>
        </div>
      ),
    },
  ]

  const activeAppDetails = APPS.find((app) => app.id === activeApp) || APPS[0]!

  return (
    <div className="py-24 sm:py-32 bg-nearle-bgsoft px-5 sm:px-8 relative overflow-hidden">
      {/* Decorative Blur Backgrounds */}
      <div className="absolute top-1/4 left-1/4 w-[500px] h-[500px] rounded-full bg-purple-soft/50 blur-3xl -z-10 pointer-events-none" />
      <div className="absolute bottom-1/4 right-1/4 w-[500px] h-[500px] rounded-full bg-purple-lavender/30 blur-3xl -z-10 pointer-events-none" />

      <div className="max-w-7xl mx-auto">
        <SectionHeader
          label="App Ecosystem"
          heading={
            <>
              Unified Hyperlocal
              <br />
              <span className="bg-gradient-purple bg-clip-text text-transparent">
                Mobile Suite
              </span>
            </>
          }
          sub="Nearle powers four custom-tailored mobile applications designed for the distinct members of our active community."
          align="center"
          className="mb-16 sm:mb-20"
        />

        <div className="grid lg:grid-cols-12 gap-12 items-center">
          {/* Mockup Showcase Column (5 cols) */}
          <div className="lg:col-span-5 flex justify-center">
            <div className="relative">
              {/* Floating notification decor */}
              <motion.div
                animate={{ y: [0, -10, 0] }}
                transition={{ duration: 5, repeat: Infinity, ease: 'easeInOut' }}
                className="absolute top-12 -left-10 z-20 w-[160px] bg-white border border-nearle-border shadow-nearle-md p-3 rounded-2xl flex items-center gap-2"
              >
                <div className="w-6 h-6 rounded-full bg-purple-lavender flex items-center justify-center text-xs">💜</div>
                <div className="flex-1">
                  <p className="font-display font-bold text-[10px] text-nearle-dark">Delivery Alert</p>
                  <p className="font-body text-[8px] text-nearle-mid">Rider dispatched</p>
                </div>
              </motion.div>

              <motion.div
                animate={{ y: [0, 8, 0] }}
                transition={{ duration: 6, repeat: Infinity, ease: 'easeInOut', delay: 1 }}
                className="absolute bottom-16 -right-12 z-20 w-[140px] bg-white border border-nearle-border shadow-nearle-md p-3 rounded-2xl flex items-center gap-2"
              >
                <div className="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center text-xs">₹</div>
                <div className="flex-1">
                  <p className="font-display font-bold text-[10px] text-nearle-dark">Payout Sent</p>
                  <p className="font-body text-[8px] text-green-600 font-bold">+₹1,250</p>
                </div>
              </motion.div>

              {/* Smartphone Outer Shell */}
              <div className="relative w-[280px] h-[570px] rounded-[48px] border-[12px] border-nearle-dark bg-nearle-dark shadow-nearle-lg overflow-hidden flex flex-col">
                {/* Dynamic Screen Container */}
                <div className="flex-1 rounded-[36px] overflow-hidden relative bg-white">
                  {/* Phone Notch */}
                  <div className="absolute top-0 inset-x-0 h-5 bg-nearle-dark flex justify-center items-center z-30">
                    <div className="w-16 h-4 bg-nearle-dark rounded-b-xl" />
                  </div>
                  {/* Screen Content */}
                  <div className="w-full h-full pt-5">
                    <AnimatePresence mode="wait">
                      <motion.div
                        key={activeAppDetails.id}
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        exit={{ opacity: 0 }}
                        transition={{ duration: 0.3 }}
                        className="w-full h-full"
                      >
                        {activeAppDetails.mockScreen}
                      </motion.div>
                    </AnimatePresence>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Description & Selection Tabs Column (7 cols) */}
          <div className="lg:col-span-7 flex flex-col gap-8">
            <div className="grid grid-cols-2 gap-4">
              {APPS.map((app) => {
                const isActive = app.id === activeApp
                return (
                  <button
                    key={app.id}
                    onClick={() => setActiveApp(app.id)}
                    className={`text-left p-5 rounded-3xl border transition-all duration-300 focus:outline-none ${
                      isActive
                        ? 'bg-white border-purple-deep shadow-nearle-md'
                        : 'bg-white/40 border-nearle-border hover:border-purple-primary'
                    }`}
                  >
                    <span className="font-mono text-[9px] uppercase tracking-widest text-purple-primary">
                      Official Application
                    </span>
                    <h3 className="font-display font-bold text-lg text-nearle-dark mt-1">
                      {app.name}
                    </h3>
                  </button>
                )
              })}
            </div>

            {/* Selected App Details Panel */}
            <GlassCard className="border-purple-lavender/50 hover:border-purple-primary shadow-nearle-md p-8">
              <span className={`inline-block px-3 py-1 rounded-full text-white text-xs font-mono font-bold uppercase tracking-wider ${activeAppDetails.themeColor} mb-4`}>
                {activeAppDetails.name}
              </span>
              <h3 className="h3-display text-nearle-dark">
                {activeAppDetails.purpose}
              </h3>
              <p className="font-body text-nearle-mid mt-4 leading-relaxed">
                Specifically built with GPU-optimised rendering, secure escrowed payments, and smart push alert integrations to empower this segment.
              </p>

              <ul className="mt-6 grid sm:grid-cols-2 gap-4">
                {activeAppDetails.features.map((feat) => (
                  <li key={feat} className="flex items-start gap-3">
                    <span className="w-5 h-5 rounded-full bg-purple-soft flex items-center justify-center text-xs text-purple-deep font-bold mt-0.5">
                      ✓
                    </span>
                    <span className="font-body text-sm text-nearle-dark">
                      {feat}
                    </span>
                  </li>
                ))}
              </ul>

              <div className="mt-8 pt-6 border-t border-nearle-border flex flex-wrap gap-4 items-center justify-between">
                <a
                  href={activeAppDetails.playUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex items-center gap-2.5 px-6 py-2.5 bg-[#111827] text-white rounded-full font-bold text-sm shadow-cta hover:bg-purple-deep transition active:scale-95"
                >
                  <span className="text-lg">🤖</span>
                  <span>Get on Google Play</span>
                </a>
              </div>
            </GlassCard>
          </div>
        </div>
      </div>
    </div>
  )
}
