import { useState } from 'react';
import { Layout, Tag, Spin } from '@douyinfe/semi-ui';
import { useDashboardData } from './hooks/useDashboardData';
import { ProductionBoard } from './pages/ProductionBoard';
import { WarehouseBoard } from './pages/WarehouseBoard';
import { LineModel } from './pages/LineModel';
import { ErrorRetry } from './components/ErrorRetry';

export function App() {
  const { data: dashboard, mode, error, retry } = useDashboardData();
  const loading = !dashboard && !error;
  const [now, setNow] = useState(() => new Date());

  // 时钟
  setTimeout(() => setNow(new Date()), 1000);

  return (
    <Layout className="app-shell">
      <Layout.Header className="app-header">
        <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">{now.toLocaleTimeString('zh-CN')}</span>
          <span className="date">{now.toLocaleDateString('zh-CN', { weekday: 'long' })}</span>
        </div>
      </Layout.Header>

      <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 ? (
              <div className="dashboard-grid">
                <section className="dash-section production">
                  <div className="board-card">
                    <ProductionBoard data={dashboard} />
                  </div>
                </section>
                <section className="dash-section warehouse">
                  <div className="board-card">
                    <WarehouseBoard data={dashboard} />
                  </div>
                </section>
                <section className="dash-section model">
                  <LineModel data={dashboard} />
                </section>
              </div>
            ) : (
              <div style={{ padding: 40, textAlign: 'center', color: '#94a3b8' }}>
                等待产线数据…
              </div>
            )}
          </ErrorRetry>
        )}
      </Layout.Content>
    </Layout>
  );
}