'use client';
import { Employee } from './EmployeesContent';

interface Props {
  employee: Employee;
  onClose: () => void;
  onEdit: (e: Employee) => void;
}

const statusColors: Record<string, string> = {
  Active: 'bg-green-100 text-green-700',
  'On Leave': 'bg-orange-100 text-orange-700',
  Probation: 'bg-blue-100 text-blue-700',
  Inactive: 'bg-red-100 text-red-600',
};

function Row({ label, value }: { label: string; value: string }) {
  return (
    <div className="flex flex-col gap-0.5">
      <span className="text-xs text-gray-400 font-medium uppercase tracking-wide">{label}</span>
      <span className="text-sm text-gray-800 font-medium">{value || '—'}</span>
    </div>
  );
}

export default function ViewEmployeeModal({ employee: e, onClose, onEdit }: Props) {
  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
      <div className="bg-white rounded-2xl w-[560px] max-h-[90vh] overflow-y-auto shadow-2xl">
        <div className="rounded-t-2xl p-6 text-white" style={{ background: 'linear-gradient(135deg, #b828a0 0%, #8a1e78 100%)' }}>
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-lg font-bold">Employee Profile</h2>
            <button onClick={onClose} className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-white/20 cursor-pointer">
              <i className="ri-close-line text-white text-lg"></i>
            </button>
          </div>
          <div className="flex items-center gap-4">
            <div className="w-16 h-16 rounded-full bg-white/20 border-2 border-white/40 flex items-center justify-center text-white font-bold text-xl">{e.avatar}</div>
            <div>
              <h3 className="text-xl font-bold">{e.name}</h3>
              <p className="text-pink-200 text-sm">{e.role}</p>
              <p className="text-pink-200 text-sm">{e.dept}</p>
            </div>
            <div className="ml-auto">
              <span className={`text-xs px-3 py-1 rounded-full font-semibold ${statusColors[e.status] || 'bg-gray-100 text-gray-600'}`}>{e.status}</span>
            </div>
          </div>
        </div>

        <div className="p-6 space-y-5">
          <div>
            <h4 className="text-xs font-bold uppercase tracking-widest mb-3" style={{ color: '#b828a0' }}>Personal Information</h4>
            <div className="grid grid-cols-2 gap-4">
              <Row label="Employee ID" value={e.id} />
              <Row label="Date of Birth" value={e.dob} />
              <Row label="National ID" value={e.nationalId} />
              <Row label="KRA PIN" value={e.kraPin} />
            </div>
          </div>
          <div className="border-t border-gray-100 pt-4">
            <h4 className="text-xs font-bold uppercase tracking-widest mb-3" style={{ color: '#b828a0' }}>Contact Details</h4>
            <div className="grid grid-cols-2 gap-4">
              <Row label="Email" value={e.email} />
              <Row label="Phone" value={e.phone} />
            </div>
          </div>
          <div className="border-t border-gray-100 pt-4">
            <h4 className="text-xs font-bold uppercase tracking-widest mb-3" style={{ color: '#b828a0' }}>Employment Details</h4>
            <div className="grid grid-cols-2 gap-4">
              <Row label="Department" value={e.dept} />
              <Row label="Employment Type" value={e.employmentType} />
              <Row label="Date Joined" value={e.joined} />
            </div>
          </div>
        </div>

        <div className="px-6 pb-6 flex gap-3">
          <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>
        </div>
      </div>
    </div>
  );
}