"use client";

type LoadingStateProps = {
  /** Optional eyebrow text rendered above the skeleton (e.g. "Loading orders..."). */
  label?: string;
  /** Number of skeleton rows to show. Defaults to 3. */
  rows?: number;
  /** Extra class names appended to the wrapper. */
  className?: string;
};

/**
 * LoadingState — generic skeleton for admin list/card surfaces.
 *
 * Renders an optional centered "Loading…" eyebrow above `rows` skeleton
 * blocks, each composed of a label-sized bar and a value-sized bar. The
 * shimmer comes from the shared `.ha-skeleton` class in
 * `admin-design-system.css` so motion / reduced-motion stay consistent
 * with the rest of the admin shell.
 */
export default function LoadingState({
  label,
  rows = 3,
  className = "",
}: LoadingStateProps) {
  const safeRows = Math.max(1, Math.floor(rows));

  return (
    <div
      className={`flex flex-col items-stretch ${className}`.trim()}
      style={{ padding: "1.5rem 1rem" }}
      role="status"
      aria-live="polite"
      aria-busy="true"
    >
      {label && (
        <span
          className="ha-eyebrow mx-auto mb-4"
          aria-label={label}
        >
          {label}
        </span>
      )}

      <div className="space-y-3">
        {Array.from({ length: safeRows }).map((_, i) => (
          // Index is fine here — the list shape is stable per render.
          // eslint-disable-next-line react/no-array-index-key
          <SkeletonRow key={i} />
        ))}
      </div>
    </div>
  );
}

function SkeletonRow() {
  return (
    <div
      className="flex items-center gap-3 rounded-md border p-3"
      style={{
        backgroundColor: "var(--admin-card-bg)",
        borderColor: "var(--admin-border)",
      }}
    >
      {/* Icon-tile placeholder */}
      <span
        className="ha-skeleton block flex-shrink-0"
        style={{ width: "2.25rem", height: "2.25rem", borderRadius: "0.5rem" }}
      />
      {/* Label + value placeholders */}
      <div className="flex min-w-0 flex-1 flex-col gap-1.5">
        <span
          className="ha-skeleton block"
          style={{ width: "40%", height: "0.5rem", borderRadius: "0.25rem" }}
        />
        <span
          className="ha-skeleton block"
          style={{ width: "65%", height: "0.75rem", borderRadius: "0.25rem" }}
        />
      </div>
    </div>
  );
}
