import { useState } from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { Menu, Icon } from "@unimatrix-01/ui";
import { appConfig } from "./config";

const styleMap: Record<string, string> = {
    background_default: "var(--background-default)",
    background_elevated: "var(--background-elevated)",
    border_default: "var(--border-default)",
    content_primary: "var(--content-primary)",
    content_secondary: "var(--content-secondary)",
    interactive_accentfocus: "var(--interactive-accentfocus)",
    status_error: "var(--status-error)",
    status_info: "var(--status-info)",
    status_warning: "var(--status-warning)",
    surface_default: "var(--surface-default)",
    text_light: "var(--text-light)",
    text_background_default: "var(--text-background-default)",
    text_dark: "var(--text-dark)"
};

function Home() {
    return (
        <div className="p-8">
            <h1 className="text-4xl font-bold mb-6" style={{ color: styleMap.content_primary }}>
                Welcome to {appConfig.title}
            </h1>
            <p className="text-lg mb-4" style={{ color: styleMap.content_secondary }}>
                This is a modern React application built with Borg UI components.
            </p>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
                <div className="p-6 rounded-lg" style={{ backgroundColor: styleMap.background_elevated }}>
                    <h2 className="text-2xl font-semibold mb-4" style={{ color: styleMap.content_primary }}>Feature 1</h2>
                    <p style={{ color: styleMap.content_secondary }}>Description of feature 1</p>
                </div>
                <div className="p-6 rounded-lg" style={{ backgroundColor: styleMap.background_elevated }}>
                    <h2 className="text-2xl font-semibold mb-4" style={{ color: styleMap.content_primary }}>Feature 2</h2>
                    <p style={{ color: styleMap.content_secondary }}>Description of feature 2</p>
                </div>
                <div className="p-6 rounded-lg" style={{ backgroundColor: styleMap.background_elevated }}>
                    <h2 className="text-2xl font-semibold mb-4" style={{ color: styleMap.content_primary }}>Feature 3</h2>
                    <p style={{ color: styleMap.content_secondary }}>Description of feature 3</p>
                </div>
            </div>
        </div>
    );
}

function About() {
    return (
        <div className="p-8">
            <h1 className="text-4xl font-bold mb-6" style={{ color: styleMap.content_primary }}>
                About {appConfig.title}
            </h1>
            <p className="text-lg mb-4" style={{ color: styleMap.content_secondary }}>
                {appConfig.title} is a modern web application built with React, TypeScript, and Borg UI components.
            </p>
            <div className="mt-8">
                <h2 className="text-2xl font-semibold mb-4" style={{ color: styleMap.content_primary }}>Technologies Used</h2>
                <ul className="list-disc list-inside space-y-2" style={{ color: styleMap.content_secondary }}>
                    <li>React 18</li>
                    <li>TypeScript</li>
                    <li>Vite</li>
                    <li>Tailwind CSS</li>
                    <li>Borg UI Components</li>
                </ul>
            </div>
        </div>
    );
}

function App() {
    const [isMenuOpen, setIsMenuOpen] = useState(false);

    const menuItems = [
        {
            label: 'Home',
            href: '/',
            icon: <Icon name="arrow" size={20} />
        },
        {
            label: 'About',
            href: '/about',
            icon: <Icon name="info-state" size={20} />
        }
    ];

    return (
        <Router>
            <div className="min-h-screen flex flex-col" style={{ backgroundColor: styleMap.background_default }}>
                <header className="p-4 border-b" style={{ backgroundColor: styleMap.background_elevated, borderColor: styleMap.border_default }}>
                    <div className="flex items-center justify-between">
                        <div className="flex items-center space-x-4">
                            <img src="/src/assets/icon.png" alt="Logo" className="w-8 h-8" />
                            <h1 className="text-xl font-bold" style={{ color: styleMap.content_primary }}>{appConfig.title}</h1>
                        </div>
                        <button
                            onClick={() => setIsMenuOpen(!isMenuOpen)}
                            className="p-2 rounded-lg hover:bg-opacity-10"
                            style={{ backgroundColor: styleMap.interactive_accentfocus + '20' }}
                        >
                            <Icon name="arrow" />
                        </button>
                    </div>
                </header>

                <div className="flex flex-1">
                    <Menu items={menuItems} />

                    <main className="flex-1">
                        <Routes>
                            <Route path="/" element={<Home />} />
                            <Route path="/about" element={<About />} />
                        </Routes>
                    </main>
                </div>

                <footer className="p-4 border-t text-center" style={{ backgroundColor: styleMap.background_elevated, borderColor: styleMap.border_default }}>
                    <p style={{ color: styleMap.content_secondary }}>{appConfig.description}</p>
                </footer>
            </div>
        </Router>
    );
}

export default App;