'use client'

import { useState } from 'react'
import { Button, CheckCircleIcon } from '@ciphera-net/ui'

// 1. Define Plans with IDs and Site Limits
const PLANS = [
  {
    id: 'solo',
    name: 'Solo',
    description: 'For personal sites and freelancers',
    features: [
      '1 site',
      '1 year data retention',
      'Email reports',
      '100% Data ownership'
    ]
  },
  {
    id: 'team',
    name: 'Team',
    description: 'For startups and growing agencies',
    features: [
      'Up to 5 sites',
      '3 years data retention',
      'Team dashboard',
      'Shared links'
    ]
  },
  {
    id: 'business',
    name: 'Business',
    description: 'For large organizations',
    features: [
      'Up to 10 sites',
      'Unlimited data retention',
      'Priority support',
      'Custom events'
    ]
  }
]

// 2. Define Explicit Pricing per Tier (approx 20% cheaper than Plausible)
// Includes intermediate steps: 50k, 250k, 2.5M
const TRAFFIC_TIERS = [
  { 
    label: '10k', 
    value: 10000, 
    prices: { solo: 7, team: 11, business: 15 } 
  },
  { 
    label: '50k', 
    value: 50000, 
    prices: { solo: 11, team: 19, business: 27 } 
  },
  { 
    label: '100k', 
    value: 100000, 
    prices: { solo: 15, team: 23, business: 31 } 
  },
  { 
    label: '250k', 
    value: 250000, 
    prices: { solo: 25, team: 39, business: 59 } 
  },
  { 
    label: '500k', 
    value: 500000, 
    prices: { solo: 39, team: 59, business: 79 } 
  },
  { 
    label: '1M', 
    value: 1000000, 
    prices: { solo: 55, team: 79, business: 111 } 
  },
  { 
    label: '2.5M', 
    value: 2500000, 
    prices: { solo: 79, team: 119, business: 169 } 
  },
  { 
    label: '5M', 
    value: 5000000, 
    prices: { solo: 103, team: 155, business: 207 } 
  },
  { 
    label: '10M', 
    value: 10000000, 
    prices: { solo: 135, team: 199, business: 269 } 
  },
  { 
    label: '10M+', 
    value: 10000001, 
    prices: { solo: null, team: null, business: null } 
  },
]

