#!/bin/bash

APPS=(
  "task-detail:Task Detail:View and edit task details"
  "task-board:Task Board:Kanban board for tasks"
  "project-dashboard:Project Dashboard:Project overview and metrics"
  "project-detail:Project Detail:Detailed project view"
  "folder-tree:Folder Tree:Browse folder hierarchy"
  "gantt-view:Gantt View:Timeline and dependencies"
  "time-tracker:Time Tracker:Log time entries"
  "time-report:Time Report:Time tracking reports"
  "comment-thread:Comment Thread:View and add comments"
  "attachment-gallery:Attachment Gallery:Browse attachments"
  "team-workload:Team Workload:Team capacity view"
  "workflow-editor:Workflow Editor:Configure workflows"
  "custom-fields-manager:Custom Fields Manager:Manage custom fields"
  "approval-dashboard:Approval Dashboard:Approval status"
  "space-overview:Space Overview:Space management"
  "blueprint-gallery:Blueprint Gallery:Browse templates"
  "audit-log-viewer:Audit Log Viewer:View audit logs"
  "search-results:Search Results:Advanced search"
  "analytics-dashboard:Analytics Dashboard:Project analytics"
)

for app_data in "${APPS[@]}"; do
  IFS=':' read -r app_name title subtitle <<< "$app_data"
  
  # Create App.tsx
  cat > "src/apps/${app_name}/App.tsx" << APPEOF
import React, { useState, useEffect } from 'react';
import { Header } from '../../components/Header';
import { useCallTool } from '../../hooks/useCallTool';
import '../../styles/global.css';

export function App() {
  const [data, setData] = useState<any>(null);
  const { callTool, loading, error } = useCallTool();

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

  const loadData = async () => {
    // Call appropriate Wrike API tool
    console.log('Loading data for ${app_name}');
  };

  return (
    <div className="app-container">
      <Header 
        title="${title}" 
        subtitle="${subtitle}"
      />

      {loading && <div className="loading">Loading...</div>}
      {error && <div className="error">{error}</div>}

      <div className="card">
        <p>This is the ${title} app.</p>
        <p>It integrates with Wrike's API to provide ${subtitle}.</p>
      </div>
    </div>
  );
}
APPEOF

  # Create index.html
  cat > "src/apps/${app_name}/index.html" << HTMLEOF
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Wrike ${title}</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="./main.tsx"></script>
  </body>
</html>
HTMLEOF

  # Create main.tsx
  cat > "src/apps/${app_name}/main.tsx" << MAINEOF
import React from 'react';
import ReactDOM from 'react-dom/client';
import { App } from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
MAINEOF

  echo "Created ${app_name}"
done

echo "All apps created!"
