student-web-if-development-kit/groups/ACAAB/src/components/ProjectModal.tsx

import { useEffect, type ReactNode } from 'react';
import { X, ExternalLink, Users, BookOpen, Calendar, Tag, FileText } from 'lucide-react';
import type { Project } from '../data';
import { useLang } from '../context/LanguageContext';

interface ProjectModalProps {
  project: Project | null;
  onClose: () => void;
}

function InfoRow({ icon, label, value }: { icon: ReactNode; label: string; value: string }) {
  return (
    <div className="flex gap-2.5 items-start">
      <span className="text-primary-gold mt-0.5 shrink-0">{icon}</span>
      <div>
        <p className="text-[10px] font-bold uppercase tracking-wider text-slate-400 leading-none mb-1">{label}</p>
        <p className="text-sm font-semibold text-slate-800 leading-snug">{value}</p>
      </div>
    </div>
  );
}

export default function ProjectModal({ project, onClose }: ProjectModalProps) {
  const { t } = useLang();

  useEffect(() => {
    if (project) {
      document.documentElement.style.overflow = 'hidden';
      document.body.style.overflow = 'hidden';
    }
    return () => {
      document.documentElement.style.overflow = '';
      document.body.style.overflow = '';
    };
  }, [project]);

  if (!project) return null;

  return (
    <div
      className="fixed inset-0 z-[300] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
      onClick={onClose}
      aria-modal="true"
      role="dialog"
      aria-label={project.title}
    >
      <div
        className="bg-white rounded-xl max-w-lg w-full max-h-[90vh] overflow-y-auto shadow-2xl animate-fade-in"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Image header */}
        <div className="relative h-56 md:h-64 overflow-hidden rounded-t-xl bg-slate-200 shrink-0">
          <img
            src={project.image}
            alt={project.title}
            className="w-full h-full object-cover"
            referrerPolicy="no-referrer"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />

          {/* Close button — dark bg so icon always visible on any image */}
          <button
            onClick={onClose}
            aria-label={t.modal.close}
            className="absolute top-3 right-3 z-50 w-8 h-8 bg-slate-900/50 hover:bg-slate-900/80 backdrop-blur rounded-full flex items-center justify-center transition-colors shadow-md"
          >
            <X size={16} className="text-white" />
          </button>

          {/* Category badge */}
          {project.category && project.category.length > 0 && (
            <div className="absolute bottom-3 left-4 flex flex-wrap gap-1.5">
              {project.category.map((cat, i) => (
                <span key={i} className="bg-primary-gold text-slate-900 text-[10px] font-bold px-2.5 py-1 rounded shadow-sm flex items-center gap-1 uppercase tracking-wide">
                  {cat}
                </span>
              ))}
            </div>
          )}
        </div>

        {/* Content */}
        <div className="p-6">
          <h2 className="text-lg font-bold text-slate-900 leading-snug mb-1">{project.title}</h2>
          
          {project.category && project.category.length > 0 && (
            <div className="text-xs text-slate-400 mb-4 font-medium">
              {project.year} &bull; {project.category.join(', ')}
            </div>
          )}

          <p className="text-slate-600 text-xs leading-relaxed mb-5">
            {project.description}
          </p>

          {/* Info grid */}
          <div className="grid grid-cols-2 gap-4 mb-4 text-xs">
            <div>
              <p className="text-[10px] font-bold uppercase tracking-wider text-slate-400 mb-1">Mahasiswa</p>
              <p className="font-bold text-slate-900">{project.studentName}</p>
            </div>
            {project.nim && (
              <div>
                <p className="text-[10px] font-bold uppercase tracking-wider text-slate-400 mb-1">NIM</p>
                <p className="font-bold text-slate-900">{project.nim}</p>
              </div>
            )}
          </div>

          {/* Members list */}
          {project.members && project.members.length > 0 && (
            <div className="border-t border-slate-100 pt-3 mb-4">
              <p className="text-[10px] font-bold uppercase tracking-wider text-slate-400 mb-2">Anggota Tim</p>
              <div className="flex flex-wrap gap-1.5">
                {project.members.map((m, i) => (
                  <span key={i} className="bg-slate-100 text-slate-600 text-[10px] px-2.5 py-1 rounded">
                    {m.nama}{m.nim ? ` (${m.nim})` : ''}
                  </span>
                ))}
              </div>
            </div>
          )}

          {project.catatan && (
            <div className="mb-4 p-2.5 bg-blue-50/50 border border-blue-100 rounded-lg">
              <p className="text-[10px] font-bold uppercase tracking-wider text-blue-400 mb-1">Catatan Tambahan</p>
              <p className="text-xs text-slate-600 italic">{project.catatan}</p>
            </div>
          )}

          {/* Project link */}
          {project.link && (
            <a
              href={project.link}
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center justify-center gap-2 w-full py-2.5 bg-[#003150] text-white font-bold rounded-lg hover:bg-[#1e40af] transition-colors duration-200 text-sm"
            >
              <ExternalLink size={14} />
              {t.project.visitLink}
            </a>
          )}
        </div>
      </div>
    </div>
  );
}