import React, { useState } from 'react';
import { Outlet, useNavigate, useLocation } from 'react-router-dom';
import {
    MessageSquare,
    Database,
    Settings,
    LogOut,
    LayoutGrid,
    LayoutTemplate,
    Plus,
    Menu,
    BookOpen,
    Library,
    HardDrive,
    Building2,
    ChevronRight,
    Bot,
    Blocks
} from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';
import { useAuth } from '../../contexts/AuthContext';
import { useLanguage } from '../../../contexts/LanguageContext';
import { cn } from '../../utils/cn';

interface TenantTreeNode {
    tenantId: string;
    role: string;
    tenant: {
        id: string;
        name: string;
        domain?: string;
        parentId?: string;
    };
    children?: TenantTreeNode[];
}

const buildTenantTree = (memberships: any[]): TenantTreeNode[] => {
    const map = new Map<string, TenantTreeNode>();
    const roots: TenantTreeNode[] = [];

    memberships.forEach(m => {
        map.set(m.tenantId, { ...m, children: [] });
    });

    memberships.forEach(m => {
        const node = map.get(m.tenantId)!;
        const parentId = (m.tenant as any)?.parentId;
        if (parentId && map.has(parentId)) {
            const parent = map.get(parentId)!;
            parent.children = parent.children || [];
            parent.children.push(node);
        } else {
            roots.push(node);
        }
    });

    return roots;
};

interface SidebarItemProps {
    icon: React.ElementType;
    label: string;
    path: string;
    isActive: boolean;
    onClick: (path: string) => void;
    badge?: number;
}

const SidebarItem = ({ icon: Icon, label, path, isActive, onClick, badge }: SidebarItemProps) => (
    <button
        onClick={() => onClick(path)}
        className={cn(
            "w-full flex items-center justify-between px-3 py-2.5 rounded-lg transition-all duration-200 group",
            isActive
                ? "bg-blue-50 text-blue-700 font-semibold"
                : "text-slate-500 hover:bg-slate-50 hover:text-slate-900 border border-transparent"
        )}
    >
        <div className="flex items-center gap-3">
            <Icon size={18} className={cn("transition-colors", isActive ? "text-blue-600" : "text-slate-400 group-hover:text-slate-600")} />
            <span className="text-[14px]">{label}</span>
        </div>
        {badge !== undefined && badge > 0 && (
            <span className={cn(
                "px-2 py-0.5 text-[11px] font-bold rounded-full",
                isActive ? "bg-blue-100 text-blue-700" : "bg-slate-100 text-slate-400"
            )}>
                {badge}
            </span>
        )}
    </button>
);

