#!/bin/bash

APPS=(
  "payment-dashboard:3002"
  "customer-directory:3003"
  "customer-detail:3004"
  "inventory-manager:3005"
  "product-catalog:3006"
  "employee-schedule:3007"
  "shift-manager:3008"
  "discount-manager:3009"
  "tax-configuration:3010"
  "sales-analytics:3011"
  "refund-manager:3012"
  "device-manager:3013"
  "merchant-settings:3014"
)

for app_info in "${APPS[@]}"; do
  IFS=':' read -r app port <<< "$app_info"
  APP_DIR="src/ui/react-app/src/apps/$app"
  mkdir -p "$APP_DIR"
  
  # Convert app name to title
  TITLE=$(echo "$app" | sed 's/-/ /g' | sed 's/\b\(.\)/\u\1/g')
  
  # Create App.tsx
  cat > "$APP_DIR/App.tsx" << ENDAPP
import React from 'react';

export default function ${app^}() {
  return (
    <div className="min-h-screen bg-gray-900 text-gray-100 p-6">
      <header className="mb-8">
        <h1 className="text-3xl font-bold mb-2">$TITLE</h1>
        <p className="text-gray-400">Manage your ${app//-/ }</p>
      </header>

      <div className="bg-gray-800 rounded-lg p-6">
        <h2 className="text-xl font-semibold mb-4">Coming Soon</h2>
        <p className="text-gray-400">This app is under development.</p>
      </div>
    </div>
  );
}
ENDAPP

  # Create index.html
  cat > "$APP_DIR/index.html" << ENDHTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Clover $TITLE</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="./main.tsx"></script>
  </body>
</html>
ENDHTML

  # Create main.tsx
  cat > "$APP_DIR/main.tsx" << ENDMAIN
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>
);
ENDMAIN

  # Create vite.config.ts
  cat > "$APP_DIR/vite.config.ts" << ENDVITE
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    port: $port,
  },
});
ENDVITE

  echo "Created $app"
done

echo "All apps created!"
