import type { Component } from 'solid-js';
import { A, useLocation, useNavigate } from '@solidjs/router';
import { Show } from 'solid-js';
import { authStore } from './store/authStore';
import { appStore } from './store/appStore';

interface AppContainerProps {
    children?: any;
}

const AppContainer: Component<AppContainerProps> = (props) => {
    const location = useLocation();
    const navigate = useNavigate();

    const handleLogout = () => {
        authStore.logout();
        navigate('/login');
    };

    return (
        <div class="min-h-screen bg-gray-50/50">
            {/* Top Navigation Bar */}
            <Show when={location.pathname !== '/login'}>
            <header class="bg-white border-b border-gray-200 sticky top-0 z-10 no-print">
                <div class="max-w-[1800px] w-full mx-auto px-4 sm:px-6 lg:px-8">
                    <div class="flex justify-between h-16">
                        <div class="flex items-center gap-8">
                            <div class="flex-shrink-0 flex items-center">
                                <button 
                                    onClick={() => {
                                        appStore.resetEstimate();
                                        navigate('/');
                                    }}
                                    class="font-bold text-xl text-gray-900 tracking-tight hover:text-blue-600 transition-colors"
                                >
                                    EstiMaker
                                </button>
                            </div>
                            <nav class="flex space-x-4">
                                <A 
                                    href="/"
                                    class="inline-flex items-center px-3 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-md transition-colors"
                                    activeClass="text-blue-600 bg-blue-50 hover:bg-blue-50 hover:text-blue-700"
                                    end={true}
                                >
                                    Item Extractor
                                </A>
                                <A 
                                    href="/templates"
                                    class="inline-flex items-center px-3 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-md transition-colors"
                                    activeClass="text-blue-600 bg-blue-50 hover:bg-blue-50 hover:text-blue-700"
                                >
                                    Template Creator
                                </A>
                                <A 
                                    href="/standard-pricing"
                                    class="inline-flex items-center px-3 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-md transition-colors"
                                    activeClass="text-blue-600 bg-blue-50 hover:bg-blue-50 hover:text-blue-700"
                                >
                                    Standard Pricing
                                </A>
                            </nav>
                        </div>
                        <div class="flex items-center gap-4">
                            <button
                                onClick={handleLogout}
                                class="inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 shadow-sm transition-colors"
                            >
                                Sign out
                            </button>
                        </div>
                    </div>
                </div>
            </header>
            </Show>

            {/* Main Content Area */}
            <main class="max-w-[1800px] w-full mx-auto p-4 sm:p-6 lg:p-8">
                {props.children}
            </main>
        </div>
    );
};

export default AppContainer;