'use client';
import React, { useState } from 'react';
import { 
  GraduationCap, 
  BookOpen, 
  Award, 
  Users, 
  Sparkles,
  ChevronRight,
  CheckCircle,
  Globe,
  Building2,
  Target,
  Star
} from 'lucide-react';
import TextDisplay from '../clientcomponents/TextDisplay';

const UniversityDescriptionTabs = ({ descriptions }) => {
  const [activeTab, setActiveTab] = useState('overview');

  // Tab configurations
  const tabs = [
    {
      id: 'overview',
      label: 'Overview',
      icon: <GraduationCap className="w-5 h-5" />,
      description: descriptions?.overview || descriptions?.short_description || '',
      color: 'from-teal-500 to-blue-500'
    },
    {
      id: 'academic',
      label: 'Academic Programs',
      icon: <BookOpen className="w-5 h-5" />,
      description: descriptions?.academic_programs || '',
      color: 'from-blue-500 to-cyan-500'
    },
    {
      id: 'scholarships',
      label: 'Scholarships',
      icon: <Award className="w-5 h-5" />,
      description: descriptions?.scholarships_financial || '',
      color: 'from-emerald-500 to-teal-500'
    },
    {
      id: 'campus',
      label: 'Campus Life',
      icon: <Users className="w-5 h-5" />,
      description: descriptions?.campus_life || '',
      color: 'from-amber-500 to-orange-500'
    },
    {
      id: 'why-choose',
      label: 'Why Choose',
      icon: <Sparkles className="w-5 h-5" />,
      description: descriptions?.why_choose || '',
      color: 'from-purple-500 to-pink-500'
    }
  ];

  const activeTabData = tabs.find(tab => tab.id === activeTab);

  return (
    <div className="bg-gradient-to-br from-white to-gray-50 rounded-3xl border border-gray-100 shadow-lg overflow-hidden">
      {/* Header */}
      <div className="bg-gradient-to-r from-teal-600 to-blue-500 p-8">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="p-3 rounded-xl bg-white/20 backdrop-blur-sm">
              <BookOpen className="w-6 h-6 text-white" />
            </div>
            <div>
              <h2 className="text-2xl font-bold text-white">University Insights</h2>
              <p className="text-white/90 text-sm">Explore detailed information about the university</p>
            </div>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-4 gap-0">
        {/* Left Side - Vertical Tabs */}
        <div className="lg:col-span-1 bg-gray-50 border-r border-gray-100">
          <div className="p-6 space-y-2">
            {tabs.map((tab) => {
              const isActive = activeTab === tab.id;
              
              return (
                <button
                  key={tab.id}
                  onClick={() => setActiveTab(tab.id)}
                  className={`w-full flex items-center gap-3 p-4 rounded-xl transition-all duration-300 group ${
                    isActive 
                      ? 'bg-white shadow-lg border border-gray-200' 
                      : 'hover:bg-white/50 hover:shadow-sm hover:border hover:border-gray-100'
                  }`}
                >
                  {/* Icon */}
                  <div className={`flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center ${
                    isActive 
                      ? `bg-gradient-to-r ${tab.color} text-white` 
                      : 'bg-gray-100 text-gray-600 group-hover:bg-gray-200'
                  }`}>
                    {tab.icon}
                  </div>

                  {/* Label and Badge */}
                  <div className="flex-1 text-left">
                    <div className="font-semibold text-gray-900">{tab.label}</div>
                    {!tab.description && (
                      <div className="text-xs text-gray-500 mt-1">Coming soon</div>
                    )}
                  </div>

                  {/* Active Indicator */}
                  {isActive && (
                    <div className="flex-shrink-0">
                      <ChevronRight className="w-5 h-5 text-teal-600" />
                    </div>
                  )}
                </button>
              );
            })}
          </div>
        </div>

        {/* Right Side - Content Display */}
        <div className="lg:col-span-3 bg-white">
          <div className="p-8">
            {/* Content Header */}
            <div className="flex items-center justify-between mb-8">
              <div className="flex items-center gap-3">
                <div className={`p-3 rounded-xl bg-gradient-to-r ${activeTabData?.color} text-white shadow-lg`}>
                  {activeTabData?.icon}
                </div>
                <div>
                  <h3 className="text-xl font-bold text-gray-900">{activeTabData?.label}</h3>
                  <p className="text-gray-600 text-sm">Detailed information about this section</p>
                </div>
              </div>
              
              {activeTabData?.description && (
                <div className="hidden md:flex items-center gap-2 px-4 py-2 bg-teal-50 text-teal-700 rounded-xl text-sm font-medium">
                  <CheckCircle className="w-4 h-4" />
                  Content Available
                </div>
              )}
            </div>

            {/* Content Display */}
            <div className="min-h-[400px]">
              {activeTabData?.description ? (
                <div className="space-y-6">
                  {/* Text Content */}
                  <div className="bg-gradient-to-br from-gray-50 to-white rounded-2xl border border-gray-100 p-8">
                    <TextDisplay 
                      content={activeTabData.description} 
                      className="sn-content"
                    />
                  </div>
                </div>
              ) : (
                <div className="text-center py-16">
                  <div className="inline-flex p-6 rounded-2xl bg-gray-100 mb-6">
                    <div className="text-3xl">📚</div>
                  </div>
                  <h4 className="text-lg font-semibold text-gray-900 mb-2">
                    Content Coming Soon
                  </h4>
                  <p className="text-gray-600 max-w-md mx-auto">
                    We're currently gathering detailed information about {activeTabData?.label.toLowerCase()}. 
                    Check back soon or contact us for more details.
                  </p>
                </div>
              )}
            </div>

            {/* Navigation Tips */}
            <div className="mt-8 pt-6 border-t border-gray-100">
              <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
                <p className="text-sm text-gray-600">
                </p>
                <div className="flex items-center gap-2">
                  <button
                    onClick={() => {
                      const currentIndex = tabs.findIndex(tab => tab.id === activeTab);
                      const prevIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;
                      setActiveTab(tabs[prevIndex].id);
                    }}
                    className="px-4 py-2 border border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 transition-colors text-sm font-medium"
                  >
                    Previous Section
                  </button>
                  <button
                    onClick={() => {
                      const currentIndex = tabs.findIndex(tab => tab.id === activeTab);
                      const nextIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;
                      setActiveTab(tabs[nextIndex].id);
                    }}
                    className="px-4 py-2 bg-gradient-to-r from-teal-600 to-blue-500 text-white rounded-xl hover:shadow-lg transition-all text-sm font-medium"
                  >
                    Next Section
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default UniversityDescriptionTabs;