import { Link } from 'react-router-dom';
import { apiGet } from '../api/client';
import { getCatalogVersion, getHealth } from '../api/endpoints';
import {
  PUBLISH_STATUSES,
  type ContractVersion,
  type Health,
  type Page,
  type PublishStatus,
} from '../api/types';
import { STATUS_LABELS } from '../lib/labels';
import { formatDateTime } from '../lib/format';
import { settle, useAsync, type Settled } from '../lib/useAsync';
import { Empty, ErrorBox, Loading } from '../components/ui';

type StatusCounts = Record<PublishStatus, number | null>;

interface KindRow {
  key: 'songs' | 'motions' | 'models';
  label: string;
  path: string;
}

const KINDS: KindRow[] = [
  { key: 'songs', label: '曲目 songs', path: '/songs' },
  { key: 'motions', label: '动作 motions', path: '/motions' },
  { key: 'models', label: '模型 models', path: '/models' },
];

/** 每个状态各发一次 pageSize=1 的请求，用 total 求和；单个失败不影响其他。 */
async function fetchStatusCounts(kind: string): Promise<StatusCounts> {
  const results = await Promise.all(
    PUBLISH_STATUSES.map(async (status) => {
      try {
        const page = await apiGet<Page<unknown>>(`/api/${kind}`, { page: 1, pageSize: 1, status });
        const total = typeof page.total === 'number' ? page.total : 0;
        return [status, total] as const;
      } catch {
        return [status, null] as const;
      }
    }),
  );
  const counts: StatusCounts = { draft: null, pending: null, published: null, rejected: null };
  for (const [status, value] of results) counts[status] = value;
  return counts;
}

function sumCounts(counts: StatusCounts): number | null {
  let total = 0;
  for (const status of PUBLISH_STATUSES) {
    const value = counts[status];
    if (value === null) return null;
    total += value;
  }
  return total;
}

interface DashboardData {
  health: Settled<Health>;
  version: Settled<ContractVersion>;
  counts: Record<string, StatusCounts>;
}

export function DashboardPage() {
  const state = useAsync<DashboardData>(async () => {
    const [health, version, songs, motions, models] = await Promise.all([
      settle(getHealth()),
      settle(getCatalogVersion()),
      fetchStatusCounts('songs'),
      fetchStatusCounts('motions'),
      fetchStatusCounts('models'),
    ]);
    return { health, version, counts: { songs, motions, models } };
  }, []);

  if (state.loading && !state.data) return <Loading text="正在加载概览…" />;
  if (state.error && !state.data) return <ErrorBox message={state.error} onRetry={state.reload} />;
  if (!state.data) return <Empty text="暂无概览数据" />;

  const { health, version, counts } = state.data;
  const unreachable = !health.ok;
  const healthValue = health.value;

  return (
    <div className="page">
      <header className="page-head">
        <div>
          <h1>概览</h1>
          <p className="muted">OpenDance Studio 管理端 · 契约 rest-api 0.1.0</p>
        </div>
        <button type="button" className="btn btn-ghost" onClick={state.reload} disabled={state.loading}>
          {state.loading ? '刷新中…' : '刷新'}
        </button>
      </header>

      {unreachable ? (
        <div className="banner banner-warn" role="alert">
          <strong>⚠ API 服务不可达</strong>
          <span>{health.error ?? '未知错误'}</span>
          <span className="muted">
            管理端默认请求同源 <code>/api</code> 与 <code>/health</code>：开发期由 vite 代理到
            <code> http://localhost:3000</code>，生产期由 nginx 反代到 <code>http://api:3000</code>。
            请确认服务端已启动，或通过 <code>VITE_API_BASE</code> 指定其他基址。
          </span>
        </div>
      ) : null}

      {state.error ? <ErrorBox message={state.error} onRetry={state.reload} /> : null}

      <section className="card-grid">
        {KINDS.map((kind) => {
          const kindCounts = counts[kind.key];
          const total = sumCounts(kindCounts);
          return (
            <article className="stat-card" key={kind.key}>
              <header>
                <h3>{kind.label}</h3>
                <Link className="link-btn" to={kind.path}>
                  进入管理 →
                </Link>
              </header>
              <div className="stat-total">
                {total === null ? <span className="muted">—</span> : total}
                <span className="muted"> 条记录</span>
              </div>
              <ul className="stat-list">
                {PUBLISH_STATUSES.map((status) => (
                  <li key={status}>
                    <span className={`dot dot-${status}`} aria-hidden="true" />
                    <span>{STATUS_LABELS[status]}</span>
                    <strong>{kindCounts[status] === null ? '—' : kindCounts[status]}</strong>
                  </li>
                ))}
              </ul>
              {total === null ? <p className="muted small">部分状态统计失败（服务不可达或鉴权失败）</p> : null}
            </article>
          );
        })}
      </section>

      <section className="panel">
        <header className="panel-head">
          <h2>契约版本 / 目录指纹</h2>
          <span className="muted">GET /api/catalog/version</span>
        </header>
        <div className="panel-body">
          {version.ok && version.value ? (
            <>
              <div className="kv-grid">
                {Object.entries(version.value.contractVersion ?? {}).map(([key, value]) => (
                  <div className="kv" key={key}>
                    <span className="muted">{key}</span>
                    <code>{value}</code>
                  </div>
                ))}
              </div>
              <div className="kv">
                <span className="muted">revision（目录 sha256）</span>
                <code className="break">{version.value.revision || '—'}</code>
              </div>
            </>
          ) : (
            <ErrorBox message={version.error ?? '无法获取契约版本'} onRetry={state.reload} />
          )}
        </div>
      </section>

      <section className="panel">
        <header className="panel-head">
          <h2>服务健康</h2>
          <span className="muted">GET /health</span>
        </header>
        <div className="panel-body">
          {health.ok && healthValue ? (
            <div className="kv-grid">
              <div className="kv">
                <span className="muted">status</span>
                <code>{healthValue.status}</code>
              </div>
              <div className="kv">
                <span className="muted">version</span>
                <code>{healthValue.version}</code>
              </div>
              <div className="kv">
                <span className="muted">uptime</span>
                <code>{Math.round(healthValue.uptimeSec ?? 0)} s</code>
              </div>
              <div className="kv">
                <span className="muted">database</span>
                <code>
                  {healthValue.database?.connected ? 'connected' : 'disconnected'}
                  {healthValue.database?.server ? ` · ${healthValue.database.server}` : ''}
                </code>
              </div>
              <div className="kv">
                <span className="muted">迁移待执行</span>
                <code>{healthValue.database?.migrationsPending ?? 0}</code>
              </div>
            </div>
          ) : (
            <ErrorBox message={health.error ?? '无法获取健康状态'} onRetry={state.reload} />
          )}
        </div>
      </section>

      <p className="muted small">最后刷新：{formatDateTime(new Date().toISOString())}</p>
    </div>
  );
}