/* === Dashboard Page === */
function PageDashboard() {
  return (
    <div className="page-dashboard">
      <div className="dashboard-header">
        <h2>视图看板</h2>
        <p className="header-desc">数据可视化展示与业务监控</p>
      </div>

      <div className="dashboard-grid">
        <div className="stat-card">
          <div className="stat-icon blue">📊</div>
          <div className="stat-content">
            <div className="stat-value">128</div>
            <div className="stat-label">产品总数</div>
            <div className="stat-trend up">+12 本周</div>
          </div>
        </div>

        <div className="stat-card">
          <div className="stat-icon green">🏢</div>
          <div className="stat-content">
            <div className="stat-value">24</div>
            <div className="stat-label">管理人数</div>
            <div className="stat-trend up">+3 本月</div>
          </div>
        </div>

        <div className="stat-card">
          <div className="stat-icon orange">⚠️</div>
          <div className="stat-content">
            <div className="stat-value">8</div>
            <div className="stat-label">预警事件</div>
            <div className="stat-trend down">-5 本周</div>
          </div>
        </div>

        <div className="stat-card">
          <div className="stat-icon purple">📈</div>
          <div className="stat-content">
            <div className="stat-value">89.2%</div>
            <div className="stat-label">产品覆盖率</div>
            <div className="stat-trend up">+2.1%</div>
          </div>
        </div>
      </div>

      <div className="dashboard-row">
        <div className="chart-card">
          <div className="card-header">
            <h3>产品类别分布</h3>
          </div>
          <div className="card-body">
            <div className="chart-placeholder">
              <div className="pie-chart">
                <div className="pie-slice" style={{ '--color': '#0f5cff', '--percent': 35 }}></div>
                <div className="pie-slice" style={{ '--color': '#00a99d', '--percent': 25 }}></div>
                <div className="pie-slice" style={{ '--color': '#ff7a1a', '--percent': 20 }}></div>
                <div className="pie-slice" style={{ '--color': '#9b59b6', '--percent': 12 }}></div>
                <div className="pie-slice" style={{ '--color': '#e74c3c', '--percent': 8 }}></div>
                <div className="pie-center">
                  <div className="center-label">128</div>
                  <div className="center-sub">总产品</div>
                </div>
              </div>
              <div className="pie-legend">
                <div className="legend-item"><span className="legend-dot" style={{ background: '#0f5cff' }}></span> 股票策略</div>
                <div className="legend-item"><span className="legend-dot" style={{ background: '#00a99d' }}></span> 债券策略</div>
                <div className="legend-item"><span className="legend-dot" style={{ background: '#ff7a1a' }}></span> 混合策略</div>
                <div className="legend-item"><span className="legend-dot" style={{ background: '#9b59b6' }}></span> 商品策略</div>
                <div className="legend-item"><span className="legend-dot" style={{ background: '#e74c3c' }}></span> 其他</div>
              </div>
            </div>
          </div>
        </div>

        <div className="chart-card">
          <div className="card-header">
            <h3>近30日预警趋势</h3>
          </div>
          <div className="card-body">
            <div className="chart-placeholder">
              <div className="line-chart">
                <div className="chart-grid">
                  {[60, 45, 30, 15, 0].map((val, i) => (
                    <div key={i} className="grid-line">
                      <span className="grid-label">{val}</span>
                    </div>
                  ))}
                </div>
                <div className="chart-bars">
                  {[42, 38, 52, 45, 32, 48, 55, 40, 35, 48].map((val, i) => (
                    <div key={i} className="bar" style={{ height: `${val}%` }}>
                      <div className="bar-tooltip">{val} 次</div>
                    </div>
                  ))}
                </div>
                <div className="chart-x-axis">
                  {['1/5', '1/10', '1/15', '1/20', '1/25', '1/30', '2/5', '2/10', '2/15', '2/20'].map((label, i) => (
                    <span key={i} className="x-label">{label}</span>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="dashboard-row">
        <div className="chart-card full">
          <div className="card-header">
            <h3>产品净值走势对比</h3>
            <div className="card-tabs">
              <button className="tab active">近30日</button>
              <button className="tab">近90日</button>
              <button className="tab">近1年</button>
            </div>
          </div>
          <div className="card-body">
            <div className="chart-placeholder">
              <div className="area-chart">
                <div className="chart-grid">
                  {[1.15, 1.10, 1.05, 1.00, 0.95].map((val, i) => (
                    <div key={i} className="grid-line">
                      <span className="grid-label">{val}</span>
                    </div>
                  ))}
                </div>
                <div className="chart-area">
                  <svg viewBox="0 0 800 200" preserveAspectRatio="none">
                    <defs>
                      <linearGradient id="gradient1" x1="0%" y1="0%" x2="0%" y2="100%">
                        <stop offset="0%" stopColor="#0f5cff" stopOpacity="0.3"/>
                        <stop offset="100%" stopColor="#0f5cff" stopOpacity="0"/>
                      </linearGradient>
                      <linearGradient id="gradient2" x1="0%" y1="0%" x2="0%" y2="100%">
                        <stop offset="0%" stopColor="#00a99d" stopOpacity="0.3"/>
                        <stop offset="100%" stopColor="#00a99d" stopOpacity="0"/>
                      </linearGradient>
                    </defs>
                    <path d="M0,150 Q100,140 200,130 T400,110 T600,90 T800,70 L800,200 L0,200 Z" fill="url(#gradient1)" />
                    <path d="M0,180 Q100,175 200,170 T400,160 T600,150 T800,140 L800,200 L0,200 Z" fill="url(#gradient2)" />
                    <path d="M0,150 Q100,140 200,130 T400,110 T600,90 T800,70" stroke="#0f5cff" strokeWidth="2" fill="none" />
                    <path d="M0,180 Q100,175 200,170 T400,160 T600,150 T800,140" stroke="#00a99d" strokeWidth="2" fill="none" />
                  </svg>
                </div>
                <div className="area-legend">
                  <div className="legend-item"><span className="legend-line" style={{ background: '#0f5cff' }}></span> 沪深300指增</div>
                  <div className="legend-item"><span className="legend-line" style={{ background: '#00a99d' }}></span> 同类平均</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}