import React from 'react';
import appConfigData from './src/config/appConfig.json';
import { AppConfig, TemplateKey } from './src/config/appConfig.types';
import { FontLoader } from './src/theme/FontLoader';

// Static imports for all templates - now from apps folder
import AppBasic from './App.basic';
import AppAuth from './App.auth';
import AppFull from './App.full';

// Type assertion for the imported JSON
const appConfig = appConfigData as unknown as AppConfig;

const App: React.FC = () => {
  const selectedTemplate: TemplateKey = appConfig.selectedTemplate;
  const templateConfig = appConfig.availableTemplates[selectedTemplate];
  
  if (!templateConfig) {
    console.error(`Template "${selectedTemplate}" not found in appConfig.json`);
    console.error('Available templates:', Object.keys(appConfig.availableTemplates));
    throw new Error(`Invalid template: ${selectedTemplate}`);
  }
  
  console.log(`Loading template: ${templateConfig.name} (${templateConfig.entryPoint})`);
  
  // Map template keys to components
  const getTemplateComponent = (): React.FC => {
    switch (selectedTemplate) {
      case 'basic':
        return AppBasic;
      case 'auth':
        return AppAuth;
      case 'full':
        return AppFull;
      default:
        throw new Error(`Unknown template: ${selectedTemplate}`);
    }
  };
  
  const TemplateComponent = getTemplateComponent();
  return (
    <FontLoader>
      <TemplateComponent />
    </FontLoader>
  );
};

export default App;