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

interface Props {
  program: TrainingProgram;
  onView: (p: TrainingProgram) => void;
  onEnroll: (p: TrainingProgram) => 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-pink-100 text-pink-700',
  Online: 'bg-teal-100 text-teal-700',
  Hybrid: 'bg-orange-100 text-orange-700',
};

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

  return (
    <div className="border border-gray-100 rounded-xl p-4 hover:shadow-md hover:-translate-y-1 transition-all duration-200 bg-white">
      <div className="flex items-start justify-between mb-3">
        <div className="flex-1 pr-3">
          <h3 className="font-semibold text-gray-800 text-sm leading-snug">{program.title}</h3>
          <p className="text-xs text-gray-500 mt-1">{program.dept} · {program.trainer}</p>
        </div>
        <span className={`text-xs px-2 py-1 rounded-full font-medium whitespace-nowrap ${statusColors[program.status]}`}>{program.status}</span>
      </div>

      <div className="flex items-center gap-3 mb-3 flex-wrap">
        <span className={`text-xs px-2 py-1 rounded-full font-medium ${modeColors[program.mode]}`}>{program.mode}</span>
        <span className="text-xs text-gray-500">{program.start} → {program.end}</span>
      </div>

      <div className="flex items-center gap-4 mb-3">
        <div className="flex items-center gap-1.5">
          <div className="w-4 h-4 flex items-center justify-center">
            <i className="ri-money-dollar-circle-line text-sm" style={{ color: '#b828a0' }}></i>
          </div>
          <span className="text-xs font-semibold" style={{ color: '#b828a0' }}>KES {program.cost.toLocaleString()}</span>
        </div>
        <div className="flex items-center gap-1.5">
          <div className="w-4 h-4 flex items-center justify-center">
            <i className="ri-map-pin-line text-gray-400 text-sm"></i>
          </div>
          <span className="text-xs text-gray-500 truncate max-w-[160px]">{program.venue}</span>
        </div>
      </div>

      <div className="mb-3">
        <div className="flex items-center justify-between mb-1">
          <span className="text-xs text-gray-500">Enrollment</span>
          <span className="text-xs font-semibold text-gray-700">{program.enrolled}/{program.capacity}</span>
        </div>
        <div className="w-full bg-gray-100 rounded-full h-1.5">
          <div
            className={`h-1.5 rounded-full transition-all ${isFull ? 'bg-red-400' : ''}`}
            style={isFull ? {} : { background: '#b828a0', width: `${pct}%` }}
          ></div>
        </div>
      </div>

      <div className="flex gap-2 mt-3">
        <button
          onClick={() => onView(program)}
          className="flex-1 text-xs py-1.5 rounded-lg cursor-pointer whitespace-nowrap transition-colors border"
          style={{ borderColor: '#b828a0', color: '#b828a0', background: 'white' }}
          onMouseEnter={e => { (e.currentTarget as HTMLButtonElement).style.background = '#fdf2fb'; }}
          onMouseLeave={e => { (e.currentTarget as HTMLButtonElement).style.background = 'white'; }}
        >
          View Details
        </button>
        {isCompleted ? (
          <div className="flex-1 text-xs bg-gray-100 text-gray-400 py-1.5 rounded-lg text-center whitespace-nowrap cursor-not-allowed">
            Enrollment Closed
          </div>
        ) : isFull ? (
          <div className="flex-1 text-xs bg-red-50 text-red-400 py-1.5 rounded-lg text-center whitespace-nowrap cursor-not-allowed">
            Training Full
          </div>
        ) : (
          <button
            onClick={() => onEnroll(program)}
            className="flex-1 text-xs text-white py-1.5 rounded-lg cursor-pointer whitespace-nowrap transition-colors"
            style={{ background: '#b828a0' }}
          >
            Enroll Staff
          </button>
        )}
      </div>
    </div>
  );
}