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

const BRAND = '#B22698';

interface Props {
  program: TrainingProgram;
  onClose: () => void;
  canUploadCert?: boolean;
  onUploadCert?: () => void;
}

export default function ProgramViewModal({ program, onClose, canUploadCert, onUploadCert }: Props) {
  const statusColor = program.status === 'Completed' ? '#16a34a' : program.status === 'Ongoing' ? '#2563eb' : '#d97706';
  const statusBg = program.status === 'Completed' ? '#dcfce7' : program.status === 'Ongoing' ? '#dbeafe' : '#fef3c7';

  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-5 border-b border-gray-100" style={{ background: BRAND }}>
          <div className="flex items-start justify-between">
            <div className="flex-1 pr-4">
              <h2 className="text-white font-bold text-xl leading-tight">{program.title}</h2>
              <p className="text-pink-200 text-sm mt-1">{program.dept} · {program.mode}</p>
            </div>
            <button onClick={onClose} className="w-8 h-8 flex items-center justify-center rounded-lg bg-white/20 cursor-pointer flex-shrink-0">
              <i className="ri-close-line text-white"></i>
            </button>
          </div>
          <div className="flex items-center gap-3 mt-3">
            <span className="px-2.5 py-1 rounded-full text-xs font-bold" style={{ background: statusBg, color: statusColor }}>
              {program.status}
            </span>
            <span className="text-pink-200 text-xs">{program.start} → {program.end}</span>
          </div>
        </div>

        <div className="p-6 space-y-5">
          <div className="grid grid-cols-3 gap-3">
            {[
              { icon: 'ri-user-line', label: 'Trainer', value: program.trainer },
              { icon: 'ri-map-pin-line', label: 'Venue', value: program.venue },
              { icon: 'ri-group-line', label: 'Enrolled', value: `${program.enrolled}/${program.capacity}` },
            ].map(item => (
              <div key={item.label} className="bg-gray-50 rounded-xl p-3 text-center">
                <div className="w-8 h-8 flex items-center justify-center mx-auto mb-1">
                  <i className={`${item.icon} text-gray-500 text-lg`}></i>
                </div>
                <p className="text-xs text-gray-500">{item.label}</p>
                <p className="text-sm font-semibold text-gray-800 truncate">{item.value}</p>
              </div>
            ))}
          </div>

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

          <div>
            <h3 className="font-semibold text-gray-800 mb-3">Course Objectives & Contents</h3>
            <div className="space-y-2">
              {program.objectives.map((obj, i) => (
                <div key={i} className="flex items-start gap-3 p-3 bg-gray-50 rounded-xl">
                  <div className="w-6 h-6 rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0" style={{ background: BRAND }}>
                    {i + 1}
                  </div>
                  <p className="text-sm text-gray-700">{obj}</p>
                </div>
              ))}
            </div>
          </div>

          {program.enrolledStaff.length > 0 && (
            <div>
              <h3 className="font-semibold text-gray-800 mb-2">Enrolled Staff ({program.enrolledStaff.length})</h3>
              <div className="space-y-1.5 max-h-40 overflow-y-auto">
                {program.enrolledStaff.map(s => (
                  <div key={s.staffId} className="flex items-center justify-between py-1.5 px-3 bg-gray-50 rounded-lg">
                    <div className="flex items-center gap-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: BRAND }}>
                        {s.name.split(' ').map(n => n[0]).join('').slice(0, 2)}
                      </div>
                      <span className="text-sm font-medium text-gray-800">{s.name}</span>
                      <span className="text-xs text-gray-400">{s.dept}</span>
                    </div>
                    <span className={`text-xs px-2 py-0.5 rounded-full font-medium ${s.completionStatus === 'Completed' ? 'bg-green-100 text-green-700' : 'bg-blue-100 text-blue-700'}`}>
                      {s.completionStatus}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          )}

          {program.status === 'Completed' && (
            <div className="rounded-xl p-4 border-2 border-amber-200 bg-amber-50">
              <div className="flex items-center justify-between gap-3">
                <div className="flex items-center gap-3">
                  <div className="w-10 h-10 rounded-xl bg-amber-500 flex items-center justify-center flex-shrink-0">
                    <i className="ri-award-line text-white text-lg"></i>
                  </div>
                  <div>
                    <p className="font-semibold text-amber-800">Certificate Required</p>
                    <p className="text-xs text-amber-600">All enrolled staff must upload their completion certificate.</p>
                  </div>
                </div>
                {canUploadCert && onUploadCert && (
                  <button onClick={onUploadCert}
                    className="flex items-center gap-2 px-4 py-2 rounded-xl text-white text-sm font-semibold cursor-pointer whitespace-nowrap"
                    style={{ background: BRAND }}>
                    <i className="ri-upload-line"></i> Upload Certificate
                  </button>
                )}
              </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 border border-gray-200 rounded-xl text-sm text-gray-600 cursor-pointer whitespace-nowrap hover:bg-gray-50">
            Close
          </button>
        </div>
      </div>
    </div>
  );
}