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

import type { ReactNode } from 'react';
import { X, Trophy, Calendar, Award, Users, BookOpen, Tag } from 'lucide-react';
import type { Achievement } from '../data';
import { useLang } from '../context/LanguageContext';

interface AchievementModalProps {
  achievement: Achievement | 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 AchievementModal({ achievement, onClose }: AchievementModalProps) {
  const { t } = useLang();
  if (!achievement) 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={achievement.title}
    >
      <div
        className="bg-white rounded-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto shadow-2xl animate-fade-in"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Image header */}
        <div className="relative h-56 overflow-hidden rounded-t-xl bg-slate-200 shrink-0">
          <img
            src={achievement.image}
            alt={achievement.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 */}
          <button
            onClick={onClose}
            aria-label={t.modal.close}
            className="absolute top-3 right-3 w-9 h-9 bg-white/90 backdrop-blur rounded-full flex items-center justify-center hover:bg-white transition-colors shadow-md"
          >
            <X size={18} className="text-slate-700" />
          </button>

          {/* Rank badge */}
          <div className="absolute bottom-4 left-4 flex gap-2">
            <span className="bg-primary-gold text-slate-900 text-xs font-bold px-3 py-1.5 rounded flex items-center gap-1.5">
              <Trophy size={12} />
              {achievement.rank}
            </span>
            <span className="bg-white/20 backdrop-blur text-white text-xs font-bold px-3 py-1.5 rounded uppercase tracking-wide">
              {achievement.level}
            </span>
          </div>
        </div>

        {/* Content */}
        <div className="p-6">
          <div className="mb-1">
            <span className="text-primary-untan-blue text-xs font-bold uppercase tracking-wider">
              {achievement.category}
            </span>
          </div>
          <h2 className="text-xl font-bold text-primary-navy leading-snug mb-5">{achievement.title}</h2>

          {/* Info grid */}
          <div className="grid grid-cols-2 gap-4 p-4 bg-slate-50 rounded-lg mb-5">
            <InfoRow icon={<Users size={14} />} label={t.modal.tim} value={achievement.team} />
            {achievement.nim && (
              <InfoRow icon={<BookOpen size={14} />} label={t.modal.nim} value={achievement.nim} />
            )}
            <InfoRow icon={<Calendar size={14} />} label={t.modal.angkatan} value={achievement.generation} />
            <InfoRow icon={<Calendar size={14} />} label={t.modal.tahun} value={String(achievement.year)} />
            <InfoRow icon={<Award size={14} />} label={t.modal.kompetisi} value={achievement.competition} />
            <InfoRow icon={<Tag size={14} />} label={t.modal.bidang} value={achievement.category} />
          </div>

          {/* Members list */}
          {achievement.members && achievement.members.length > 0 && (
            <div className="border-t border-slate-100 pt-4 mb-4">
              <p className="text-[10px] font-bold uppercase tracking-wider text-slate-400 mb-2">Anggota Tim</p>
              <ul className="grid grid-cols-1 sm:grid-cols-2 gap-2">
                {achievement.members.map((m, i) => (
                  <li key={i} className="flex items-center gap-2 bg-slate-50 px-3 py-2 rounded-md">
                    <span className="w-6 h-6 rounded-full bg-primary-gold/20 text-primary-gold flex items-center justify-center text-xs font-bold shrink-0">
                      {m.nama.charAt(0).toUpperCase()}
                    </span>
                    <div className="flex flex-col">
                      <span className="text-sm font-semibold text-slate-700 leading-none">{m.nama}</span>
                      {m.angkatan && <span className="text-[10px] text-slate-500 mt-1">Angkatan {m.angkatan}</span>}
                    </div>
                  </li>
                ))}
              </ul>
            </div>
          )}

          {/* Description */}
          <div className="border-t border-slate-100 pt-4">
            <p className="text-[10px] font-bold uppercase tracking-wider text-slate-400 mb-2">{t.modal.deskripsi}</p>
            <p className="text-slate-600 text-sm leading-relaxed">{achievement.description.replace(/\*\*/g, '')}</p>
          </div>

          {/* Close button */}
          <button
            onClick={onClose}
            className="mt-6 w-full py-3 bg-primary-navy text-white font-bold rounded-lg hover:bg-untan-blue transition-colors duration-200 text-sm"
          >
            {t.modal.close}
          </button>
        </div>
      </div>
    </div>
  );
}