'use client'

import { useState } from 'react'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Separator } from '@/components/ui/separator'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'
import {
  Crown,
  Check,
  X,
  Sparkles,
  Bot,
  Trophy,
  BarChart3,
  Users,
  Search,
  Bell,
  Star,
  Zap,
  CreditCard,
  Shield,
  Lock,
  MessageCircle,
} from 'lucide-react'
import { BRAND } from '@/lib/constants'

/* ------------------------------------------------------------------ */
/* Types                                                               */
/* ------------------------------------------------------------------ */

interface PlanFeature {
  name: string
  free: boolean | string
  premium: boolean | string
  premiumPlus: boolean | string
}

/* ------------------------------------------------------------------ */
/* Constants                                                           */
/* ------------------------------------------------------------------ */

const plans = [
  {
    name: 'Free',
    price: 'R0',
    period: 'forever',
    description: 'Get started with basic features',
    badge: null,
    popular: false,
    features: [
      { name: 'Basic Career Assessment', included: true },
      { name: 'AI Coach (5 messages/day)', included: true },
      { name: 'Browse Tutors', included: true },
      { name: 'Browse Bursaries', included: true },
      { name: 'Add Academic Results', included: true },
      { name: 'View Competitions', included: true },
      { name: 'Community Access', included: true },
      { name: 'AI Coach Unlimited', included: false },
      { name: 'Enter Competitions', included: false },
      { name: 'Advanced Reports', included: false },
      { name: 'Priority Tutor Matching', included: false },
      { name: 'Bursary Alerts', included: false },
      { name: 'Study Tools Pro', included: false },
    ],
  },
  {
    name: 'Premium',
    price: 'R99',
    period: '/month',
    description: 'Everything you need to excel',
    badge: 'Most Popular',
    popular: true,
    features: [
      { name: 'Basic Career Assessment', included: true },
      { name: 'AI Coach (5 messages/day)', included: true },
      { name: 'Browse Tutors', included: true },
      { name: 'Browse Bursaries', included: true },
      { name: 'Add Academic Results', included: true },
      { name: 'View Competitions', included: true },
      { name: 'Community Access', included: true },
      { name: 'AI Coach Unlimited', included: true },
      { name: 'Enter Competitions', included: true },
      { name: 'Advanced Reports', included: true },
      { name: 'Priority Tutor Matching', included: true },
      { name: 'Bursary Alerts', included: false },
      { name: 'Study Tools Pro', included: false },
    ],
  },
  {
    name: 'Premium+',
    price: 'R199',
    period: '/month',
    description: 'Full power student package',
    badge: 'Best Value',
    popular: false,
    features: [
      { name: 'Basic Career Assessment', included: true },
      { name: 'AI Coach (5 messages/day)', included: true },
      { name: 'Browse Tutors', included: true },
      { name: 'Browse Bursaries', included: true },
      { name: 'Add Academic Results', included: true },
      { name: 'View Competitions', included: true },
      { name: 'Community Access', included: true },
      { name: 'AI Coach Unlimited', included: true },
      { name: 'Enter Competitions', included: true },
      { name: 'Advanced Reports', included: true },
      { name: 'Priority Tutor Matching', included: true },
      { name: 'Bursary Alerts', included: true },
      { name: 'Study Tools Pro', included: true },
    ],
  },
]

const comparisonFeatures: PlanFeature[] = [
  { name: 'Career Assessment', free: 'Basic', premium: 'Full', premiumPlus: 'Full' },
  { name: 'AI Coach Messages/Day', free: '5', premium: 'Unlimited', premiumPlus: 'Unlimited' },
  { name: 'Academic Results Tracking', free: true, premium: true, premiumPlus: true },
  { name: 'Tutor Search', free: true, premium: true, premiumPlus: true },
  { name: 'Bursary Explorer', free: true, premium: true, premiumPlus: true },
  { name: 'Competitions', free: 'View Only', premium: 'Enter', premiumPlus: 'Enter' },
  { name: 'Advanced Reports', free: false, premium: true, premiumPlus: true },
  { name: 'Priority Tutor Matching', free: false, premium: true, premiumPlus: true },
  { name: 'Bursary Alerts', free: false, premium: false, premiumPlus: true },
  { name: 'Study Tools Pro', free: false, premium: false, premiumPlus: true },
  { name: 'WhatsApp Support', free: false, premium: false, premiumPlus: true },
  { name: 'Early Access Features', free: false, premium: false, premiumPlus: true },
]

