import React, { type ReactNode } from 'react';
import { Calculator, FileDown, Settings, Menu, Home, Building2, Wind, BarChart3, FileText } from 'lucide-react';
import { Button } from '../components/ui/button';

interface AppShellProps {
    children: ReactNode;
    activeTab: string;
    onTabChange: (tab: string) => void;
    onCalculate?: () => void;
    onExport?: () => void;
    onSettings?: () => void;
}

const navItems = [
    { id: 'params', label: 'Wind Load Parameters', icon: Wind },
    { id: 'classification', label: 'Building Classification', icon: Building2 },
    { id: 'roof-zones', label: 'Roof Zones (C&C)', icon: Home },
    { id: 'mwfrs', label: 'MWFRS Load Cases', icon: BarChart3 },
    { id: 'report', label: 'Report', icon: FileText },
];

export const AppShell: React.FC<AppShellProps> = ({
    children,
    activeTab,
    onTabChange,
    onCalculate,
    onExport,
    onSettings
}) => {
    const [sidebarCollapsed, setSidebarCollapsed] = React.useState(false);

    return (
        <div className="min-h-screen flex flex-col bg-slate-50">
            {/* Top Header */}
            <header className="h-14 flex items-center justify-between px-4 border-b bg-white shadow-sm z-10">
                {/* Left: App title + breadcrumb */}
                <div className="flex items-center gap-3">
                    <button
                        onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
                        className="lg:hidden p-2 hover:bg-slate-100 rounded-md"
                    >
                        <Menu className="w-5 h-5 text-slate-600" />
                    </button>
                    <div className="flex items-center gap-2 text-sm text-slate-600">
                        <span className="font-semibold text-slate-800">PBExpress</span>
                        <span className="text-slate-300">/</span>
                        <span>Wind Design</span>
                        <span className="text-slate-300">/</span>
                        <span className="text-slate-500">
                            {navItems.find(item => item.id === activeTab)?.label || 'Dashboard'}
                        </span>
                    </div>
                </div>

                {/* Right: Action buttons */}
                <div className="flex items-center gap-2">
                    <Button
                        variant="default"
                        size="sm"
                        onClick={onCalculate}
                        className="inline-flex items-center gap-1.5 rounded-md bg-indigo-600 px-3 py-1.5 text-xs font-medium text-white shadow hover:bg-indigo-500"
                    >
                        <Calculator className="w-3.5 h-3.5" />
                        Calculate
                    </Button>
                    <Button
                        variant="outline"
                        size="sm"
                        onClick={onExport}
                        className="inline-flex items-center gap-1.5 rounded-md border border-slate-300 px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-50"
                    >
                        <FileDown className="w-3.5 h-3.5" />
                        Export
                    </Button>
                    <Button
                        variant="ghost"
                        size="sm"
                        onClick={onSettings}
                        className="p-1.5 hover:bg-slate-100 rounded-md"
                    >
                        <Settings className="w-4 h-4 text-slate-600" />
                    </Button>
                    <div className="w-8 h-8 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center text-white text-xs font-semibold ml-2">
                        PB
                    </div>
                </div>
            </header>

            <div className="flex flex-1 overflow-hidden">
                {/* Left Sidebar */}
                <aside
                    className={`${sidebarCollapsed ? 'w-0 lg:w-64' : 'w-64'} bg-slate-900 text-slate-100 flex flex-col border-r border-slate-800 transition-all duration-300 overflow-hidden`}
                >
                    {/* App Logo/Title */}
                    <div className="h-14 flex items-center px-4 border-b border-slate-800">
                        <div className="flex items-center gap-2">
                            <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
                                <Wind className="w-4 h-4 text-white" />
                            </div>
                            <div>
                                <div className="text-sm font-bold text-white">Wind Calculator</div>
                                <div className="text-[10px] text-slate-400">ASCE 7 Design</div>
                            </div>
                        </div>
                    </div>

                    {/* Navigation */}
                    <nav className="flex-1 px-3 py-4 space-y-1 overflow-y-auto custom-scrollbar">
                        {navItems.map((item) => {
                            const Icon = item.icon;
                            const isActive = activeTab === item.id;

                            return (
                                <button
                                    key={item.id}
                                    onClick={() => onTabChange(item.id)}
                                    className={`w-full flex items-center gap-3 px-3 py-2.5 text-xs font-medium rounded-md transition-colors ${isActive
                                        ? 'bg-slate-800 text-white'
                                        : 'text-slate-300 hover:bg-slate-800/50 hover:text-white'
                                        }`}
                                >
                                    <div className={`w-5 h-5 rounded flex items-center justify-center ${isActive ? 'bg-indigo-500' : 'bg-slate-800'
                                        }`}>
                                        <Icon className="w-3 h-3" />
                                    </div>
                                    <span>{item.label}</span>
                                </button>
                            );
                        })}
                    </nav>

                    {/* Footer */}
                    <div className="p-3 border-t border-slate-800 text-[10px] text-slate-500">
                        <div>Version 1.0.0</div>
                        <div>© 2024 PBExpress</div>
                    </div>
                </aside>

                {/* Main Content */}
                <main className="flex-1 overflow-auto bg-slate-50">
                    <div className="p-4">
                        {children}
                    </div>
                </main>
            </div>
        </div>
    );
};
