"use client";

import { useState, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Card } from "@/components/ui/card";
import { Search, Filter, BookOpen, Users, TrendingUp } from "lucide-react";

interface TestSeriesOption {
  id: string;
  name: string;
  shortName: string;
  description: string;
  examType: "JEE" | "NEET" | "COMBO";
  studentCount: number;
  successRate: string;
  features: string[];
  popular?: boolean;
}

const testSeriesOptions: TestSeriesOption[] = [
  {
    id: "jee-mains",
    name: "JEE Mains Test Series 2026",
    shortName: "JEE Mains",
    examType: "JEE",
    description: "Comprehensive test series designed specifically for JEE Mains aspirants with most relevant question patterns",
    studentCount: 3500,
    successRate: "98.3%",
    popular: true,
    features: [
      "30 Full Syllabus Tests",
      "471 Chapter-wise Tests", 
      "15-page Analysis Report",
      "Video Solutions"
    ]
  },
  {
    id: "neet",
    name: "NEET Test Series 2026", 
    shortName: "NEET",
    examType: "NEET",
    description: "Complete NEET preparation with expertly crafted questions following latest NTA pattern",
    studentCount: 2800,
    successRate: "96.7%",
    features: [
      "35 Full Syllabus Tests",
      "200 Chapter-wise Tests",
      "Biology Focus Sessions",
      "Detailed Analysis"
    ]
  },
  {
    id: "combo",
    name: "JEE Mains + Advanced Combo",
    shortName: "JEE Combo", 
    examType: "COMBO",
    description: "Ultimate preparation package for students targeting both JEE Mains and JEE Advanced",
    studentCount: 1200,
    successRate: "94.5%",
    features: [
      "All JEE Mains Tests",
      "20 JEE Advanced Tests", 
      "Advanced Problem Solving",
      "IIT-level Questions"
    ]
  }
];

interface TestSeriesSelectorProps {
  onSeriesSelect: (seriesId: string) => void;
  selectedSeries: string;
}

