/** Shimmer loading placeholders. */

interface SkeletonProps {
  width?: string;
  height?: string;
  rounded?: boolean;
  count?: number;
}

function SkeletonLine({ width = "100%", height = "12px", rounded }: SkeletonProps) {
  return (
    <div
      class="animate-pulse"
      style={{
        width,
        height,
        borderRadius: rounded ? "50%" : "6px",
        background: "linear-gradient(90deg, var(--z-card-bg) 25%, var(--z-border) 50%, var(--z-card-bg) 75%)",
        backgroundSize: "200% 100%",
        animation: "shimmer 1.5s infinite",
      }}
    />
  );
}

export function Skeleton({ count = 1, ...props }: SkeletonProps) {
  return (
    <div class="space-y-3">
      {Array.from({ length: count }).map((_, i) => (
        <SkeletonLine key={i} {...props} />
      ))}
    </div>
  );
}

/** Full-page loading skeleton for a list view. */
export function ListSkeleton() {
  return (
    <div class="space-y-3 py-4">
      <div class="flex items-center justify-between mb-6">
        <SkeletonLine width="120px" height="24px" />
        <SkeletonLine width="80px" height="32px" />
      </div>
      <SkeletonLine height="36px" />
      {[1, 2, 3, 4, 5].map((i) => (
        <div key={i} class="flex items-center gap-3 p-3">
          <SkeletonLine width="32px" height="32px" rounded />
          <div class="flex-1 space-y-2">
            <SkeletonLine width="60%" height="14px" />
            <SkeletonLine width="30%" height="10px" />
          </div>
          <SkeletonLine width="50px" height="20px" />
        </div>
      ))}
    </div>
  );
}

/** Splash screen shown during initial load. */
export function SplashScreen({ name, icon }: { name?: string; icon?: string | null }) {
  return (
    <div class="flex flex-col items-center justify-center min-h-screen gap-4">
      {icon ? (
        <span class="text-5xl">{icon}</span>
      ) : (
        <div
          class="w-14 h-14 rounded-xl flex items-center justify-center text-xl font-bold"
          style={{ background: "var(--z-accent-dim)", color: "var(--z-accent-light)" }}
        >
          {(name || "Z").charAt(0).toUpperCase()}
        </div>
      )}
      <div class="flex items-center gap-2">
        {name && <span class="text-sm font-semibold">{name}</span>}
      </div>
      <div class="flex gap-1 mt-2">
        {[0, 1, 2].map((i) => (
          <div
            key={i}
            class="w-1.5 h-1.5 rounded-full animate-pulse"
            style={{ background: "var(--z-accent)", animationDelay: `${i * 0.15}s` }}
          />
        ))}
      </div>
    </div>
  );
}
