'use client';
import { TrainingEvaluation } from '../../hr/training/trainingModuleData';
import { initialPrograms } from '../../hr/training/trainingData';

interface Props {
  evaluation: TrainingEvaluation;
  onClose: () => void;
}

function StarDisplay({ value }: { value: number }) {
  return (
    <div className="flex items-center gap-0.5">
      {Array.from({ length: 5 }).map((_, i) => (
        <div key={i} className="w-4 h-4 flex items-center justify-center">
          <i className={`${i < value ? 'ri-star-fill' : 'ri-star-line'} text-yellow-400 text-xs`}></i>
        </div>
      ))}
      <span className="text-xs text-gray-500 ml-1">{value}/5</span>
    </div>
  );
}

export default function LearningDetailModal({ evaluation, onClose }: Props) {
  const program = initialPrograms.find(p => p.id === evaluation.programId);
  const gain = evaluation.l2PostScore - evaluation.l2PreScore;

  return (
    <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
        <div className="px-6 py-4 border-b border-gray-100" style={{ background: '#b22698' }}>
          <div className="flex items-start justify-between">
            <div>
              <h2 className="text-white font-bold text-lg">Learning Assessment Detail</h2>
              <p className="text-pink-200 text-sm mt-0.5">{evaluation.programTitle}</p>
            </div>
            <button onClick={onClose} className="w-8 h-8 flex items-center justify-center rounded-lg bg-white/20 cursor-pointer">
              <i className="ri-close-line text-white"></i>
            </button>
          </div>
        </div>

        <div className="p-6 space-y-5">
          <div className="grid grid-cols-3 gap-3">
            <div className="bg-blue-50 rounded-xl p-4 text-center">
              <p className="text-xs text-blue-600 font-medium mb-1">Pre-Training Score</p>
              <p className="text-3xl font-bold text-blue-700">{evaluation.l2PreScore}%</p>
            </div>
            <div className="rounded-xl p-4 text-center" style={{ background: '#fdf4ff' }}>
              <p className="text-xs font-medium mb-1" style={{ color: '#b22698' }}>Post-Training Score</p>
              <p className="text-3xl font-bold" style={{ color: '#b22698' }}>{evaluation.l2PostScore}%</p>
            </div>
            <div className={`rounded-xl p-4 text-center ${gain >= 0 ? 'bg-green-50' : 'bg-red-50'}`}>
              <p className={`text-xs font-medium mb-1 ${gain >= 0 ? 'text-green-600' : 'text-red-600'}`}>Learning Gain</p>
              <p className={`text-3xl font-bold ${gain >= 0 ? 'text-green-700' : 'text-red-700'}`}>
                {gain >= 0 ? '+' : ''}{gain}%
              </p>
            </div>
          </div>

          <div className="flex items-center gap-3 p-3 bg-gray-50 rounded-xl">
            <div className={`px-3 py-1.5 rounded-full text-sm font-bold ${evaluation.l2Status === 'Pass' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>
              {evaluation.l2Status === 'Pass' ? 'PASSED' : 'FAILED'}
            </div>
            <p className="text-xs text-gray-500">Passing score: 80% | Your score: {evaluation.l2PostScore}%</p>
            <div className="ml-auto">
              <span className={`px-2.5 py-1 rounded-full text-xs font-semibold ${evaluation.l2CertUploaded ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-600'}`}>
                Certificate: {evaluation.l2CertUploaded ? 'Uploaded' : 'Missing'}
              </span>
            </div>
          </div>

          {program && program.objectives && program.objectives.length > 0 && (
            <div>
              <h3 className="font-semibold text-gray-800 mb-3">How You Rated Each Objective</h3>
              <div className="space-y-2">
                {program.objectives.map((obj, i) => {
                  const mockRating = Math.min(5, Math.max(1, Math.round((evaluation.l2PostScore / 100) * 5) - (i % 2 === 0 ? 0 : 1)));
                  const pct = (mockRating / 5) * 100;
                  return (
                    <div key={i} className="border border-gray-100 rounded-xl p-3">
                      <div className="flex items-start gap-3 mb-2">
                        <div className="w-6 h-6 rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0" style={{ background: '#b22698' }}>
                          {i + 1}
                        </div>
                        <p className="text-sm text-gray-700 flex-1">{obj}</p>
                      </div>
                      <div className="ml-9 flex items-center gap-3">
                        <StarDisplay value={mockRating} />
                        <div className="flex-1 bg-gray-100 rounded-full h-1.5">
                          <div className="h-1.5 rounded-full" style={{ width: `${pct}%`, background: '#b22698' }}></div>
                        </div>
                        <span className="text-xs font-semibold text-gray-600">{pct.toFixed(0)}%</span>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          )}

          <div className="bg-gray-50 rounded-xl p-4">
            <h3 className="font-semibold text-gray-700 mb-2 text-sm">Assessment Details</h3>
            <div className="grid grid-cols-2 gap-2 text-xs text-gray-600">
              <div><span className="font-medium">Program:</span> {evaluation.programTitle}</div>
              <div><span className="font-medium">Evaluated:</span> {evaluation.evalDate}</div>
              <div><span className="font-medium">Department:</span> {evaluation.dept}</div>
              <div><span className="font-medium">Completed:</span> {evaluation.completedDate}</div>
            </div>
          </div>
        </div>

        <div className="px-6 py-4 border-t border-gray-100 flex justify-end">
          <button onClick={onClose}
            className="px-5 py-2.5 text-white rounded-xl text-sm font-semibold cursor-pointer whitespace-nowrap"
            style={{ background: '#b22698' }}>
            Close
          </button>
        </div>
      </div>
    </div>
  );
}