export const EMPLOYEE_DASHBOARD_APP = {
  id: 'employee-dashboard',
  name: 'Employee Dashboard',
  description: 'Overview dashboard for all employees with key metrics and quick actions',
  html: `<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Employee Dashboard - Gusto</title>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f5f5f5; padding: 20px; }
    .container { max-width: 1400px; margin: 0 auto; }
    .header { background: white; padding: 24px; border-radius: 8px; margin-bottom: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
    .header h1 { font-size: 28px; color: #333; margin-bottom: 8px; }
    .header p { color: #666; }
    .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 24px; }
    .stat-card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
    .stat-card h3 { font-size: 14px; color: #666; margin-bottom: 8px; text-transform: uppercase; }
    .stat-card .value { font-size: 32px; font-weight: bold; color: #ff6b35; }
    .stat-card .change { font-size: 14px; color: #27ae60; margin-top: 8px; }
    .main-content { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
    .card { background: white; padding: 24px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
    .card h2 { font-size: 18px; color: #333; margin-bottom: 16px; }
    .employee-list { list-style: none; }
    .employee-item { padding: 12px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
    .employee-item:hover { background: #f9f9f9; }
    .employee-name { font-weight: 500; color: #333; }
    .employee-role { font-size: 14px; color: #666; }
    .badge { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 500; }
    .badge.active { background: #e8f5e9; color: #27ae60; }
    .badge.pending { background: #fff3e0; color: #f57c00; }
    .quick-actions { display: grid; gap: 12px; }
    .action-btn { padding: 12px; background: #ff6b35; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 500; }
    .action-btn:hover { background: #ff5722; }
  </style>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    const { useState, useEffect } = React;

    function EmployeeDashboard() {
      const [stats, setStats] = useState({
        total: 127,
        active: 124,
        pending: 3,
        newThisMonth: 5
      });

      const [recentEmployees] = useState([
        { id: '1', name: 'Sarah Johnson', role: 'Software Engineer', status: 'active', department: 'Engineering' },
        { id: '2', name: 'Michael Chen', role: 'Product Manager', status: 'active', department: 'Product' },
        { id: '3', name: 'Emily Rodriguez', role: 'Marketing Manager', status: 'pending', department: 'Marketing' },
        { id: '4', name: 'David Kim', role: 'Sales Rep', status: 'active', department: 'Sales' },
        { id: '5', name: 'Lisa Wang', role: 'Designer', status: 'active', department: 'Design' },
      ]);

      return (
        <div className="container">
          <div className="header">
            <h1>👥 Employee Dashboard</h1>
            <p>Manage your workforce and track employee metrics</p>
          </div>

          <div className="stats-grid">
            <div className="stat-card">
              <h3>Total Employees</h3>
              <div className="value">{stats.total}</div>
            </div>
            <div className="stat-card">
              <h3>Active Employees</h3>
              <div className="value">{stats.active}</div>
              <div className="change">↑ {stats.newThisMonth} this month</div>
            </div>
            <div className="stat-card">
              <h3>Pending Onboarding</h3>
              <div className="value">{stats.pending}</div>
            </div>
            <div className="stat-card">
              <h3>Avg. Tenure</h3>
              <div className="value">2.4y</div>
            </div>
          </div>

          <div className="main-content">
            <div className="card">
              <h2>Recent Employees</h2>
              <ul className="employee-list">
                {recentEmployees.map(emp => (
                  <li key={emp.id} className="employee-item">
                    <div>
                      <div className="employee-name">{emp.name}</div>
                      <div className="employee-role">{emp.role} • {emp.department}</div>
                    </div>
                    <span className={\`badge \${emp.status}\`}>
                      {emp.status}
                    </span>
                  </li>
                ))}
              </ul>
            </div>

            <div className="card">
              <h2>Quick Actions</h2>
              <div className="quick-actions">
                <button className="action-btn">+ Add New Employee</button>
                <button className="action-btn">📊 Run Reports</button>
                <button className="action-btn">📧 Bulk Email</button>
                <button className="action-btn">📁 Export Data</button>
              </div>
            </div>
          </div>
        </div>
      );
    }

    ReactDOM.render(<EmployeeDashboard />, document.getElementById('root'));
  </script>
</body>
</html>`,
};
