import React from 'react';

const sidebarRows = Array.from({ length: 11 }, (_, index) => index);
const metricCards = Array.from({ length: 6 }, (_, index) => index);

export function PageLoadingFallback() {
  return (
    <div className="app-page-loading" aria-busy="true" aria-label="页面加载中">
      <section className="app-page-loading__panel">
        <div className="app-loading-line app-page-loading__title" />
        <div className="app-loading-line app-page-loading__toolbar" />
        <div className="app-page-loading__grid">
          {metricCards.map((item) => (
            <div className="app-page-loading__card" key={item}>
              <div className="app-loading-line app-page-loading__card-title" />
              <div className="app-loading-line app-page-loading__card-value" />
              <div className="app-loading-line app-page-loading__card-meta" />
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

export function AuthPageLoadingFallback() {
  return (
    <div className="auth-page-loading" aria-busy="true" aria-label="登录页加载中">
      <section className="auth-page-loading__card">
        <div className="app-loading-line auth-page-loading__title" />
        <div className="app-loading-line auth-page-loading__input" />
        <div className="app-loading-line auth-page-loading__input" />
        <div className="app-loading-line auth-page-loading__button" />
        <div className="app-loading-line auth-page-loading__meta" />
      </section>
    </div>
  );
}

export function AppShellSkeleton() {
  return (
    <div className="app-shell-loading" aria-busy="true" aria-label="页面加载中">
      <aside className="app-shell-loading__sidebar">
        <div className="app-shell-loading__brand">
          <div className="app-loading-dot" />
          <div className="app-loading-line app-shell-loading__brand-text" />
        </div>
        <div className="app-shell-loading__nav">
          {sidebarRows.map((item) => (
            <div className="app-shell-loading__nav-item" key={item}>
              <div className="app-loading-dot is-small" />
              <div className="app-loading-line" />
            </div>
          ))}
        </div>
        <div className="app-shell-loading__user">
          <div className="app-loading-dot" />
          <div className="app-loading-line" />
        </div>
      </aside>
      <main className="app-shell-loading__content">
        <PageLoadingFallback />
      </main>
    </div>
  );
}

export default PageLoadingFallback;