import type { BaseModelCatalogItem, IntegrationPlatform, PlatformModel, RateLimitWindow } from '@easyai-ai-gateway/contracts';
import { adminPages, apiDocPages, primaryModules, workspacePages } from '../navigation';
import { DataPanel } from './DataPanel';
import { ModuleList } from './ModuleList';
import { baseModelTypeText } from '../pages/admin/platform-form';

export function Dashboard(props: {
  baseModels: BaseModelCatalogItem[];
  models: PlatformModel[];
  platforms: IntegrationPlatform[];
  rateLimitWindows: RateLimitWindow[];
  stats: Array<{ label: string; value: number; tone: string }>;
}) {
  return (
    <>
      <section className="moduleBand" aria-label="一级页面">
        <div className="sectionHeader">
          <div>
            <p className="eyebrow">Navigation</p>
            <h2>前端页面结构</h2>
          </div>
          <span>5 个一级模块</span>
        </div>
        <div className="moduleGrid">
          {primaryModules.map((item) => (
            <article className="moduleCard" key={item.path}>
              <div className="moduleCardTop">
                <h3>{item.title}</h3>
                <span>{item.path}</span>
              </div>
              <p>{item.description}</p>
              <div className="moduleTags">
                {item.items.map((tag) => (
                  <span key={tag}>{tag}</span>
                ))}
              </div>
            </article>
          ))}
        </div>
      </section>

      <section className="moduleBand" aria-label="工作台与文档">
        <div className="sectionHeader">
          <div>
            <p className="eyebrow">Workspace</p>
            <h2>用户、管理与 API 文档</h2>
          </div>
          <span>设计分区</span>
        </div>
        <div className="detailGrid">
          <ModuleList title="用户工作台" items={workspacePages} />
          <ModuleList title="管理工作台" items={adminPages} />
          <ModuleList title="API 文档" items={apiDocPages} />
        </div>
      </section>

      <section className="metrics" aria-label="概览">
        {props.stats.map((item) => (
          <div className="metric" data-tone={item.tone} key={item.label}>
            <span>{item.label}</span>
            <strong>{item.value}</strong>
          </div>
        ))}
      </section>

      <section className="split">
        <DataPanel
          columns={['Provider', '名称', '状态', '优先级']}
          empty="暂无平台数据"
          rows={props.platforms.map((item) => [item.provider, item.internalName || item.name, item.status, String(item.priority)])}
          title="平台"
        />
        <DataPanel
          columns={['模型', '类型', '平台', '启用']}
          empty="暂无模型数据"
          rows={props.models.map((item) => [item.modelName, item.modelType.join(', '), item.provider ?? item.platformName ?? '-', item.enabled ? '是' : '否'])}
          title="模型"
        />
      </section>

      <section className="split secondary">
        <DataPanel
          columns={['Provider', '模型', '类型', '版本']}
          empty="暂无基准模型"
          rows={props.baseModels.map((item) => [item.providerKey, item.canonicalModelKey, baseModelTypeText(item), String(item.pricingVersion)])}
          title="基准模型库"
        />
        <DataPanel
          columns={['Scope', '指标', '使用', '预占']}
          empty="暂无限流窗口"
          rows={props.rateLimitWindows.map((item) => [item.scopeKey, item.metric, `${item.usedValue}/${item.limitValue}`, String(item.reservedValue)])}
          title="TPM/RPM 窗口"
        />
      </section>
    </>
  );
}
