import { useEffect, useState } from 'react';
import { Layout, Nav, Tag, Spin } from '@douyinfe/semi-ui';
import { IconMonitorStroked, IconSaveStroked, IconGridView } from '@douyinfe/semi-icons';
import { useDashboardData } from '@bj_power_dashboard/hooks/useDashboardData';
import { ProductionBoard } from '@bj_power_dashboard/pages/ProductionBoard';
import { WarehouseBoard } from '@bj_power_dashboard/pages/WarehouseBoard';
import { LineModel } from '@bj_power_dashboard/pages/LineModel';
import { ErrorRetry } from '@bj_power_dashboard/components/ErrorRetry';

type PageKey = 'production' | 'warehouse' | 'model';

const navItems = [
  { itemKey: 'production', text: '生产总览', icon: <IconMonitorStroked /> },
  { itemKey: 'warehouse', text: '仓储动态', icon: <IconSaveStroked /> },
  { itemKey: 'model', text: '产线孪生', icon: <IconGridView /> },
];

const CYCLE_ORDER: PageKey[] = ['production', 'warehouse', 'model'];
const CYCLE_MS = 40_000;

export function App() {
  const [page, setPage] = useState<PageKey>('production');
  const { data: dashboard, mode, error, retry } = useDashboardData();
  const loading = !dashboard && !error;

  // 无人值守自动轮播：40s 切下一屏；手动点选后重新计时
  useEffect(() => {
    const timer = setInterval(() => {
      setPage((cur) => {
        const idx = CYCLE_ORDER.indexOf(cur);
        return CYCLE_ORDER[(idx + 1) % CYCLE_ORDER.length];
      });
    }, CYCLE_MS);
    return () => clearInterval(timer);
  }, [page]);

  const selectPage = (k: string) => setPage(k as PageKey);

  return (
    <Layout className="app-shell">
      <Layout.Header className="app-header">
        <div className="app-title">北京电力智能产线 · 生产看板</div>
        <div className="app-meta">
          {mode === 'sse' && <Tag color="green">实时推送</Tag>}
          {mode === 'polling' && <Tag color="blue">轮询刷新</Tag>}
          {mode === 'demo' && <Tag color="amber">演示数据</Tag>}
          {mode === 'init' && <Tag color="grey">连接中</Tag>}
          <span className="clock">{new Date().toLocaleTimeString('zh-CN')}</span>
        </div>
      </Layout.Header>

      <Layout.Sider style={{ background: 'transparent' }}>
        <Nav selectedKeys={[page]} onSelect={(k) => selectPage(String(k.itemKey))} items={navItems} />
      </Layout.Sider>

      <Layout.Content className="app-content">
        {loading ? (
          <div style={{ display: 'flex', justifyContent: 'center', padding: 80 }}>
            <Spin size="large" tip="数据加载中…" />
          </div>
        ) : (
          <ErrorRetry error={error} mode={mode} loading={loading} onRetry={retry}>
            {dashboard && page === 'production' && <ProductionBoard data={dashboard} />}
            {dashboard && page === 'warehouse' && <WarehouseBoard data={dashboard} />}
            {dashboard && page === 'model' && <LineModel data={dashboard} />}
          </ErrorRetry>
        )}
      </Layout.Content>
    </Layout>
  );
}