'use client';

import React from 'react';

type ShimmerProps = {
  className?: string;
};

/** Base shimmer bar — use for custom layouts */
export function Shimmer({ className = '' }: ShimmerProps) {
  return <div className={`shimmer-block rounded-lg ${className}`} aria-hidden />;
}

export function ShimmerText({ className = 'h-3 w-24' }: ShimmerProps) {
  return <Shimmer className={className} />;
}

export function ShimmerAvatar({ className = 'h-12 w-12 rounded-full' }: ShimmerProps) {
  return <Shimmer className={className} />;
}

/** Full-page / section loader for admin tables */
export function ShimmerTable({ rows = 6, cols = 5 }: { rows?: number; cols?: number }) {
  return (
    <div className="animate-in space-y-3 p-4" role="status" aria-label="Loading">
      <div className="flex gap-3">
        {Array.from({ length: cols }).map((_, i) => (
          <Shimmer key={i} className="h-3 flex-1" />
        ))}
      </div>
      {Array.from({ length: rows }).map((_, r) => (
        <div key={r} className="flex gap-3">
          {Array.from({ length: cols }).map((_, c) => (
            <Shimmer key={c} className={`h-9 flex-1 ${c === 0 ? 'max-w-[28%]' : ''}`} />
          ))}
        </div>
      ))}
      <span className="sr-only">Loading…</span>
    </div>
  );
}

/** Card grid shimmer (analytics / stats) */
export function ShimmerCards({ count = 4 }: { count?: number }) {
  return (
    <div className="grid grid-cols-2 gap-3 md:grid-cols-4" role="status" aria-label="Loading">
      {Array.from({ length: count }).map((_, i) => (
        <div key={i} className="rounded-2xl border border-zinc-800 bg-zinc-900/50 p-4 space-y-3">
          <Shimmer className="h-3 w-16" />
          <Shimmer className="h-7 w-24" />
          <Shimmer className="h-2 w-full" />
        </div>
      ))}
      <span className="sr-only">Loading…</span>
    </div>
  );
}

/** Profile header shimmer */
export function ShimmerProfile() {
  return (
    <div className="space-y-6" role="status" aria-label="Loading profile">
      <div className="flex items-start gap-4 rounded-2xl border border-zinc-800 bg-zinc-900/60 p-5">
        <ShimmerAvatar className="h-16 w-16 rounded-2xl" />
        <div className="flex-1 space-y-3">
          <Shimmer className="h-6 w-48" />
          <Shimmer className="h-3 w-32" />
          <div className="flex gap-2">
            <Shimmer className="h-6 w-20 rounded-full" />
            <Shimmer className="h-6 w-20 rounded-full" />
          </div>
        </div>
      </div>
      <ShimmerCards count={4} />
      <div className="rounded-2xl border border-zinc-800 bg-zinc-900/50 p-4">
        <ShimmerTable rows={5} cols={4} />
      </div>
      <span className="sr-only">Loading profile…</span>
    </div>
  );
}

/** Compact spinner for in-button / inline actions */
export function Spinner({ className = 'h-4 w-4' }: ShimmerProps) {
  return (
    <span
      className={`inline-block animate-spin rounded-full border-2 border-current border-r-transparent ${className}`}
      role="status"
      aria-label="Loading"
    />
  );
}