import { Outlet, useLocation } from 'react-router-dom';
import { Navbar } from './Navbar';
import { Sidebar } from './Sidebar';
import { useUIStore } from '@stores/uiStore';

/**
 * 控制台布局 Shell
 * 固定侧栏、顶部导航栏、主工作区、移动端抽屉
 */
export function Layout() {
  const { sidebarOpen, setSidebarOpen } = useUIStore();
  const location = useLocation();
  const legacy = !/^\/(market\/?|auth\/reset\/?)?$/.test(location.pathname);

  return (
    <div className="min-h-screen bg-console-surface-base">
      {/* 顶部导航栏 */}
      <Navbar />

      <div className="flex">
        {/* 侧边栏：桌面端固定，移动端抽屉 */}
        <div
          className={`
            fixed inset-y-0 left-0 z-40 w-56 transform transition-transform duration-200 ease-out
            md:sticky md:top-12 md:h-[calc(100vh-3rem)] md:translate-x-0
            ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'}
          `}
          role="navigation"
          aria-label="控制台侧边栏"
        >
          <Sidebar />
        </div>

        {/* 移动端遮罩层 */}
        {sidebarOpen && (
          <div
            className="fixed inset-0 z-30 bg-black/50 md:hidden"
            onClick={() => setSidebarOpen(false)}
            aria-hidden="true"
          />
        )}

        {/* 主内容区域 */}
        <main className="flex-1 min-w-0">
          <div className="p-6 lg:p-8">
            {legacy && <div role="note" className="mb-5 rounded-md border border-amber-200 bg-amber-50 p-3 text-sm text-amber-900">Legacy 兼容入口：此处管理旧 Python 插件，不属于 DSH 原生市场。新云端部署默认不提供旧管理 API。</div>}
            <Outlet />
          </div>
        </main>
      </div>
    </div>
  );
}