'use client';
import { useState } from 'react';
import { TrainingProgram } from '../../hr/training/trainingData';

interface Props {
  program: TrainingProgram;
  completionStatus: string;
  onClose: () => void;
  onReact: (programId: string) => void;
  hasReacted: boolean;
}

export default function ProgramDetailModal({ program, completionStatus, onClose, onReact, hasReacted }: Props) {
  const isCompleted = completionStatus === 'Completed' || program.status === 'Completed';

  const modeIcon = program.mode === 'Online' ? 'ri-global-line' : program.mode === 'Hybrid' ? 'ri-computer-line' : 'ri-building-line';
  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: '#b22698' }}>
          <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">
            <div 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="ri-user-line text-gray-500 text-lg"></i>
              </div>
              <p className="text-xs text-gray-500">Trainer</p>
              <p className="text-sm font-semibold text-gray-800">{program.trainer}</p>
            </div>
            <div 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={`${modeIcon} text-gray-500 text-lg`}></i>
              </div>
              <p className="text-xs text-gray-500">Venue</p>
              <p className="text-sm font-semibold text-gray-800 truncate">{program.venue}</p>
            </div>
            <div 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="ri-group-line text-gray-500 text-lg"></i>
              </div>
              <p className="text-xs text-gray-500">Enrolled</p>
              <p className="text-sm font-semibold text-gray-800">{program.enrolled}/{program.capacity}</p>
            </div>
          </div>

          <div>
            <h3 className="font-semibold text-gray-800 mb-2 flex items-center gap-2">
              <div className="w-5 h-5 flex items-center justify-center">
                <i className="ri-file-text-line text-gray-500"></i>
              </div>
              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 flex items-center gap-2">
              <div className="w-5 h-5 flex items-center justify-center">
                <i className="ri-focus-3-line text-gray-500"></i>
              </div>
              Course Objectives / Outline
            </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: '#b22698' }}>
                    {i + 1}
                  </div>
                  <p className="text-sm text-gray-700">{obj}</p>
                </div>
              ))}
            </div>
          </div>

          <div>
            <h3 className="font-semibold text-gray-800 mb-3 flex items-center gap-2">
              <div className="w-5 h-5 flex items-center justify-center">
                <i className="ri-book-open-line text-gray-500"></i>
              </div>
              Resources Available
            </h3>
            <div className="grid grid-cols-2 gap-2">
              {['Course Slides & Handouts', 'Recorded Sessions', 'Reference Materials', 'Assessment Guides'].map((res, i) => (
                <div key={i} className="flex items-center gap-2 p-2.5 bg-blue-50 rounded-lg">
                  <div className="w-5 h-5 flex items-center justify-center flex-shrink-0">
                    <i className="ri-file-download-line text-blue-600 text-sm"></i>
                  </div>
                  <span className="text-xs text-blue-700 font-medium">{res}</span>
                </div>
              ))}
            </div>
          </div>

          {isCompleted && (
            <div className={`rounded-xl p-4 border-2 ${hasReacted ? 'border-green-200 bg-green-50' : 'border-amber-200 bg-amber-50'}`}>
              {hasReacted ? (
                <div className="flex items-center gap-3">
                  <div className="w-10 h-10 rounded-xl bg-green-500 flex items-center justify-center flex-shrink-0">
                    <i className="ri-checkbox-circle-line text-white text-lg"></i>
                  </div>
                  <div>
                    <p className="font-semibold text-green-800">Reaction Submitted</p>
                    <p className="text-xs text-green-600">Your feedback has been recorded and is visible to HR.</p>
                  </div>
                </div>
              ) : (
                <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-emotion-happy-line text-white text-lg"></i>
                    </div>
                    <div>
                      <p className="font-semibold text-amber-800">Share Your Feedback</p>
                      <p className="text-xs text-amber-600">This program is completed. Please rate how each objective was delivered.</p>
                    </div>
                  </div>
                  <button onClick={() => { onReact(program.id); onClose(); }}
                    className="flex items-center gap-2 px-4 py-2 rounded-xl text-white text-sm font-semibold cursor-pointer whitespace-nowrap"
                    style={{ background: '#b22698' }}>
                    <i className="ri-star-line"></i> React Now
                  </button>
                </div>
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}