import React from 'react';
import { ChevronRight } from 'lucide-react';
import { Sidebar } from './Sidebar';
import { Header } from './Header';
import type { CurrentUserMenuNodeDto } from '../../types/authSession';

interface LayoutProps {
  children: React.ReactNode;
  currentView: string;
  setCurrentView: (view: string) => void;
  menus?: CurrentUserMenuNodeDto[];
  onLogout?: () => void;
  /** 点击顶栏右上角当前用户区域 */
  onProfileClick?: () => void;
  /** 标签模板编辑器全屏：隐藏侧栏与顶栏，主内容占满视口 */
  hideAppChrome?: boolean;
}

export function Layout({
  children,
  currentView,
  setCurrentView,
  menus,
  onLogout,
  onProfileClick,
  hideAppChrome = false,
}: LayoutProps) {
  return (
    <div className="flex h-screen bg-gray-50 overflow-hidden font-sans">
      {!hideAppChrome && (
        <Sidebar currentView={currentView} setCurrentView={setCurrentView} menus={menus} onLogout={onLogout} />
      )}
      <div
        className="flex min-w-0 flex-1 flex-col overflow-hidden"
        style={{
          flex: "1 1 0%",
          minHeight: 0,
          minWidth: 0,
          display: "flex",
          flexDirection: "column",
          overflow: "hidden",
        }}
      >
        {!hideAppChrome && (
          <>
            <Header
              title={currentView}
              menus={menus}
              onNavigate={setCurrentView}
              onSettingsClick={() => setCurrentView('Support')}
              onProfileClick={onProfileClick}
            />
            <div className="mt-8 shrink-0 px-8">
              <nav className="flex items-center gap-2 text-sm font-normal" aria-label="Breadcrumb">
                <button
                  type="button"
                  onClick={() => setCurrentView('Dashboard')}
                  className="text-gray-500 transition-colors hover:text-gray-700"
                >
                  Home
                </button>
                <ChevronRight className="h-4 w-4 shrink-0 text-gray-500" />
                <span style={{ color: 'rgb(43, 50, 143)' }}>{currentView}</span>
              </nav>
            </div>
          </>
        )}
        <main
          className={
            hideAppChrome
              ? "flex flex-1 flex-col overflow-hidden p-0"
              : "flex-1 overflow-y-auto p-8"
          }
          style={
            hideAppChrome
              ? {
                  flex: "1 1 0%",
                  minHeight: 0,
                  display: "flex",
                  flexDirection: "column",
                  overflow: "hidden",
                  padding: 0,
                }
              : { flex: "1 1 0%", minHeight: 0, minWidth: 0 }
          }
        >
          <div
            className="flex w-full min-w-0 flex-1 flex-col"
            style={{
              flex: "1 1 0%",
              minHeight: 0,
              minWidth: 0,
              width: "100%",
              display: "flex",
              flexDirection: "column",
            }}
          >
            {children}
          </div>
        </main>
      </div>
    </div>
  );
}