'use client';

import { useState } from 'react';
import Image from 'next/image';
import Link from 'next/link';
import { 
  Calendar, 
  Award, 
  Globe, 
  Home, 
  TrendingUp, 
  ChevronRight,
} from 'lucide-react';

const UniversityCard = ({ 
  name, 
  logo, 
  image, 
  className = '', 
  style, 
  slug, 
  id,
  founded_in,
  ranking,
  languages,
  intake,
  accommodation,
  scholarship,
  location // You might want to add this field too
}) => {
  const [imgSrc, setImgSrc] = useState(
    logo || image ? getFullImageUrl(logo || image) : '/assets/university_icon.png'
  );

  function getFullImageUrl(path) {
    if (path?.startsWith('http')) return path;
    return `${process.env.NEXT_PUBLIC_BASE_URL || ''}${path}`;
  }

  // Function to get ranking color
  const getRankingColor = (rank) => {
    if (!rank) return 'bg-gray-100 text-gray-700';
    const rankNum = parseInt(rank);
    if (rankNum <= 100) return 'bg-gradient-to-r from-amber-500 to-yellow-500 text-white';
    if (rankNum <= 300) return 'bg-gradient-to-r from-blue-500 to-cyan-500 text-white';
    if (rankNum <= 500) return 'bg-gradient-to-r from-emerald-500 to-teal-500 text-white';
    return 'bg-gradient-to-r from-purple-500 to-pink-500 text-white';
  };

  // Function to format ranking display
  const formatRanking = (rank) => {
    if (!rank) return 'N/A';
    return `#${rank}`;
  };

  // Function to format founded year
  const formatFoundedYear = (year) => {
    if (!year) return 'N/A';
    return ` ${year}`;
  };

  const cardContent = (
    <div className={`group cursor-pointer ${className}`} style={style}>
      {/* Modern Card Container */}
      <div className="bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 overflow-hidden border border-gray-100 group-hover:border-teal-200">
        
        {/* University Image Container with Gradient Overlay */}
        <div className="relative h-48 overflow-hidden bg-[#F9FAFB]">
          
          {/* University Logo */}
          <div className="absolute inset-0 flex items-center justify-center z-10 p-6">
            <div className="w-32 h-32 rounded-2xl bg-white/95 backdrop-blur-sm p-4 shadow-2xl flex items-center justify-center transform group-hover:scale-105 transition-transform duration-500">
              <Image
                src={
                  imgSrc
                    ? `https://${process.env.NEXT_PUBLIC_AWS_BUCKET}.s3.${process.env.NEXT_PUBLIC_AWS_DEFAULT_REGION}.amazonaws.com/${imgSrc.replace(/^\/+/, "")}`
                    : "/assets/default-university.webp"
                }
                alt={name || "University logo"}
                width={120}
                height={120}
                className="w-full h-full object-contain"
                onError={() => setImgSrc("/assets/default-university.webp")}
                unoptimized={!!imgSrc && imgSrc.startsWith("http")}
              />
            </div>
          </div>

          {/* Ranking Badge - Top Right */}
          {ranking && (
            <div className={`absolute top-4 right-4 z-30 px-4 py-2 rounded-full shadow-lg ${getRankingColor(ranking)}`}>
              <div className="flex items-center gap-1.5">
                <span className="font-bold text-sm">Ranking {formatRanking(ranking)}</span>
              </div>
            </div>
          )}

          {/* Founded Year - Top Left */}
          {founded_in && (
            <div className="absolute top-4 left-4 z-30 px-3 py-1.5 rounded-full bg-black/50 backdrop-blur-sm text-white text-xs font-medium">
              <div className="flex items-center gap-1.5">
                <span>Founded in{formatFoundedYear(founded_in)}</span>
              </div>
            </div>
          )}
        </div>

        {/* Card Content */}
        <div className="p-6">
          {/* University Name */}
          <h3 className="text-xl font-bold text-gray-900 mb-3 group-hover:text-teal-700 transition-colors line-clamp-2">
            {name}
          </h3>

          {/* Key Features Grid */}
          <div className="grid grid-cols-2 gap-3 mb-6">
            {/* Languages */}
            {languages && (
              <div className="flex items-center gap-2 p-2.5 bg-gray-50 rounded-xl">
                <div className="p-2 rounded-lg bg-white shadow-sm">
                  <Globe className="w-4 h-4 text-blue-600" />
                </div>
                <div className="min-w-0">
                  <div className="text-xs text-gray-500">Languages</div>
                  <div className="font-medium text-gray-900 text-sm truncate">{languages}</div>
                </div>
              </div>
            )}

            {/* Intake */}
            {intake && (
              <div className="flex items-center gap-2 p-2.5 bg-gray-50 rounded-xl">
                <div className="p-2 rounded-lg bg-white shadow-sm">
                  <Calendar className="w-4 h-4 text-emerald-600" />
                </div>
                <div className="min-w-0">
                  <div className="text-xs text-gray-500">Intake</div>
                  <div className="font-medium text-gray-900 text-sm">{intake}</div>
                </div>
              </div>
            )}

            {/* Accommodation */}
            {accommodation && (
              <div className="flex items-center gap-2 p-2.5 bg-gray-50 rounded-xl">
                <div className="p-2 rounded-lg bg-white shadow-sm">
                  <Home className="w-4 h-4 text-amber-600" />
                </div>
                <div className="min-w-0">
                  <div className="text-xs text-gray-500">Accommodation</div>
                  <div className="font-medium text-gray-900 text-sm truncate">{accommodation}</div>
                </div>
              </div>
            )}

            {/* Scholarship */}
            {scholarship && (
              <div className="flex items-center gap-2 p-2.5 bg-gray-50 rounded-xl">
                <div className="p-2 rounded-lg bg-white shadow-sm">
                  <Award className="w-4 h-4 text-purple-600" />
                </div>
                <div className="min-w-0">
                  <div className="text-xs text-gray-500">Scholarship</div>
                  <div className="font-medium text-gray-900 text-sm truncate">{scholarship === 1 ? 'Available' : 'Not Available'}</div>
                </div>
              </div>
            )}
          </div>

          {/* Action Button */}
          <div className="flex items-center justify-between">
            <Link 
              href={slug ? `/university/${slug}` : `/university/${id}`}
              className="group/btn flex-1 flex items-center justify-center gap-2 bg-gradient-to-r from-teal-600 to-blue-500 text-white py-3 px-4 rounded-xl font-semibold hover:shadow-lg transition-all duration-300"
            >
              <span>Explore University</span>
              <ChevronRight className="w-4 h-4 group-hover/btn:translate-x-1 transition-transform" />
            </Link>
          </div>
        </div>

        {/* Hover Effect Border */}
        <div className="absolute inset-0 border-2 border-transparent group-hover:border-teal-300 rounded-2xl transition-all duration-500 pointer-events-none"></div>
      </div>
    </div>
  );

  return cardContent;
};

export default UniversityCard;