/**
 * Main application component.
 *
 * @package GetMD
 * @since   1.0.0
 */

import { ExportFilters } from './components/ExportFilters';
import { ExportHistory } from './components/ExportHistory';
import { Settings } from './components/Settings';
import { Tabs, TabsContent, TabsList, TabsTrigger } from './components/ui/tabs';
import { Download, Clock, Settings as SettingsIcon } from 'lucide-react';

/**
 * Main application component that renders the tabbed UI for exporting content, viewing export history, and adjusting settings.
 *
 * Reads optional `i18n` strings from `window.summixGetmdData` to localize visible labels and falls back to English defaults when not provided.
 *
 * @returns A React element containing the header and a Tabs interface with panels for Export, Export History, and Settings.
 */
function App() {
  const { i18n } = window.summixGetmdData || {};

  return (
    <div className="smx-max-w-4xl smx-mx-auto smx-py-8">
      <div className="smx-mb-8">
        <h1 className="smx-text-3xl smx-font-bold smx-mb-2">
          {i18n?.appTitle || 'GetMD'}
        </h1>
        <p className="smx-text-muted-foreground">
          {i18n?.appSubtitle || 'Turn your WordPress content into clean Markdown files.'}
        </p>
      </div>

      <Tabs defaultValue="export" className="smx-w-full">
        <TabsList className="smx-grid smx-w-full smx-grid-cols-3">
          <TabsTrigger value="export">
            <Download className="smx-w-4 smx-h-4 smx-mr-2" />
            {i18n?.tabExport || 'Export'}
          </TabsTrigger>
          <TabsTrigger value="history">
            <Clock className="smx-w-4 smx-h-4 smx-mr-2" />
            {i18n?.tabHistory || 'History'}
          </TabsTrigger>
          <TabsTrigger value="settings">
            <SettingsIcon className="smx-w-4 smx-h-4 smx-mr-2" />
            {i18n?.tabSettings || 'Settings'}
          </TabsTrigger>
        </TabsList>
        <TabsContent value="export">
          <ExportFilters />
        </TabsContent>
        <TabsContent value="history">
          <ExportHistory />
        </TabsContent>
        <TabsContent value="settings">
          <Settings />
        </TabsContent>
      </Tabs>
    </div>
  );
}

export default App;