// app/students/components/StudentCard.jsx
import React from 'react';
import { 
  MapPin, 
  GraduationCap, 
  DollarSign,
  Award, 
  CheckCircle,
  Calendar,
  Eye,
  Star,
  Clock
} from 'lucide-react';
import Image from 'next/image';
import Link from 'next/link';

const StudentCard = ({ student, onViewDetails, onBookAppointment }) => {

  const getImageUrl = (imagePath) => {
    if (!imagePath) return '/assets/default-university.webp';
    
    if (imagePath.startsWith('http')) {
      return imagePath;
    }
    
    const cleanPath = imagePath.startsWith('/') ? imagePath.slice(1) : imagePath;
    return `https://${process.env.NEXT_PUBLIC_AWS_BUCKET}.s3.${process.env.NEXT_PUBLIC_AWS_DEFAULT_REGION}.amazonaws.com/${cleanPath}`;
  };

  const getEducationLabel = (education) => {
    const labels = {
      high_school: 'High School',
      bachelors: "Bachelor's",
      masters: "Master's",
      phd: 'PhD',
      diploma: 'Diploma',
      certificate: 'Certificate'
    };
    return labels[education] || education;
  };

  // Truncate text to specific length
  const truncateText = (text, maxLength = 100) => {
    if (!text) return 'Passionate international student ready to connect.';
    if (text.length <= maxLength) return text;
    return text.substring(0, maxLength) + '...';
  };

  // Format rate display
  const formatRate = (rate) => {
    const num = parseFloat(rate);
    if (isNaN(num)) return '$0/hr';
    if (num % 1 === 0) return `$${num}/hr`;
    return `$${num.toFixed(2)}/hr`;
  };

  return (
    <div className="bg-white rounded-xl shadow-lg border border-gray-200 hover:shadow-xl transition-all duration-300 hover:-translate-y-1 group cursor-pointer overflow-hidden flex flex-col h-full">
      {/* Header with gradient */}
      <div 
        className="relative h-28"
        style={{
          background: 'linear-gradient(135deg, #0B6F78 0%, #0a306b 100%)'
        }}
      >
        {/* Status Badges - Compact */}
        <div className="absolute top-3 left-3 flex gap-1.5">
          {student.is_active && (
            <div className="flex items-center gap-1 bg-green-500/90 text-white text-[10px] font-medium px-2 py-1 rounded-full backdrop-blur-sm">
              <CheckCircle className="w-2.5 h-2.5" />
              Active
            </div>
          )}
          {student.is_verified ? (
            <div className="flex items-center gap-1 bg-blue-500/90 text-white text-[10px] font-medium px-2 py-1 rounded-full backdrop-blur-sm">
              <Award className="w-2.5 h-2.5" />
              Verified
            </div>
          ): ''}
        </div>

        {/* Profile Image - Smaller */}
        <div className="absolute -bottom-8 left-1/2 transform -translate-x-1/2">
          <div className="relative">
            <div className="w-16 h-16 rounded-full border-3 border-white overflow-hidden bg-white shadow-md">
              <Image
                src={getImageUrl(student.profile_picture) || '/assets/default-university.webp'}
                alt={student.name}
                width={64}
                height={64}
                className="w-full h-full object-cover"
              />
            </div>
            {student.is_active && (
              <div className="absolute -bottom-0.5 -right-0.5 w-4 h-4 bg-green-500 rounded-full border-2 border-white"></div>
            )}
          </div>
        </div>
      </div>

      {/* Content - Compact layout */}
      <div className="pt-10 pb-4 px-4 text-center flex-1 flex flex-col">
        {/* Name and Location - Compact */}
        <div className="mb-3">
          <h3 className="text-lg font-bold text-gray-900 mb-1.5 group-hover:text-teal-700 transition-colors line-clamp-1">
            {student.name}
          </h3>
          
          <div className="flex items-center justify-center gap-1.5 text-gray-500 text-sm">
            <MapPin className="w-3.5 h-3.5" />
            <span className="line-clamp-1">
              {student.city && student.country_name 
                ? `${student.city}, ${student.country_name}`
                : student.country_name || 'Location not specified'}
            </span>
          </div>
        </div>

        {/* Stats Grid - Compact */}
        <div className="grid grid-cols-2 gap-2 mb-4">
          <div className="bg-gray-50 rounded-lg p-2">
            <div className="flex items-center justify-center gap-1 text-amber-600 mb-1">
              <GraduationCap className="w-3.5 h-3.5" />
              <span className="text-xs font-medium">Education</span>
            </div>
            <div className="text-xs font-semibold text-gray-900 line-clamp-1">
              {getEducationLabel(student.last_education) || 'Not specified'}
            </div>
          </div>
          
          <div className="bg-gray-50 rounded-lg p-2">
            <div className="flex items-center justify-center gap-1 text-teal-600 mb-1">
              <DollarSign className="w-3.5 h-3.5" />
              <span className="text-xs font-medium">Rate</span>
            </div>
            <div className="text-xs font-semibold text-gray-900">
              {formatRate(student.hour_rate)}
            </div>
          </div>
        </div>

        {/* About Me - With proper truncation */}
        <div className="mb-4 flex-1">
          <p className="text-gray-600 text-xs line-clamp-3 leading-relaxed">
            {truncateText(student.about_me, 120)}
          </p>
        </div>

        {/* Experience (if available) */}
        {student.experience && (
          <div className="flex items-center justify-center gap-1.5 text-gray-500 text-xs mb-3">
            <Clock className="w-3.5 h-3.5" />
            <span className="line-clamp-1">{student.experience}</span>
          </div>
        )}

        {/* Action Buttons - Compact */}
        <div className="flex gap-2 mt-auto">
          <Link 
            href={`/foreign-student/${student.user_slug}`}
            className="flex-1"
          >
            <button className="w-full flex items-center cursor-pointer justify-center gap-1.5 px-2 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg text-sm font-medium transition-colors group/btn min-h-[36px]">
              <Eye className="w-3.5 h-3.5 group-hover/btn:scale-110 transition-transform" />
              <span>View</span>
            </button>
          </Link>
          
          <button
            onClick={(e) => {
              e.stopPropagation();
              onBookAppointment();
            }}
            className="flex-1 flex items-center justify-center cursor-pointer gap-1.5 px-2 py-2 bg-gradient-to-r from-teal-600 to-teal-700 hover:from-teal-700 hover:to-teal-800 text-white rounded-lg text-sm font-medium transition-all shadow-sm hover:shadow min-h-[36px]"
          >
            <Calendar className="w-3.5 h-3.5" />
            <span>Book</span>
          </button>
        </div>
      </div>

      {/* Rating Badge (if available) */}
      {student.rating && (
        <div className="absolute top-3 right-3 flex items-center gap-1 bg-amber-50 text-amber-800 text-[10px] font-bold px-2 py-1 rounded-full border border-amber-200">
          <Star className="w-2.5 h-2.5 fill-amber-500" />
          {parseFloat(student.rating).toFixed(1)}
        </div>
      )}
    </div>
  );
};

export default StudentCard;