export default function TestSeriesSelector({ onSeriesSelect, selectedSeries }: TestSeriesSelectorProps) {
  const [searchTerm, setSearchTerm] = useState("");
  const [filteredOptions, setFilteredOptions] = useState(testSeriesOptions);

  useEffect(() => {
    const filtered = testSeriesOptions.filter(option =>
      option.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      option.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
      option.examType.toLowerCase().includes(searchTerm.toLowerCase())
    );
    setFilteredOptions(filtered);
  }, [searchTerm]);

  const handleSeriesSelect = (seriesId: string) => {
    onSeriesSelect(seriesId);
  };

  return (
    <section className="py-16 bg-gradient-to-b from-gray-50 to-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-12">
          <div className="inline-flex justify-center gap-x-1.5 py-2 px-3 rounded-full text-xs font-bold bg-purple-100 text-purple-800 mb-4">
            Choose Your Path
          </div>
          <h2 className="text-3xl font-bold text-gray-900 mb-4">
            Select Your Test Series
          </h2>
          <p className="text-lg text-gray-600 max-w-2xl mx-auto mb-8">
            Choose from our comprehensive test series designed for different competitive exams
          </p>

          {/* Search and Filter */}
          <div className="max-w-md mx-auto mb-8">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
              <input
                type="text"
                placeholder="Search test series..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
              />
            </div>
          </div>
        </div>

        <div className="grid lg:grid-cols-3 gap-8">
          {filteredOptions.map((option) => (
            <Card 
              key={option.id} 
              className={`relative p-6 cursor-pointer transition-all duration-300 hover:shadow-lg border-0 ${
                selectedSeries === option.id 
                  ? 'ring-2 ring-indigo-500 bg-indigo-50' 
                  : 'bg-white hover:shadow-xl'
              }`}
              onClick={() => handleSeriesSelect(option.id)}
            >
              {option.popular && (
                <Badge className="absolute -top-2 -right-2 bg-orange-500 text-white">
                  Most Popular
                </Badge>
              )}

              <div className="text-center mb-6">
                <div className={`w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center ${
                  option.examType === 'JEE' ? 'bg-blue-100 text-blue-600' :
                  option.examType === 'NEET' ? 'bg-green-100 text-green-600' :
                  'bg-purple-100 text-purple-600'
                }`}>
                  <BookOpen className="h-8 w-8" />
                </div>
                
                <h3 className="text-xl font-bold text-gray-900 mb-2">
                  {option.shortName}
                </h3>
                <p className="text-gray-600 text-sm leading-relaxed">
                  {option.description}
                </p>
              </div>

              {/* Statistics */}
              <div className="grid grid-cols-2 gap-4 mb-6">
                <div className="text-center">
                  <div className="flex items-center justify-center space-x-1 text-gray-500 mb-1">
                    <Users className="h-4 w-4" />
                  </div>
                  <div className="text-lg font-semibold text-gray-900">
                    {option.studentCount.toLocaleString()}+
                  </div>
                  <div className="text-xs text-gray-500">Students</div>
                </div>
                
                <div className="text-center">
                  <div className="flex items-center justify-center space-x-1 text-gray-500 mb-1">
                    <TrendingUp className="h-4 w-4" />
                  </div>
                  <div className="text-lg font-semibold text-green-600">
                    {option.successRate}
                  </div>
                  <div className="text-xs text-gray-500">Success Rate</div>
                </div>
              </div>

              {/* Features */}
              <div className="mb-6">
                <h4 className="text-sm font-semibold text-gray-900 mb-3">Key Features:</h4>
                <ul className="space-y-2">
                  {option.features.slice(0, 3).map((feature, featureIndex) => (
                    <li key={featureIndex} className="text-sm text-gray-600 flex items-start">
                      <span className="w-1.5 h-1.5 bg-indigo-500 rounded-full mt-2 mr-2 flex-shrink-0"></span>
                      {feature}
                    </li>
                  ))}
                  {option.features.length > 3 && (
                    <li className="text-sm text-gray-500">
                      +{option.features.length - 3} more features
                    </li>
                  )}
                </ul>
              </div>

              {/* Action Button */}
              <Button 
                className={`w-full ${
                  selectedSeries === option.id
                    ? 'bg-indigo-600 hover:bg-indigo-700 text-white'
                    : 'bg-gray-100 hover:bg-gray-200 text-gray-800'
                }`}
                onClick={(e) => {
                  e.stopPropagation();
                  handleSeriesSelect(option.id);
                }}
              >
                {selectedSeries === option.id ? 'Selected' : 'Select This Series'}
              </Button>
            </Card>
          ))}
        </div>

        {/* All Series Option */}
        <div className="mt-8 text-center">
          <Card 
            className={`inline-block p-6 cursor-pointer transition-all duration-300 hover:shadow-lg border-0 ${
              selectedSeries === 'all' 
                ? 'ring-2 ring-indigo-500 bg-indigo-50' 
                : 'bg-white hover:shadow-xl'
            }`}
            onClick={() => handleSeriesSelect('all')}
          >
            <div className="flex items-center space-x-4">
              <div className="w-12 h-12 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-full flex items-center justify-center">
                <Filter className="h-6 w-6 text-white" />
              </div>
              <div className="text-left">
                <h3 className="text-lg font-semibold text-gray-900">View All Test Series</h3>
                <p className="text-sm text-gray-600">Compare all available options</p>
              </div>
              <Button 
                variant={selectedSeries === 'all' ? 'default' : 'outline'}
                size="sm"
              >
                {selectedSeries === 'all' ? 'Selected' : 'View All'}
              </Button>
            </div>
          </Card>
        </div>

        {/* Help Text */}
        <div className="mt-12 text-center">
          <p className="text-gray-500 text-sm">
            Not sure which test series to choose? 
            <Button variant="link" className="text-indigo-600 p-0 ml-1">
              Contact our counselors for guidance
            </Button>
          </p>
        </div>
      </div>
    </section>
  );
}