'use client';
import { TrainingProgram } from './trainingData';

interface Props {
  program: TrainingProgram;
  onClose: () => void;
  onEnroll: () => void;
}

const statusColors: Record<string, string> = {
  Upcoming: 'bg-blue-100 text-blue-700',
  Ongoing: 'bg-green-100 text-green-700',
  Completed: 'bg-gray-100 text-gray-600',
};

const modeColors: Record<string, string> = {
  'In-Person': 'bg-purple-100 text-purple-700',
  Online: 'bg-teal-100 text-teal-700',
  Hybrid: 'bg-orange-100 text-orange-700',
};

const completionColors: Record<string, string> = {
  Enrolled: 'bg-blue-100 text-blue-700',
  Completed: 'bg-green-100 text-green-700',
  Dropped: 'bg-red-100 text-red-600',
};

export default function ViewTrainingModal({ program, onClose, onEnroll }: Props) {
  const pct = Math.round((program.enrolled / program.capacity) * 100);
  const isCompleted = program.status === 'Completed';

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-2xl w-[700px] max-h-[90vh] overflow-y-auto shadow-2xl">
        <div className="sticky top-0 bg-white px-6 py-4 border-b border-gray-100 flex items-center justify-between rounded-t-2xl z-10">
          <div>
            <h2 className="text-lg font-bold text-gray-800">{program.title}</h2>
            <p className="text-xs text-gray-500 mt-0.5">Program ID: {program.id}</p>
          </div>
          <button onClick={onClose} className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 cursor-pointer">
            <i className="ri-close-line text-gray-500 text-lg"></i>
          </button>
        </div>

        <div className="p-6 space-y-5">
          <div className="flex flex-wrap gap-2">
            <span className={`text-xs px-3 py-1 rounded-full font-medium ${statusColors[program.status]}`}>{program.status}</span>
            <span className={`text-xs px-3 py-1 rounded-full font-medium ${modeColors[program.mode]}`}>{program.mode}</span>
            <span className="text-xs px-3 py-1 rounded-full font-medium bg-gray-100 text-gray-600">{program.dept}</span>
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div className="bg-gray-50 rounded-xl p-4">
              <p className="text-xs text-gray-500 mb-1">Trainer / Facilitator</p>
              <p className="text-sm font-semibold text-gray-800">{program.trainer}</p>
            </div>
            <div className="bg-gray-50 rounded-xl p-4">
              <p className="text-xs text-gray-500 mb-1">Venue</p>
              <p className="text-sm font-semibold text-gray-800">{program.venue}</p>
            </div>
            <div className="bg-gray-50 rounded-xl p-4">
              <p className="text-xs text-gray-500 mb-1">Training Period</p>
              <p className="text-sm font-semibold text-gray-800">{program.start} → {program.end}</p>
            </div>
            <div className="bg-purple-50 rounded-xl p-4">
              <p className="text-xs text-purple-600 mb-1">Training Cost</p>
              <p className="text-sm font-bold text-purple-700">KES {program.cost.toLocaleString()}</p>
            </div>
          </div>

          <div>
            <p className="text-xs font-semibold text-gray-600 mb-2">Enrollment Progress</p>
            <div className="flex items-center justify-between mb-1.5">
              <span className="text-xs text-gray-500">{program.enrolled} of {program.capacity} enrolled</span>
              <span className="text-xs font-bold text-purple-700">{pct}%</span>
            </div>
            <div className="w-full bg-gray-100 rounded-full h-2">
              <div className="bg-purple-600 h-2 rounded-full transition-all" style={{ width: `${pct}%` }}></div>
            </div>
          </div>

          <div>
            <p className="text-xs font-semibold text-gray-600 mb-2">Program Description</p>
            <p className="text-sm text-gray-700 leading-relaxed bg-gray-50 rounded-xl p-4">{program.description}</p>
          </div>

          <div>
            <p className="text-xs font-semibold text-gray-600 mb-2">Learning Objectives</p>
            <ul className="space-y-2">
              {program.objectives.map((obj, i) => (
                <li key={i} className="flex items-start gap-2 text-sm text-gray-700">
                  <div className="w-5 h-5 flex items-center justify-center mt-0.5 flex-shrink-0">
                    <i className="ri-checkbox-circle-fill text-purple-600 text-base"></i>
                  </div>
                  {obj}
                </li>
              ))}
            </ul>
          </div>

          <div>
            <p className="text-xs font-semibold text-gray-600 mb-3">Enrolled Staff ({program.enrolledStaff.length})</p>
            {program.enrolledStaff.length === 0 ? (
              <p className="text-sm text-gray-400 text-center py-4">No staff enrolled yet</p>
            ) : (
              <div className="space-y-2">
                {program.enrolledStaff.map((s) => (
                  <div key={s.staffId} className="flex items-center justify-between bg-gray-50 rounded-lg px-4 py-2.5">
                    <div className="flex items-center gap-3">
                      <div className="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center text-xs font-bold text-purple-700">
                        {s.name.split(' ').map(n => n[0]).join('').slice(0, 2)}
                      </div>
                      <div>
                        <p className="text-sm font-medium text-gray-800">{s.name}</p>
                        <p className="text-xs text-gray-500">{s.dept} · Enrolled: {s.enrolledDate}</p>
                      </div>
                    </div>
                    <span className={`text-xs px-2 py-1 rounded-full font-medium ${completionColors[s.completionStatus]}`}>{s.completionStatus}</span>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>

        <div className="sticky bottom-0 bg-white px-6 py-4 border-t border-gray-100 flex gap-3 rounded-b-2xl">
          <button onClick={onClose} className="flex-1 border border-gray-200 text-gray-600 py-2.5 rounded-lg text-sm font-medium hover:bg-gray-50 cursor-pointer whitespace-nowrap">Close</button>
          {!isCompleted && (
            <button onClick={onEnroll} className="flex-1 bg-purple-700 text-white py-2.5 rounded-lg text-sm font-medium hover:bg-purple-800 cursor-pointer whitespace-nowrap">
              <i className="ri-user-add-line mr-1"></i> Enroll Staff
            </button>
          )}
          {isCompleted && (
            <div className="flex-1 bg-gray-100 text-gray-400 py-2.5 rounded-lg text-sm font-medium text-center whitespace-nowrap cursor-not-allowed">
              Training Completed — Enrollment Closed
            </div>
          )}
        </div>
      </div>
    </div>
  );
}