const WorkspaceLayout: React.FC = () => {
    const { user, logout, availableTenants, activeTenant, switchTenant } = useAuth();
    const { t } = useLanguage();
    const navigate = useNavigate();
    const location = useLocation();
    const [isSidebarOpen, setIsSidebarOpen] = useState(true);
    const [showTenantMenu, setShowTenantMenu] = useState(false);

    const handleNavClick = (path: string) => {
        navigate(path);
    };

    return (
        <div className="flex h-screen bg-[#FCFDFF] text-slate-900 font-sans selection:bg-blue-100 selection:text-blue-900">

            {/* Sidebar */}
            <aside className={cn(
                "bg-white border-r border-slate-200/60 flex flex-col transition-all duration-300 overflow-hidden",
                isSidebarOpen ? "w-[260px]" : "w-0 border-r-0"
            )}>
                {/* Brand */}
                <div className="h-16 flex items-center px-6 border-b border-slate-100/50">
                    <div className="flex items-center gap-2.5">
                        <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center shadow-md shadow-blue-200 text-white font-bold shrink-0">
                            <BookOpen size={18} />
                        </div>
                        <h1 className="text-xl font-bold tracking-tight text-slate-900">AuraK</h1>
                    </div>
                </div>

                {/* Navigation */}
                <nav className="flex-1 px-4 py-6 space-y-6 overflow-y-auto">
                    <div className="space-y-0.5">
                        <SidebarItem
                            icon={MessageSquare}
                            label={t('navChat')}
                            path="/chat"
                            isActive={location.pathname.startsWith('/chat')}
                            onClick={handleNavClick}
                        />
{/* 
                        <SidebarItem
                            icon={Bot}
                            label={t('navAgent')}
                            path="/agents"
                            isActive={location.pathname.startsWith('/agents')}
                            onClick={handleNavClick}
                        />
                        <SidebarItem
                            icon={Blocks}
                            label={t('navPlugin')}
                            path="/plugins"
                            isActive={location.pathname.startsWith('/plugins')}
                            onClick={handleNavClick}
                        />
                        */}
                        <SidebarItem
                            icon={Database}
                            label={t('navKnowledge')}
                            path="/knowledge"
                            isActive={location.pathname === '/knowledge' || location.pathname.startsWith('/knowledge/')}
                            onClick={handleNavClick}
                        />
                        {/* 
                        {(activeTenant?.features?.isNotebookEnabled ?? true) && (
                            <SidebarItem
                                icon={BookOpen}
                                label={t('navNotebook')}
                                path="/notebook"
                                isActive={location.pathname.startsWith('/notebook')}
                                onClick={handleNavClick}
                            />
                        )}
                        */}
                    </div>

                    <div className="space-y-0.5">
                        <SidebarItem
                            icon={Settings}
                            label={t('tabSettings')}
                            path="/settings"
                            isActive={location.pathname.startsWith('/settings')}
                            onClick={handleNavClick}
                        />
                    </div>
                </nav>
            </aside>

            {/* Main Content Area */}
            <main className="flex-1 flex flex-col min-w-0 overflow-hidden relative">
                {/* Top Header */}
                <header className="flex-none h-16 px-6 border-b border-slate-200/60 flex items-center justify-between bg-white/80 backdrop-blur-md relative z-40">
                    <div className="flex items-center gap-4 flex-1">
                        <button
                            onClick={() => setIsSidebarOpen(!isSidebarOpen)}
                            className="p-2 text-slate-400 rounded-lg hover:bg-slate-100 transition-colors"
                        >
                            <Menu size={20} />
                        </button>

                        {/* Tenant Switcher */}
                        <div className="relative">
                            <button
                                onClick={() => setShowTenantMenu(!showTenantMenu)}
                                className="flex items-center gap-2 px-4 py-2 bg-slate-50 border border-slate-200 rounded-xl hover:bg-slate-100 transition-all group"
                            >
                                <Building2 size={16} className="text-blue-600" />
                                <span className="text-sm font-bold text-slate-700">{activeTenant?.tenant?.name || t('selectOrganization')}</span>
                                <ChevronRight size={14} className={cn("text-slate-400 transition-transform", showTenantMenu ? "rotate-90" : "")} />
                            </button>

                            <AnimatePresence>
                                {showTenantMenu && (
                                    <>
                                        <div className="fixed inset-0 z-40" onClick={() => setShowTenantMenu(false)} />
                                        <motion.div
                                            initial={{ opacity: 0, y: 10 }}
                                            animate={{ opacity: 1, y: 0 }}
                                            exit={{ opacity: 0, y: 10 }}
                                            className="absolute top-full mt-2 left-0 w-64 bg-white border border-slate-200 rounded-2xl shadow-xl z-50 overflow-hidden"
                                        >
                                            <div className="p-3 border-b border-slate-100">
                                                <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-2">{t('navTenants')}</span>
                                            </div>
                                            <div className="max-h-80 overflow-y-auto p-1">
                                                {(() => {
                                                    const tree = buildTenantTree(availableTenants);
                                                    const renderTenantItem = (node: TenantTreeNode, depth: number = 0) => {
                                                        const isSelected = activeTenant?.tenantId === node.tenantId;
                                                        return (
                                                            <React.Fragment key={node.tenantId}>
                                                                <button
                                                                    onClick={() => {
                                                                        switchTenant(node.tenantId);
                                                                        setShowTenantMenu(false);
                                                                    }}
                                                                    className={cn(
                                                                        "w-full text-left px-4 py-2.5 rounded-xl flex items-center justify-between group transition-colors",
                                                                        isSelected
                                                                            ? "bg-blue-50 text-blue-700"
                                                                            : "hover:bg-slate-50 text-slate-600"
                                                                    )}
                                                                    style={{ marginLeft: `${depth * 12}px`, width: `calc(100% - ${depth * 12}px)` }}
                                                                >
                                                                    <div className="flex items-center gap-2 min-w-0">
                                                                        {depth > 0 && (
                                                                            <ChevronRight size={12} className="text-slate-300 shrink-0" />
                                                                        )}
                                                                        <div className="flex flex-col min-w-0">
                                                                            <span className="text-sm font-bold truncate">{node.tenant.name}</span>
                                                                            <span className="text-[9px] font-black opacity-40 uppercase tracking-tighter leading-none">{node.role?.replace('_', ' ')}</span>
                                                                        </div>
                                                                    </div>
                                                                    {isSelected && (
                                                                        <div className="w-1.5 h-1.5 bg-blue-600 rounded-full shrink-0 ml-2" />
                                                                    )}
                                                                </button>
                                                                {node.children && node.children.length > 0 && (
                                                                    <div className="mt-0.5 mb-1">
                                                                        {node.children.map(child => renderTenantItem(child, depth + 1))}
                                                                    </div>
                                                                )}
                                                            </React.Fragment>
                                                        );
                                                    };
                                                    return tree.map(root => renderTenantItem(root));
                                                })()}
                                            </div>
                                        </motion.div>
                                    </>
                                )}
                            </AnimatePresence>
                        </div>
                    </div>
                    <div className="flex items-center gap-2">
                        <div className="flex items-center gap-2 px-3 py-1.5 bg-slate-50 rounded-lg border border-slate-200/50">
                            <div className="flex items-center justify-center w-8 h-8 text-sm font-bold text-white bg-indigo-600 rounded-full shrink-0 shadow-sm">
                                {user?.username?.[0]?.toUpperCase() || 'A'}
                            </div>
                            <p className="text-sm font-semibold text-slate-900 truncate">{user?.displayName || user?.username}</p>
                        </div>
                        <button
                            onClick={logout}
                            className="p-2 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
                            title={t('logout')}
                        >
                            <LogOut size={18} />
                        </button>
                    </div>
                </header>

                {/* Page Content Rendered Here via Outlet */}
                <div className="flex-1 bg-[#FCFDFF] overflow-hidden flex flex-col relative">
                    <div className="max-w-[1400px] w-full mx-auto h-full relative">
                        <Outlet />
                    </div>
                </div>
            </main>
        </div>
    );
};

export default WorkspaceLayout;
