import React from 'react';
import { Mail, Phone, MapPin, Briefcase, Calendar } from 'lucide-react';
import type { Employee } from '../../types/index.js';

interface EmployeeDetailProps {
  employee?: Employee;
}

export const EmployeeDetail: React.FC<EmployeeDetailProps> = ({ employee }) => {
  if (!employee) {
    return <div className="p-6">No employee data available</div>;
  }

  return (
    <div className="p-6 bg-white rounded-lg shadow max-w-4xl">
      <div className="flex items-start justify-between mb-6">
        <div>
          <h2 className="text-3xl font-bold">
            {employee.firstName} {employee.lastName}
          </h2>
          <p className="text-xl text-gray-600">{employee.title}</p>
        </div>
        <span className={`px-4 py-2 rounded-full text-sm font-medium ${
          employee.status === 'ACTIVE' ? 'bg-green-100 text-green-800' :
          employee.status === 'INACTIVE' ? 'bg-yellow-100 text-yellow-800' :
          'bg-red-100 text-red-800'
        }`}>
          {employee.status}
        </span>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div className="space-y-4">
          <h3 className="text-lg font-semibold border-b pb-2">Contact Information</h3>
          
          <div className="flex items-center gap-3">
            <Mail className="w-5 h-5 text-gray-400" />
            <div>
              <p className="text-sm text-gray-500">Work Email</p>
              <p className="font-medium">{employee.email}</p>
            </div>
          </div>

          {employee.personalEmail && (
            <div className="flex items-center gap-3">
              <Mail className="w-5 h-5 text-gray-400" />
              <div>
                <p className="text-sm text-gray-500">Personal Email</p>
                <p className="font-medium">{employee.personalEmail}</p>
              </div>
            </div>
          )}

          {employee.phoneNumber && (
            <div className="flex items-center gap-3">
              <Phone className="w-5 h-5 text-gray-400" />
              <div>
                <p className="text-sm text-gray-500">Phone</p>
                <p className="font-medium">{employee.phoneNumber}</p>
              </div>
            </div>
          )}

          {employee.homeAddress && (
            <div className="flex items-center gap-3">
              <MapPin className="w-5 h-5 text-gray-400" />
              <div>
                <p className="text-sm text-gray-500">Address</p>
                <p className="font-medium">
                  {employee.homeAddress.street1}
                  {employee.homeAddress.city && `, ${employee.homeAddress.city}`}
                  {employee.homeAddress.state && `, ${employee.homeAddress.state}`}
                </p>
              </div>
            </div>
          )}
        </div>

        <div className="space-y-4">
          <h3 className="text-lg font-semibold border-b pb-2">Employment Details</h3>
          
          <div className="flex items-center gap-3">
            <Briefcase className="w-5 h-5 text-gray-400" />
            <div>
              <p className="text-sm text-gray-500">Department</p>
              <p className="font-medium">{employee.department || 'N/A'}</p>
            </div>
          </div>

          {employee.manager && (
            <div className="flex items-center gap-3">
              <Briefcase className="w-5 h-5 text-gray-400" />
              <div>
                <p className="text-sm text-gray-500">Manager</p>
                <p className="font-medium">{employee.manager}</p>
              </div>
            </div>
          )}

          {employee.startDate && (
            <div className="flex items-center gap-3">
              <Calendar className="w-5 h-5 text-gray-400" />
              <div>
                <p className="text-sm text-gray-500">Start Date</p>
                <p className="font-medium">{employee.startDate}</p>
              </div>
            </div>
          )}

          {employee.employmentType && (
            <div className="flex items-center gap-3">
              <Briefcase className="w-5 h-5 text-gray-400" />
              <div>
                <p className="text-sm text-gray-500">Employment Type</p>
                <p className="font-medium">{employee.employmentType.replace('_', ' ')}</p>
              </div>
            </div>
          )}

          {employee.compensation && (
            <div className="bg-blue-50 p-4 rounded-lg">
              <p className="text-sm text-gray-600">Compensation</p>
              <p className="text-2xl font-bold text-blue-600">
                {employee.compensation.currency || '$'}
                {employee.compensation.amount?.toLocaleString()}
                <span className="text-sm font-normal text-gray-600">
                  {' '}/ {employee.compensation.frequency?.toLowerCase()}
                </span>
              </p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};
