import type { ReactNode } from 'react';
import { BookOpen, Boxes, Home, RefreshCw, ShieldCheck, Sparkles, UserCircle } from 'lucide-react';
import type { HealthResponse } from '../../api';
import type { LoadState, PageKey } from '../../types';
import type { AuthenticationStatus } from '../AuthGate';
import { Button, Badge } from '../ui';

const navItems: Array<{ key: PageKey; label: string; icon: ReactNode }> = [
  { key: 'home', label: '首页', icon: <Home size={17} /> },
  { key: 'models', label: '模型', icon: <Boxes size={17} /> },
  { key: 'playground', label: '在线测试', icon: <Sparkles size={17} /> },
  { key: 'workspace', label: '用户工作台', icon: <UserCircle size={17} /> },
  { key: 'admin', label: '管理工作台', icon: <ShieldCheck size={17} /> },
  { key: 'docs', label: 'API 文档', icon: <BookOpen size={17} /> },
];

export function AppShell(props: {
  activePage: PageKey;
  canAccessAdmin: boolean;
  children: ReactNode;
  health: HealthResponse | null;
  authenticationStatus: AuthenticationStatus;
  state: LoadState;
  onNavigate: (page: PageKey) => void;
  onLogin: () => void;
  onRefresh: () => void;
  onSignOut: () => void;
}) {
  const isAuthenticated = props.authenticationStatus === 'authenticated';

  return (
    <div className="appShell" data-page={props.activePage}>
      <header className="appTopbar">
        <div className="brandBlock">
          <div className="brandMark">AI</div>
          <div>
            <strong>EasyAI Gateway</strong>
            <span>Console</span>
          </div>
        </div>
        <nav className="topNav" aria-label="主导航">
          {navItems.filter((item) => item.key !== 'admin' || props.canAccessAdmin).map((item) => (
            <button
              type="button"
              className="topNavItem"
              data-active={props.activePage === item.key}
              key={item.key}
              onClick={() => props.onNavigate(item.key)}
            >
              {item.icon}
              <span>{item.label}</span>
            </button>
          ))}
        </nav>

        <div className="topbarActions">
          <div className="health" data-ok={props.health?.ok === true}>
            <span />
            {props.health?.identityMode ? `${props.health.service} · ${props.health.identityMode}` : props.health?.service ?? 'API 未连接'}
          </div>
          {props.authenticationStatus === 'checking' ? null : isAuthenticated ? (
            <>
              <Button type="button" variant="outline" size="sm" onClick={props.onRefresh} disabled={props.state === 'loading'}>
                <RefreshCw size={15} />
                {props.state === 'loading' ? '刷新中' : '刷新'}
              </Button>
              <Button type="button" variant="ghost" size="sm" onClick={props.onSignOut}>
                退出
              </Button>
            </>
          ) : (
            <Button type="button" size="sm" onClick={props.onLogin}>
              登录
            </Button>
          )}
        </div>
      </header>

      <div className="workspaceShell">
        <main className="contentShell" data-page={props.activePage}>
          {props.state === 'error' && <Badge variant="destructive">数据加载失败</Badge>}
          {props.children}
        </main>
      </div>
    </div>
  );
}
