'use client';
import React, { useState } from 'react';
import { 
  Calendar, Home, Globe, Award, DollarSign, Tag, MapPin, 
  CheckCircle, ChevronRight, Sparkles, Percent, TrendingDown,
  Info, X, ArrowRight, Zap, Crown
} from 'lucide-react';
import ApplyNowModal from '../clientcomponents/ApplyNowModal';

const UniversityDetailForm = ({ university }) => {
  const [activeSection, setActiveSection] = useState('overview');

  if (!university) {
    return (
      <div className="text-center py-12">
        <div className="text-5xl mb-4">🎓</div>
        <p className="text-gray-600">University details loading...</p>
      </div>
    );
  }

  // Format currency
  const formatCurrency = (amount) => {
    if (amount === 0 || amount === '0') return 'Free';
    if (!amount || amount === '0.00') return 'Not Available';
    return `PKR ${parseFloat(amount).toLocaleString()}`;
  };

  // Calculate prices
  const originalFee = university.consultation_fee || 0;
  const discountPercentage = university.consultation_fee_discount || 0;
  const finalFee = university.consultation_fee_after_discount || 0;
  const hasDiscount = discountPercentage > 0 && originalFee > 0;
  const discountAmount = originalFee - finalFee;

  return (
    <div className="space-y-6">
      {/* Modern Info Panel with Tabs */}
      <div className="bg-gradient-to-br from-white to-gray-50 rounded-2xl shadow-lg border border-gray-100 overflow-hidden">
        
        {/* Header with Gradient */}
        <div className="bg-gradient-to-r from-teal-600 to-blue-500 px-6 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <div className="p-2 bg-white/20 rounded-xl backdrop-blur-sm">
                <Crown className="w-6 h-6 text-white" />
              </div>
              <div>
                <h3 className="text-xl font-bold text-white">University Highlights</h3>
                <p className="text-white/90 text-sm">Key information at a glance</p>
              </div>
            </div>
            {hasDiscount && (
              <div className="hidden sm:flex items-center gap-2 px-4 py-2 bg-white/20 rounded-xl backdrop-blur-sm">
                <Zap className="w-5 h-5 text-amber-300" />
                <span className="text-white font-bold">SPECIAL OFFER</span>
              </div>
            )}
          </div>
        </div>

        {/* Content Grid - No Cards */}
        <div className="p-6">
          {/* Quick Stats Bar - Spread out on desktop */}
          <div className="mb-8">
            {/* Mobile View - Stacked */}
            <div className="flex flex-wrap gap-4 p-4 bg-gradient-to-r from-teal-50 to-blue-50 rounded-xl md:hidden">
              <div className="flex items-center gap-3 flex-1 min-w-[140px]">
                <div className="p-2 bg-white rounded-lg shadow-sm">
                  <Calendar className="w-5 h-5 text-teal-600" />
                </div>
                <div>
                  <div className="text-sm text-gray-600">Intake</div>
                  <div className="font-bold text-gray-900">{university.intake || 'Flexible'}</div>
                </div>
              </div>

              <div className="flex items-center gap-3 flex-1 min-w-[140px]">
                <div className="p-2 bg-white rounded-lg shadow-sm">
                  <Home className="w-5 h-5 text-blue-600" />
                </div>
                <div>
                  <div className="text-sm text-gray-600">Accommodation</div>
                  <div className="font-bold text-gray-900">{university.accommodation || 'Available'}</div>
                </div>
              </div>

              <div className="flex items-center gap-3 flex-1 min-w-[140px]">
                <div className="p-2 bg-white rounded-lg shadow-sm">
                  <Globe className="w-5 h-5 text-emerald-600" />
                </div>
                <div>
                  <div className="text-sm text-gray-600">Language</div>
                  <div className="font-bold text-gray-900">{university.language || 'English'}</div>
                </div>
              </div>

              <div className="flex items-center gap-3 flex-1 min-w-[140px]">
                <div className="p-2 bg-white rounded-lg shadow-sm">
                  <Award className="w-5 h-5 text-amber-600" />
                </div>
                <div>
                  <div className="text-sm text-gray-600">Scholarship</div>
                  <div className={`font-bold ${university.scholarship === 1 ? 'text-emerald-600' : 'text-gray-900'}`}>
                    {university.scholarship === 1 ? 'Available ✓' : 'Check with us'}
                  </div>
                </div>
              </div>
            </div>

            {/* Desktop View - Spread out horizontally */}
            <div className="hidden md:flex justify-between items-center bg-gradient-to-r from-teal-50 to-blue-50 rounded-xl p-6">
              <div className="flex items-center gap-4 px-4 py-3 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300">
                <div className="p-3 bg-gradient-to-r from-teal-500 to-blue-500 rounded-lg">
                  <Calendar className="w-6 h-6 text-white" />
                </div>
                <div>
                  <div className="text-sm text-gray-600">Intake Sessions</div>
                  <div className="font-bold text-gray-900 text-lg">{university.intake || 'Flexible'}</div>
                </div>
              </div>

              <div className="flex items-center gap-4 px-4 py-3 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300">
                <div className="p-3 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-lg">
                  <Home className="w-6 h-6 text-white" />
                </div>
                <div>
                  <div className="text-sm text-gray-600">Accommodation</div>
                  <div className="font-bold text-gray-900 text-lg">{university.accommodation || 'Available'}</div>
                </div>
              </div>

              <div className="flex items-center gap-4 px-4 py-3 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300">
                <div className="p-3 bg-gradient-to-r from-emerald-500 to-teal-500 rounded-lg">
                  <Globe className="w-6 h-6 text-white" />
                </div>
                <div>
                  <div className="text-sm text-gray-600">Instruction Language</div>
                  <div className="font-bold text-gray-900 text-lg">{university.language || 'English'}</div>
                </div>
              </div>

              <div className="flex items-center gap-4 px-4 py-3 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300">
                <div className={`p-3 rounded-lg ${university.scholarship === 1 ? 'bg-gradient-to-r from-amber-500 to-orange-500' : 'bg-gradient-to-r from-gray-400 to-gray-500'}`}>
                  <Award className="w-6 h-6 text-white" />
                </div>
                <div>
                  <div className="text-sm text-gray-600">Scholarship</div>
                  <div className={`font-bold text-lg ${university.scholarship === 1 ? 'text-emerald-600' : 'text-gray-900'}`}>
                    {university.scholarship === 1 ? 'Available ✓' : 'Check with us'}
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Pricing Section - Modern Design */}
          <div className={`p-6 rounded-xl ${hasDiscount ? 'bg-gradient-to-r from-emerald-50 to-teal-50' : 'bg-gray-50'} mb-6`}>
            <div className="flex items-center justify-between mb-6">
              <div>
                <h4 className="text-lg font-bold text-gray-900">Consultation Fee</h4>
                <p className="text-gray-600 text-sm">Get expert guidance for your admission</p>
              </div>
              {hasDiscount && (
                <div className="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-emerald-500 to-teal-500 rounded-full text-white">
                  <TrendingDown className="w-4 h-4" />
                  <span className="font-bold">{discountPercentage}% OFF</span>
                </div>
              )}
            </div>

            {/* Price Comparison Visual */}
            <div className="space-y-4">
              {hasDiscount && (
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <div className="text-gray-500 line-through text-lg">
                      {formatCurrency(originalFee)}
                    </div>
                    <div className="px-2 py-1 bg-rose-100 text-rose-700 rounded text-xs font-bold">
                      Original
                    </div>
                  </div>
                  <div className="text-lg text-rose-600 font-bold">
                    -{formatCurrency(discountAmount)}
                  </div>
                </div>
              )}

              {/* Final Price Highlight */}
              <div className="flex items-center justify-between p-4 bg-white rounded-xl border-2 border-emerald-200">
                <div className="flex items-center gap-3">
                  <div className="p-2 bg-gradient-to-r from-emerald-500 to-teal-500 rounded-lg">
                    <CheckCircle className="w-6 h-6 text-white" />
                  </div>
                  <div>
                    <div className="text-sm text-gray-600">Final Fee</div>
                    <div className="text-2xl font-bold text-gray-900">{formatCurrency(finalFee)}</div>
                  </div>
                </div>
                <div className="text-right">
                  <div className="text-sm text-gray-600">You save</div>
                  <div className="text-xl font-bold text-emerald-600">
                    {formatCurrency(discountAmount)}
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Additional Info */}
          <div className="grid md:grid-cols-2 gap-4">
            <div className="p-4 bg-white rounded-xl border border-gray-200">
              <div className="flex items-center gap-3 mb-3">
                <MapPin className="w-5 h-5 text-gray-600" />
                <div>
                  <div className="text-sm font-semibold text-gray-900">Location</div>
                  <div className="text-gray-600">{university.address || university.city || 'Not specified'}</div>
                </div>
              </div>
            </div>

            <div className="p-4 bg-gradient-to-r from-purple-50 to-pink-50 rounded-xl border border-purple-100">
              <div className="flex items-center gap-3">
                <Info className="w-5 h-5 text-purple-600" />
                <div>
                  <div className="text-sm font-semibold text-purple-900">Why Choose Us?</div>
                  <div className="text-purple-700 text-sm">98% admission success rate</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
  );
};

export default UniversityDetailForm;