// Next.js automatically shows this while the page Server Component fetches data.
// No client JS — the skeleton is pure HTML + CSS animation.

const SKELETON_ROWS = 8;
const SKELETON_COLS = 7;

export default function Loading() {
  return (
    <div style={{ minHeight: "100vh", background: "var(--color-bg)" }}>
      {/* Skeleton header */}
      <header style={{
        position: "sticky",
        top: 0,
        zIndex: 20,
        background: "var(--color-bg)",
        borderBottom: "1px solid var(--color-border)",
      }}>
        <div style={{ padding: "12px 24px 10px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <div className="skeleton" style={{ width: 180, height: 22, borderRadius: 6 }} />
          <div className="skeleton" style={{ width: 120, height: 26, borderRadius: 20 }} />
        </div>
        <div style={{ padding: "8px 24px 10px", borderTop: "1px solid var(--color-border-subtle)", display: "flex", alignItems: "center", gap: 12 }}>
          <div className="skeleton" style={{ width: 32, height: 32, borderRadius: 6 }} />
          <div className="skeleton" style={{ width: 200, height: 20, borderRadius: 4 }} />
          <div className="skeleton" style={{ width: 32, height: 32, borderRadius: 6 }} />
        </div>
      </header>

      {/* Skeleton table — desktop */}
      <main style={{ padding: "0 24px 48px" }}>
        <div style={{ overflowX: "auto", marginTop: 0 }}>
          <table style={{ borderCollapse: "collapse", width: "100%", minWidth: 700, tableLayout: "fixed" }}>
            <colgroup>
              <col style={{ width: 240 }} />
              {Array.from({ length: SKELETON_COLS }).map((_, i) => (
                <col key={i} style={{ width: 130 }} />
              ))}
            </colgroup>

            {/* Column headers */}
            <thead>
              <tr>
                <th style={{ padding: "10px 14px", borderBottom: "1px solid var(--color-border)" }}>
                  <div className="skeleton" style={{ width: 40, height: 12, borderRadius: 3 }} />
                </th>
                {Array.from({ length: SKELETON_COLS }).map((_, i) => (
                  <th key={i} style={{ padding: "10px 8px", borderBottom: "1px solid var(--color-border)", borderLeft: "1px solid var(--color-border)", textAlign: "center" }}>
                    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 4 }}>
                      <div className="skeleton" style={{ width: 24, height: 10, borderRadius: 3 }} />
                      <div className="skeleton" style={{ width: 18, height: 18, borderRadius: 3 }} />
                    </div>
                  </th>
                ))}
              </tr>
            </thead>

            {/* Skeleton rows */}
            <tbody>
              {Array.from({ length: SKELETON_ROWS }).map((_, rowIdx) => (
                <tr key={rowIdx} style={{ background: rowIdx % 2 === 0 ? "var(--color-bg)" : "var(--color-surface)" }}>
                  <td style={{ padding: "10px 14px", borderBottom: "1px solid var(--color-border)", borderRight: "1px solid var(--color-border)" }}>
                    <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
                      <div className="skeleton" style={{ width: `${140 + (rowIdx % 3) * 20}px`, height: 13, borderRadius: 3 }} />
                      <div className="skeleton" style={{ width: 80, height: 10, borderRadius: 3 }} />
                    </div>
                  </td>
                  {Array.from({ length: SKELETON_COLS }).map((_, colIdx) => (
                    <td key={colIdx} style={{ padding: 4, borderBottom: "1px solid var(--color-border)", borderLeft: "1px solid var(--color-border)", height: 56 }}>
                      {(rowIdx + colIdx) % 3 === 0 && (
                        <div className="skeleton" style={{ width: "100%", height: "100%", borderRadius: 6 }} />
                      )}
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </main>
    </div>
  );
}