'use client';
import { COMPANY_GOALS, DEPARTMENT_GOALS, RATING_LABELS, RATING_BG, Appraisal } from './performanceData';

interface Props {
  appraisal: Appraisal;
  onClose: () => void;
}

export default function HRAppraisalViewModal({ appraisal, onClose }: Props) {
  const allRatings = [...appraisal.companyGoalRatings, ...appraisal.deptGoalRatings];
  const hodRatings = allRatings.filter(r => r.hodRating);
  const avgHOD = hodRatings.length > 0
    ? hodRatings.reduce((s, r) => s + (r.hodRating || 0), 0) / hodRatings.length
    : 0;
  const avgSelf = allRatings.length > 0
    ? allRatings.reduce((s, r) => s + r.selfRating, 0) / allRatings.length
    : 0;

  return (
    <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
      <div className="bg-white rounded-2xl w-full max-w-3xl max-h-[92vh] flex flex-col shadow-2xl">
        <div className="px-6 py-4 border-b border-gray-100 flex items-center justify-between" style={{ background: '#b828a0' }}>
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-full flex items-center justify-center bg-white/20 text-white font-bold text-sm">
              {appraisal.avatar}
            </div>
            <div>
              <h2 className="text-white font-bold">{appraisal.name}</h2>
              <p className="text-pink-200 text-xs">{appraisal.role} · {appraisal.dept} · {appraisal.period}</p>
            </div>
          </div>
          <button onClick={onClose} className="w-8 h-8 flex items-center justify-center cursor-pointer">
            <i className="ri-close-line text-white text-xl"></i>
          </button>
        </div>

        <div className="flex-1 overflow-y-auto p-6 space-y-5">
          <div className="grid grid-cols-4 gap-3">
            {[
              { label: 'Overall Rating', value: appraisal.overallRating > 0 ? `${appraisal.overallRating.toFixed(1)}/5` : '—', color: '#b828a0' },
              { label: 'Self Avg', value: avgSelf > 0 ? `${avgSelf.toFixed(1)}/5` : '—', color: '#3b82f6' },
              { label: 'HOD Avg', value: avgHOD > 0 ? `${avgHOD.toFixed(1)}/5` : '—', color: '#16a34a' },
              { label: 'Status', value: appraisal.status, color: '#f59e0b' },
            ].map(s => (
              <div key={s.label} className="bg-gray-50 rounded-xl p-3 text-center">
                <p className="text-lg font-bold" style={{ color: s.color }}>{s.value}</p>
                <p className="text-xs text-gray-500 mt-0.5">{s.label}</p>
              </div>
            ))}
          </div>

          <div className="grid grid-cols-2 gap-4 text-sm">
            {[
              ['Employee ID', appraisal.employeeId],
              ['Department', appraisal.dept],
              ['Role', appraisal.role],
              ['Employee Type', appraisal.employeeType],
              ['HOD', appraisal.hodName],
              ['Period', appraisal.period],
              ['Submitted', appraisal.submittedDate || '—'],
              ['HOD Approved', appraisal.hodApprovedDate || '—'],
            ].map(([l, v]) => (
              <div key={l} className="flex justify-between border-b border-gray-50 pb-1">
                <span className="text-gray-400">{l}</span>
                <span className="text-gray-700 font-medium">{v}</span>
              </div>
            ))}
          </div>

          {appraisal.companyGoalRatings.length > 0 && (
            <div>
              <h4 className="font-semibold text-gray-800 text-sm mb-3">Company Goal Ratings</h4>
              <div className="space-y-2">
                {appraisal.companyGoalRatings.map(r => {
                  const goal = COMPANY_GOALS.find(g => g.id === r.goalId);
                  return (
                    <div key={r.goalId} className="border border-gray-100 rounded-xl p-3">
                      <p className="text-sm font-medium text-gray-800 mb-2">{goal?.title || r.goalId}</p>
                      <div className="flex items-center gap-4">
                        <div>
                          <p className="text-xs text-gray-400 mb-0.5">Self-Rating</p>
                          <span className={`text-xs px-2 py-0.5 rounded-full font-medium ${RATING_BG[r.selfRating]}`}>{r.selfRating}/5 — {RATING_LABELS[r.selfRating]}</span>
                        </div>
                        {r.hodRating && (
                          <div>
                            <p className="text-xs text-gray-400 mb-0.5">HOD Rating</p>
                            <span className={`text-xs px-2 py-0.5 rounded-full font-medium ${RATING_BG[r.hodRating]}`}>{r.hodRating}/5 — {RATING_LABELS[r.hodRating]}</span>
                          </div>
                        )}
                      </div>
                      {r.selfComment && <p className="text-xs text-gray-500 mt-1 italic">Employee: "{r.selfComment}"</p>}
                      {r.hodComment && <p className="text-xs text-gray-500 mt-0.5 italic">HOD: "{r.hodComment}"</p>}
                    </div>
                  );
                })}
              </div>
            </div>
          )}

          {appraisal.deptGoalRatings.length > 0 && (
            <div>
              <h4 className="font-semibold text-gray-800 text-sm mb-3">Department Goal Ratings</h4>
              <div className="space-y-2">
                {appraisal.deptGoalRatings.map(r => {
                  const goal = DEPARTMENT_GOALS.find(g => g.id === r.goalId);
                  return (
                    <div key={r.goalId} className="border border-gray-100 rounded-xl p-3">
                      <p className="text-sm font-medium text-gray-800 mb-2">{goal?.title || r.goalId}</p>
                      <div className="flex items-center gap-4">
                        <div>
                          <p className="text-xs text-gray-400 mb-0.5">Self-Rating</p>
                          <span className={`text-xs px-2 py-0.5 rounded-full font-medium ${RATING_BG[r.selfRating]}`}>{r.selfRating}/5 — {RATING_LABELS[r.selfRating]}</span>
                        </div>
                        {r.hodRating && (
                          <div>
                            <p className="text-xs text-gray-400 mb-0.5">HOD Rating</p>
                            <span className={`text-xs px-2 py-0.5 rounded-full font-medium ${RATING_BG[r.hodRating]}`}>{r.hodRating}/5 — {RATING_LABELS[r.hodRating]}</span>
                          </div>
                        )}
                      </div>
                      {r.selfComment && <p className="text-xs text-gray-500 mt-1 italic">Employee: "{r.selfComment}"</p>}
                    </div>
                  );
                })}
              </div>
            </div>
          )}

          {appraisal.selfAssessmentComments && (
            <div className="bg-blue-50 border border-blue-100 rounded-xl p-4">
              <p className="text-xs font-semibold text-blue-700 mb-1">Employee Self-Assessment Comments</p>
              <p className="text-sm text-gray-700">{appraisal.selfAssessmentComments}</p>
            </div>
          )}

          {appraisal.hodComments && (
            <div className="rounded-xl p-4" style={{ background: '#fdf2fb', border: '1px solid #f0c0ec' }}>
              <p className="text-xs font-semibold mb-1" style={{ color: '#b828a0' }}>HOD Comments</p>
              <p className="text-sm text-gray-700">{appraisal.hodComments}</p>
            </div>
          )}

          {appraisal.pipStatus === 'Active' && (
            <div className="bg-red-50 border border-red-200 rounded-xl p-4 flex items-center gap-3">
              <div className="w-8 h-8 flex items-center justify-center bg-red-100 rounded-full flex-shrink-0">
                <i className="ri-alarm-warning-line text-red-600 text-base"></i>
              </div>
              <div>
                <p className="text-sm font-semibold text-red-800">Performance Improvement Plan Active</p>
                <p className="text-xs text-red-600 mt-0.5">This employee has an active PIP. View details in the PIP tab.</p>
              </div>
            </div>
          )}
        </div>

        <div className="px-6 pb-6">
          <button onClick={onClose} className="w-full py-3 rounded-xl border border-gray-200 text-sm font-medium text-gray-600 hover:bg-gray-50 cursor-pointer whitespace-nowrap">
            Close
          </button>
        </div>
      </div>
    </div>
  );
}