const fs = require('fs');
const path = require('path');

const apps = [
  {
    name: 'payroll-detail',
    title: 'Payroll Detail',
    tool: 'rippling_get_pay_run',
    color: '#34d399'
  },
  {
    name: 'time-tracker',
    title: 'Time Tracker',
    tool: 'rippling_list_time_entries',
    color: '#a78bfa'
  },
  {
    name: 'timesheet-approvals',
    title: 'Timesheet Approvals',
    tool: 'rippling_list_timesheets',
    color: '#fbbf24'
  },
  {
    name: 'time-off-calendar',
    title: 'Time Off Calendar',
    tool: 'rippling_list_time_off_requests',
    color: '#f87171'
  },
  {
    name: 'benefits-overview',
    title: 'Benefits Overview',
    tool: 'rippling_list_benefit_plans',
    color: '#60a5fa'
  },
  {
    name: 'benefits-enrollment',
    title: 'Benefits Enrollment',
    tool: 'rippling_list_enrollments',
    color: '#34d399'
  },
  {
    name: 'ats-pipeline',
    title: 'ATS Pipeline',
    tool: 'rippling_list_candidates',
    color: '#a78bfa'
  },
  {
    name: 'job-board',
    title: 'Job Board',
    tool: 'rippling_list_job_postings',
    color: '#60a5fa'
  },
  {
    name: 'candidate-detail',
    title: 'Candidate Detail',
    tool: 'rippling_get_candidate',
    color: '#34d399'
  },
  {
    name: 'learning-dashboard',
    title: 'Learning Dashboard',
    tool: 'rippling_list_courses',
    color: '#f87171'
  },
  {
    name: 'course-catalog',
    title: 'Course Catalog',
    tool: 'rippling_list_courses',
    color: '#a78bfa'
  },
  {
    name: 'device-inventory',
    title: 'Device Inventory',
    tool: 'rippling_list_devices',
    color: '#fbbf24'
  },
  {
    name: 'app-management',
    title: 'App Management',
    tool: 'rippling_list_apps',
    color: '#60a5fa'
  },
  {
    name: 'team-overview',
    title: 'Team Overview',
    tool: 'rippling_list_groups',
    color: '#34d399'
  },
  {
    name: 'department-grid',
    title: 'Department Grid',
    tool: 'rippling_list_groups',
    color: '#a78bfa'
  }
];

apps.forEach(app => {
  const dir = path.join(__dirname, app.name);
  if (!fs.existsSync(dir)) {
    fs.mkdirSync(dir, { recursive: true });
  }

  // Create index.html
  fs.writeFileSync(path.join(dir, 'index.html'), `<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>${app.title} - Rippling MCP</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/main.tsx"></script>
  </body>
</html>
`);

  // Create basic App.tsx
  fs.writeFileSync(path.join(dir, 'App.tsx'), `import { useState, useEffect } from 'react';
import './styles.css';

export default function ${app.name.split('-').map(w => w[0].toUpperCase() + w.slice(1)).join('')}() {
  const [data, setData] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

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

  const loadData = async () => {
    try {
      setLoading(true);
      const response = await (window as any).mcp?.callTool('${app.tool}', {});
      
      if (response) {
        setData(response);
      } else {
        setData({ message: 'Sample data', items: [] });
      }
    } catch (err) {
      console.error('Error loading data:', err);
      setError(err instanceof Error ? err.message : 'Failed to load data');
      setData({ message: 'Sample data', items: [] });
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return (
      <div className="container">
        <div className="loading">Loading ${app.title.toLowerCase()}...</div>
      </div>
    );
  }

  return (
    <div className="container">
      <div className="header">
        <h1>${app.title}</h1>
        <p className="subtitle">Manage and view ${app.title.toLowerCase()}</p>
      </div>
      
      {error && <div className="error">{error}</div>}
      
      <div className="card">
        <h2>Data</h2>
        <pre className="data-preview">{JSON.stringify(data, null, 2)}</pre>
      </div>
    </div>
  );
}
`);

  // Create basic styles.css
  fs.writeFileSync(path.join(dir, 'styles.css'), `* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  background: #0f172a;
  color: #e2e8f0;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
}

.header {
  margin-bottom: 2rem;
}

.header h1 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: ${app.color};
}

.subtitle {
  color: #94a3b8;
}

.loading {
  text-align: center;
  padding: 4rem;
  font-size: 1.25rem;
  color: #94a3b8;
}

.error {
  background: #7f1d1d;
  color: #fca5a5;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.card {
  background: #1e293b;
  border-radius: 8px;
  padding: 1.5rem;
  border-left: 4px solid ${app.color};
}

.card h2 {
  color: #e2e8f0;
  margin-bottom: 1rem;
  font-size: 1.25rem;
}

.data-preview {
  background: #0f172a;
  padding: 1rem;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 0.875rem;
  color: #94a3b8;
  max-height: 600px;
  overflow-y: auto;
}

.btn {
  background: ${app.color};
  color: #0f172a;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}

.btn:hover {
  opacity: 0.9;
}
`);
});

console.log('Created ' + apps.length + ' apps');
