import { __ } from '../lib/i18n';

type SkeletonProps = {
  className?: string;
};

function Bone({ className = '' }: SkeletonProps) {
  return (
    <div
      className={`animate-pulse rounded-md bg-gray-200/80 ${className}`}
      aria-hidden="true"
    />
  );
}

/** Chart-area placeholder for analytics pages. */
export function ChartSkeleton({ className = '' }: SkeletonProps) {
  return (
    <div className={`space-y-3 ${className}`} role="status" aria-label={__('Loading chart', 'llmagnet-llm-txt-generator')}>
      <Bone className="h-4 w-40" />
      <Bone className="h-64 w-full" />
    </div>
  );
}

/** Table rows placeholder. */
export function TableSkeleton({ rows = 6, className = '' }: SkeletonProps & { rows?: number }) {
  return (
    <div className={`space-y-2 ${className}`} role="status" aria-label={__('Loading table', 'llmagnet-llm-txt-generator')}>
      <Bone className="h-8 w-full" />
      {Array.from({ length: rows }).map((_, i) => (
        <Bone key={i} className="h-10 w-full" />
      ))}
    </div>
  );
}

/** Card grid placeholder (reports settings, overview cards). */
export function CardGridSkeleton({ count = 3, className = '' }: SkeletonProps & { count?: number }) {
  return (
    <div
      className={`grid gap-4 grid-cols-1 md:grid-cols-2 ${className}`}
      role="status"
      aria-label={__('Loading', 'llmagnet-llm-txt-generator')}
    >
      {Array.from({ length: count }).map((_, i) => (
        <div key={i} className="rounded-lg border border-gray-200 bg-white p-4 space-y-3">
          <Bone className="h-4 w-32" />
          <Bone className="h-8 w-full" />
          <Bone className="h-4 w-2/3" />
        </div>
      ))}
    </div>
  );
}

/** Bot analytics page skeleton — chart + summary table. */
export function BotAnalyticsSkeleton() {
  return (
    <div className="space-y-6 max-w-[1200px] mx-auto px-6 py-4">
      <ChartSkeleton />
      <TableSkeleton rows={5} />
    </div>
  );
}

/** Reports page initial settings skeleton. */
export function ReportsSettingsSkeleton() {
  return (
    <div className="space-y-6">
      <CardGridSkeleton count={2} />
      <Bone className="h-48 w-full" />
    </div>
  );
}