import os

apps = [
    ("payment-dashboard", "Payment Dashboard", 3002),
    ("customer-directory", "Customer Directory", 3003),
    ("customer-detail", "Customer Detail", 3004),
    ("inventory-manager", "Inventory Manager", 3005),
    ("product-catalog", "Product Catalog", 3006),
    ("employee-schedule", "Employee Schedule", 3007),
    ("shift-manager", "Shift Manager", 3008),
    ("discount-manager", "Discount Manager", 3009),
    ("tax-configuration", "Tax Configuration", 3010),
    ("sales-analytics", "Sales Analytics", 3011),
    ("refund-manager", "Refund Manager", 3012),
    ("device-manager", "Device Manager", 3013),
    ("merchant-settings", "Merchant Settings", 3014),
]

base_dir = "src/ui/react-app/src/apps"

for app_slug, app_title, port in apps:
    app_dir = f"{base_dir}/{app_slug}"
    component_name = "".join(word.capitalize() for word in app_slug.split("-"))
    
    # Create App.tsx
    app_tsx = f'''import React from 'react';

export default function {component_name}() {{
  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">{app_title}</h1>
        <p className="text-gray-400">Manage your {app_slug.replace("-", " ")}</p>
      </header>

      <div className="bg-gray-800 rounded-lg p-6">
        <h2 className="text-xl font-semibold mb-4">Overview</h2>
        <p className="text-gray-400">This application provides comprehensive {app_slug.replace("-", " ")} management for Clover POS.</p>
      </div>
    </div>
  );
}}
'''
    
    with open(f"{app_dir}/App.tsx", "w") as f:
        f.write(app_tsx)
    
    print(f"Fixed {app_slug}/App.tsx")

print("All App.tsx files fixed!")