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

export default function PayrollDashboard() {
  const [payRuns, setPayRuns] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    loadPayRuns();
  }, []);

  const loadPayRuns = async () => {
    try {
      setLoading(true);
      const response = await (window as any).mcp?.callTool('rippling_list_pay_runs', { limit: 50 });
      
      if (response?.payRuns) {
        setPayRuns(response.payRuns);
      } else {
        setPayRuns(getSamplePayRuns());
      }
    } catch (err) {
      console.error('Error loading pay runs:', err);
      setError(err instanceof Error ? err.message : 'Failed to load pay runs');
      setPayRuns(getSamplePayRuns());
    } finally {
      setLoading(false);
    }
  };

  const getSamplePayRuns = () => [
    { id: '1', period: '2024-01-15 to 2024-01-31', status: 'APPROVED', totalAmount: 250000, employeeCount: 45, type: 'REGULAR' },
    { id: '2', period: '2024-01-01 to 2024-01-15', status: 'PAID', totalAmount: 248000, employeeCount: 45, type: 'REGULAR' },
    { id: '3', period: '2023-12-15 to 2023-12-31', status: 'PAID', totalAmount: 252000, employeeCount: 44, type: 'REGULAR' },
  ];

  const getStatusColor = (status: string) => {
    const colors: any = {
      DRAFT: 'status-draft',
      APPROVED: 'status-approved',
      PAID: 'status-paid',
      PENDING: 'status-pending'
    };
    return colors[status] || 'status-draft';
  };

  if (loading) {
    return (
      <div className="container">
        <div className="loading">Loading payroll dashboard...</div>
      </div>
    );
  }

  return (
    <div className="container">
      <div className="header">
        <h1>Payroll Dashboard</h1>
        <p className="subtitle">{payRuns.length} pay runs</p>
      </div>

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

      <div className="stats-grid">
        <div className="stat-card">
          <div className="stat-label">Total Pay Runs</div>
          <div className="stat-value">{payRuns.length}</div>
        </div>
        <div className="stat-card">
          <div className="stat-label">Last Period Amount</div>
          <div className="stat-value">${payRuns[0]?.totalAmount?.toLocaleString() || '0'}</div>
        </div>
        <div className="stat-card">
          <div className="stat-label">Employees Paid</div>
          <div className="stat-value">{payRuns[0]?.employeeCount || 0}</div>
        </div>
      </div>

      <div className="card">
        <h2>Recent Pay Runs</h2>
        <div className="payrun-list">
          {payRuns.map(run => (
            <div key={run.id} className="payrun-item">
              <div className="payrun-info">
                <h3>{run.period}</h3>
                <p>{run.type} • {run.employeeCount} employees</p>
              </div>
              <div className="payrun-amount">${run.totalAmount.toLocaleString()}</div>
              <span className={`status-badge ${getStatusColor(run.status)}`}>
                {run.status}
              </span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