/* ------------------------------------------------------------------ */
/* Helper                                                              */
/* ------------------------------------------------------------------ */

function FeatureCell({ value }: { value: boolean | string }) {
  if (value === true) return <Check className="w-4 h-4 text-green-500 mx-auto" />
  if (value === false) return <X className="w-4 h-4 text-gray-300 mx-auto" />
  return <span className="text-sm text-gray-700">{value}</span>
}

/* ------------------------------------------------------------------ */
/* Main Page                                                           */
/* ------------------------------------------------------------------ */

export default function PremiumPage() {
  const [currentPlan] = useState<'free' | 'premium' | 'premium+'>('free')

  return (
    <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
      {/* Page Header */}
      <div className="text-center mb-8">
        <div className="inline-flex items-center gap-2 mb-3">
          <div
            className="w-10 h-10 rounded-lg flex items-center justify-center"
            style={{ background: BRAND.colors.primaryGradient }}
          >
            <Crown className="w-5 h-5 text-white" />
          </div>
          <h1 className="text-3xl font-bold text-gray-900">Choose Your Plan</h1>
        </div>
        <p className="text-gray-500 max-w-xl mx-auto">
          Unlock your full potential with Studo-Guide Premium. Get unlimited AI coaching, competition entries, and advanced academic tools.
        </p>
      </div>

      {/* Pricing Cards */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
        {plans.map((plan) => {
          const isCurrentPlan = plan.name.toLowerCase().replace('+', '+') === currentPlan
          return (
            <Card
              key={plan.name}
              className={`relative flex flex-col ${
                plan.popular
                  ? 'border-[#91C4D9] shadow-lg scale-[1.02]'
                  : 'border-gray-200'
              }`}
            >
              {plan.popular && (
                <div className="absolute -top-3 left-1/2 -translate-x-1/2">
                  <Badge
                    className="text-white text-xs px-3 py-1"
                    style={{ background: BRAND.colors.primaryGradient }}
                  >
                    <Sparkles className="w-3 h-3 mr-1" />
                    {plan.badge}
                  </Badge>
                </div>
              )}

              <CardHeader className="text-center pb-4">
                {plan.badge && !plan.popular && (
                  <Badge variant="secondary" className="w-fit mx-auto mb-2">{plan.badge}</Badge>
                )}
                <CardTitle className="text-xl">{plan.name}</CardTitle>
                <p className="text-sm text-gray-500 mt-1">{plan.description}</p>
                <div className="mt-4">
                  <span className="text-4xl font-bold" style={{ color: BRAND.colors.primaryDark }}>
                    {plan.price}
                  </span>
                  <span className="text-gray-400 text-sm">{plan.period}</span>
                </div>
              </CardHeader>

              <CardContent className="flex-1 flex flex-col">
                <Separator className="mb-4" />
                <ul className="space-y-3 flex-1">
                  {plan.features.map((feature) => (
                    <li key={feature.name} className="flex items-start gap-2">
                      {feature.included ? (
                        <Check className="w-4 h-4 text-green-500 mt-0.5 shrink-0" />
                      ) : (
                        <X className="w-4 h-4 text-gray-300 mt-0.5 shrink-0" />
                      )}
                      <span className={`text-sm ${feature.included ? 'text-gray-700' : 'text-gray-400'}`}>
                        {feature.name}
                      </span>
                    </li>
                  ))}
                </ul>

                <Button
                  className={`w-full mt-6 rounded-xl h-10 ${
                    isCurrentPlan
                      ? 'bg-gray-100 text-gray-500 cursor-default'
                      : plan.popular
                        ? 'text-white'
                        : ''
                  }`}
                  style={
                    !isCurrentPlan && plan.popular
                      ? { background: BRAND.colors.primaryGradient }
                      : !isCurrentPlan
                        ? { background: BRAND.colors.primaryGradient }
                        : {}
                  }
                  disabled={isCurrentPlan}
                >
                  {isCurrentPlan ? (
                    <>
                      <Check className="w-4 h-4 mr-2" />
                      Current Plan
                    </>
                  ) : (
                    <>
                      <CreditCard className="w-4 h-4 mr-2" />
                      Subscribe
                    </>
                  )}
                </Button>
              </CardContent>
            </Card>
          )
        })}
      </div>

      {/* Feature Comparison Table */}
      <Card className="mb-8">
        <CardHeader className="pb-3">
          <CardTitle className="text-lg">Feature Comparison</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="overflow-x-auto">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead className="w-[200px]">Feature</TableHead>
                  <TableHead className="text-center">Free</TableHead>
                  <TableHead className="text-center">
                    <span className="text-[#5b9ebd] font-semibold">Premium</span>
                  </TableHead>
                  <TableHead className="text-center">
                    <span className="text-[#5b9ebd] font-semibold">Premium+</span>
                  </TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {comparisonFeatures.map((feature) => (
                  <TableRow key={feature.name}>
                    <TableCell className="font-medium text-sm">{feature.name}</TableCell>
                    <TableCell className="text-center"><FeatureCell value={feature.free} /></TableCell>
                    <TableCell className="text-center bg-[#f0f9ff]/50"><FeatureCell value={feature.premium} /></TableCell>
                    <TableCell className="text-center bg-[#f0f9ff]/50"><FeatureCell value={feature.premiumPlus} /></TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </CardContent>
      </Card>

      {/* Premium Highlights */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
        {[
          { icon: Bot, title: 'AI Coach Unlimited', desc: 'Get 24/7 help with career guidance, study tips, and subject questions from our AI-powered coach.' },
          { icon: Trophy, title: 'Competitions & Prizes', desc: 'Enter academic competitions, win prizes, and showcase your skills to sponsors and universities.' },
          { icon: BarChart3, title: 'Advanced Reports', desc: 'Deep-dive into your academic performance with term-over-term analytics and subject analysis.' },
          { icon: Users, title: 'Priority Tutor Matching', desc: 'Get matched with the best tutors for your subjects, location, and learning style — faster.' },
          { icon: Bell, title: 'Bursary Alerts', desc: 'Never miss a bursary deadline. Get instant notifications when new bursaries match your profile.' },
          { icon: Zap, title: 'Study Tools Pro', desc: 'Advanced study timer, goal tracker, past paper resources, and AI-powered study recommendations.' },
        ].map((item) => (
          <Card key={item.title} className="border-[#91C4D9]/20 bg-gradient-to-br from-white to-[#f0f9ff]/30">
            <CardContent className="p-4">
              <div className="flex items-center gap-3 mb-2">
                <div
                  className="w-9 h-9 rounded-lg flex items-center justify-center shrink-0"
                  style={{ background: BRAND.colors.primaryGradient }}
                >
                  <item.icon className="w-4 h-4 text-white" />
                </div>
                <h3 className="font-semibold text-sm text-gray-900">{item.title}</h3>
              </div>
              <p className="text-xs text-gray-600 leading-relaxed">{item.desc}</p>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* Payment Info */}
      <Card className="border-dashed">
        <CardContent className="p-6 text-center">
          <Shield className="w-8 h-8 text-gray-400 mx-auto mb-3" />
          <h3 className="text-sm font-semibold text-gray-700 mb-1">Secure Payments via PayFast</h3>
          <p className="text-xs text-gray-500 max-w-md mx-auto">
            All subscriptions are processed securely through PayFast, South Africa&apos;s trusted payment gateway. 
            Cancel anytime — no questions asked. 7-day free trial for Premium and Premium+ plans.
          </p>
          <div className="flex items-center justify-center gap-4 mt-3 text-xs text-gray-400">
            <span className="flex items-center gap-1"><Lock className="w-3 h-3" /> SSL Encrypted</span>
            <span className="flex items-center gap-1"><CreditCard className="w-3 h-3" /> Card, EFT, Mobicred</span>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
