import { Badge, Button, Input, Nav, Space, Tag, Typography } from '@douyinfe/semi-ui';
import {
  IconActivity,
  IconBarChartHStroked,
  IconHistogram,
  IconHome,
  IconMapPin,
  IconSearch,
  IconServer,
  IconSetting
} from '@douyinfe/semi-icons';
import type { ReactNode } from 'react';

export type PageKey = 'dashboard' | 'vehicles' | 'realtime' | 'detail' | 'history' | 'mileage' | 'quality';

const navItems = [
  { itemKey: 'dashboard', text: '总览工作台', icon: <IconHome /> },
  { itemKey: 'vehicles', text: '车辆台账', icon: <IconServer /> },
  { itemKey: 'realtime', text: '实时状态', icon: <IconActivity /> },
  { itemKey: 'detail', text: '车辆详情', icon: <IconSetting /> },
  { itemKey: 'history', text: '历史查询', icon: <IconMapPin /> },
  { itemKey: 'mileage', text: '里程分析', icon: <IconBarChartHStroked /> },
  { itemKey: 'quality', text: '数据质量', icon: <IconHistogram /> }
];

export function AppShell({
  activePage,
  onChange,
  children
}: {
  activePage: PageKey;
  onChange: (page: PageKey) => void;
  children: ReactNode;
}) {
  return (
    <div className="vp-app">
      <div className="vp-shell">
        <aside className="vp-sidebar">
          <div className="vp-brand">
            <span className="vp-brand-mark" />
            <span>车辆数据中台</span>
          </div>
          <Nav
            selectedKeys={[activePage]}
            items={navItems}
            onSelect={({ itemKey }) => onChange(itemKey as PageKey)}
            style={{ maxWidth: '100%' }}
          />
        </aside>
        <main className="vp-main">
          <header className="vp-topbar">
            <Space spacing={12}>
              <Input prefix={<IconSearch />} placeholder="搜索 VIN / 车牌 / 手机号" style={{ width: 320 }} />
              <Button theme="solid" type="primary">查询车辆</Button>
            </Space>
            <Space spacing={12}>
              <Tag color="blue">生产环境</Tag>
              <Badge count={0} type="success">
                <Typography.Text>链路正常</Typography.Text>
              </Badge>
            </Space>
          </header>
          {children}
        </main>
      </div>
    </div>
  );
}