import { useState, useEffect } from 'react';
import './styles.css';

export default function EmployeeDetail() {
  const [employeeId, setEmployeeId] = useState('');
  const [employee, setEmployee] = useState<any>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const loadEmployee = async () => {
    if (!employeeId) return;
    
    try {
      setLoading(true);
      setError(null);
      const response = await (window as any).mcp?.callTool('rippling_get_employee', { id: employeeId });
      
      if (response?.employee) {
        setEmployee(response.employee);
      } else {
        setEmployee(getSampleEmployee());
      }
    } catch (err) {
      console.error('Error loading employee:', err);
      setError(err instanceof Error ? err.message : 'Failed to load employee');
      setEmployee(getSampleEmployee());
    } finally {
      setLoading(false);
    }
  };

  const getSampleEmployee = () => ({
    id: employeeId || 'sample-1',
    firstName: 'John',
    lastName: 'Doe',
    email: 'john.doe@company.com',
    phoneNumber: '+1 (555) 123-4567',
    title: 'Senior Software Engineer',
    department: 'Engineering',
    manager: 'Jane Smith',
    startDate: '2022-03-15',
    employmentType: 'FULL_TIME',
    status: 'ACTIVE',
    workLocation: 'San Francisco, CA',
    compensation: {
      amount: 150000,
      currency: 'USD',
      frequency: 'ANNUALLY'
    }
  });

  return (
    <div className="container">
      <div className="header">
        <h1>Employee Detail</h1>
        <p className="subtitle">View complete employee profile</p>
      </div>

      <div className="search-bar">
        <input
          type="text"
          placeholder="Enter employee ID..."
          value={employeeId}
          onChange={(e) => setEmployeeId(e.target.value)}
          onKeyPress={(e) => e.key === 'Enter' && loadEmployee()}
        />
        <button onClick={loadEmployee} disabled={loading || !employeeId}>
          {loading ? 'Loading...' : 'Load Employee'}
        </button>
      </div>

      {error && <div className="error">{error}</div>}

      {employee && (
        <div className="profile-container">
          <div className="profile-header">
            <div className="avatar">{employee.firstName[0]}{employee.lastName[0]}</div>
            <div className="profile-info">
              <h2>{employee.firstName} {employee.lastName}</h2>
              <p className="profile-title">{employee.title}</p>
              <span className={`status-badge status-${employee.status.toLowerCase()}`}>
                {employee.status}
              </span>
            </div>
          </div>

          <div className="details-grid">
            <div className="card">
              <h3>Contact Information</h3>
              <div className="detail-item">
                <span className="label">Email:</span>
                <span className="value">{employee.email}</span>
              </div>
              <div className="detail-item">
                <span className="label">Phone:</span>
                <span className="value">{employee.phoneNumber || 'N/A'}</span>
              </div>
            </div>

            <div className="card">
              <h3>Employment Details</h3>
              <div className="detail-item">
                <span className="label">Department:</span>
                <span className="value">{employee.department}</span>
              </div>
              <div className="detail-item">
                <span className="label">Manager:</span>
                <span className="value">{employee.manager || 'N/A'}</span>
              </div>
              <div className="detail-item">
                <span className="label">Start Date:</span>
                <span className="value">{employee.startDate}</span>
              </div>
              <div className="detail-item">
                <span className="label">Type:</span>
                <span className="value">{employee.employmentType?.replace('_', ' ')}</span>
              </div>
            </div>

            <div className="card">
              <h3>Compensation</h3>
              <div className="detail-item">
                <span className="label">Salary:</span>
                <span className="value">
                  {employee.compensation?.currency || 'USD'} {employee.compensation?.amount?.toLocaleString() || 'N/A'}
                </span>
              </div>
              <div className="detail-item">
                <span className="label">Frequency:</span>
                <span className="value">{employee.compensation?.frequency || 'N/A'}</span>
              </div>
            </div>

            <div className="card">
              <h3>Work Location</h3>
              <div className="detail-item">
                <span className="label">Location:</span>
                <span className="value">{employee.workLocation || 'Remote'}</span>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