export default function PricingSection() {
  const [isYearly, setIsYearly] = useState(false)
  const [sliderIndex, setSliderIndex] = useState(2) // Default to 100k (index 2)

  const currentTraffic = TRAFFIC_TIERS[sliderIndex]

  // Helper to get all price details
  const getPriceDetails = (planId: string) => {
    // @ts-ignore
    const basePrice = currentTraffic.prices[planId]
    
    // Handle "Custom"
    if (basePrice === null || basePrice === undefined) return null
    
    const yearlyTotal = basePrice * 11 // 1 month free (pay for 11)
    const effectiveMonthly = Math.round(yearlyTotal / 12)
    
    return {
      baseMonthly: basePrice,
      yearlyTotal: yearlyTotal,
      effectiveMonthly: effectiveMonthly
    }
  }

  return (
    <section className="py-24 px-4 max-w-7xl mx-auto">
      <div className="text-center mb-16">
        <h2 className="text-4xl md:text-5xl font-bold text-neutral-900 dark:text-white mb-6">
          Traffic based plans that match your growth
        </h2>
        <p className="text-xl text-neutral-600 dark:text-neutral-400">
          Sign up for 30-day free trial. No credit card required.
        </p>
      </div>

      {/* Controls Container */}
      <div className="max-w-3xl mx-auto mb-20 bg-neutral-100 dark:bg-neutral-800/50 rounded-2xl p-8 border border-neutral-200 dark:border-neutral-800">
        
        {/* Slider */}
        <div className="mb-12">
          <div className="flex justify-between text-sm font-medium text-neutral-500 mb-4">
            <span>10k</span>
            <span className="text-brand-orange font-bold text-lg">
              Up to {currentTraffic.label} monthly pageviews
            </span>
            <span>10M+</span>
          </div>
          <input
            type="range"
            min="0"
            max={TRAFFIC_TIERS.length - 1}
            step="1"
            value={sliderIndex}
            onChange={(e) => setSliderIndex(parseInt(e.target.value))}
            className="w-full h-2 bg-neutral-200 rounded-lg appearance-none cursor-pointer dark:bg-neutral-700 accent-brand-orange"
          />
        </div>

        {/* Toggle */}
        <div className="flex justify-center items-center gap-4">
          <span className={!isYearly ? 'text-neutral-900 dark:text-white font-medium' : 'text-neutral-500'}>Monthly</span>
          <button
            onClick={() => setIsYearly(!isYearly)}
            className="relative w-14 h-8 bg-neutral-200 dark:bg-neutral-700 rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange/50"
          >
            <div
              className={`absolute top-1 left-1 w-6 h-6 bg-white rounded-full shadow-sm transition-transform duration-200 ${
                isYearly ? 'translate-x-6 bg-brand-orange' : 'translate-x-0'
              }`}
            />
          </button>
          <span className={isYearly ? 'text-neutral-900 dark:text-white font-medium' : 'text-neutral-500'}>
            Yearly <span className="text-xs text-brand-orange bg-brand-orange/10 px-2 py-0.5 rounded-full ml-1">1 month free</span>
          </span>
        </div>
      </div>

      {/* Pricing Cards Grid */}
      <div className="grid md:grid-cols-4 gap-6">
        {PLANS.map((plan) => {
          const priceDetails = getPriceDetails(plan.id)

          return (
            <div key={plan.id} className="card-glass p-8 flex flex-col relative overflow-hidden">
              <div className="mb-8">
                <h3 className="text-lg font-medium text-neutral-900 dark:text-white mb-2">{plan.name}</h3>
                
                {priceDetails ? (
                  isYearly ? (
                    // YEARLY VIEW
                    <div>
                      {/* 1. Big Price = Yearly Total */}
                      <div className="flex items-baseline gap-1">
                        <span className="text-4xl font-bold text-neutral-900 dark:text-white">
                          €{priceDetails.yearlyTotal}
                        </span>
                        <span className="text-neutral-500">/year</span>
                      </div>
                      
                      {/* 2. Subtext = Monthly Breakdown Comparison */}
                      <div className="flex items-center gap-2 mt-2 text-sm font-medium">
                        <span className="text-neutral-400 line-through decoration-neutral-400">
                          €{priceDetails.baseMonthly}/mo
                        </span>
                        <span className="text-brand-orange">
                          €{priceDetails.effectiveMonthly}/mo
                        </span>
                      </div>
                    </div>
                  ) : (
                    // MONTHLY VIEW
                    <div className="flex items-baseline gap-1">
                      <span className="text-4xl font-bold text-neutral-900 dark:text-white">
                        €{priceDetails.baseMonthly}
                      </span>
                      <span className="text-neutral-500">/mo</span>
                    </div>
                  )
                ) : (
                  // CUSTOM VIEW
                  <div className="text-4xl font-bold text-neutral-900 dark:text-white">
                    Custom
                  </div>
                )}
              </div>

              <Button className="w-full mb-8 bg-brand-orange hover:bg-brand-orange/90 text-white">
                Start free trial
              </Button>

              <ul className="space-y-4 flex-grow">
                {plan.features.map((feature) => (
                  <li key={feature} className="flex items-start gap-3 text-sm text-neutral-600 dark:text-neutral-400">
                    <CheckCircleIcon className="w-5 h-5 text-brand-orange shrink-0" />
                    <span>{feature}</span>
                  </li>
                ))}
              </ul>
            </div>
          )
        })}

        {/* Enterprise Card (Dark Style) */}
        <div className="p-8 rounded-2xl bg-neutral-900 text-white border border-neutral-800 flex flex-col shadow-2xl">
          <div className="mb-8">
            <h3 className="text-lg font-medium text-white mb-2">Enterprise</h3>
            <div className="text-4xl font-bold text-white">Custom</div>
            <p className="text-neutral-400 mt-2 text-sm">For high volume sites</p>
          </div>

          <Button variant="secondary" className="w-full mb-8 bg-white text-neutral-900 hover:bg-neutral-100">
            Contact us
          </Button>

          <ul className="space-y-4">
            {[
              'Everything in Business',
              '10+ sites',
              'Unlimited team members',
              'SLA & Priority Support',
              'Managed Proxy',
              'Raw data export'
            ].map((feature) => (
              <li key={feature} className="flex items-start gap-3 text-sm text-neutral-300">
                <CheckCircleIcon className="w-5 h-5 text-white shrink-0" />
                <span>{feature}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  )
}
