import { ListChecks } from 'lucide-react';

interface RecommendationsPreviewSkeletonProps {
  /** The site's domain, interpolated into the honest preview copy. */
  domain: string;
}

/**
 * Non-interactive PREVIEW of the post-analysis recommendations hero, shown
 * ONLY while GSC sync is in progress.
 *
 * Activation rationale (see ACTIVATION_FUNNEL_*.md § Empty-state strategy):
 * the GSC sync wait is the analytics-product activation killer. A bare
 * progress bar "looks broken" to a technical user. Rendering a muted ghost of
 * the real payoff — "a prioritized list of pages losing traffic on <domain>"
 * — anchors the user on the value they're waiting for and reduces
 * GSC_SYNC_WAIT_ABANDONED.
 *
 * Honesty constraints (the persona is technical and distrusts fake data):
 *   - This is visibly a SKELETON. It renders placeholder bars, never invented
 *     recommendation text. We never fabricate specific findings.
 *   - It reuses the real hero's visual language (same card shape, same leading
 *     icon, same eyebrow → heading → subtext rhythm) so it reads as a true
 *     preview of the actual result, not a different component.
 *
 * Motion: the placeholder bars pulse to read as "loading", but the pulse is
 * gated behind `motion-reduce:animate-none` so users with
 * `prefers-reduced-motion` see a static skeleton.
 *
 * Purely presentational — no data fetch. Renders off the wizard's existing
 * `isSyncing` state.
 */
export function RecommendationsPreviewSkeleton({ domain }: RecommendationsPreviewSkeletonProps) {
  return (
    <div
      role="presentation"
      aria-hidden="true"
      data-testid="recs-preview-skeleton"
      className="rounded-lg border border-primary/30 bg-primary/5 p-5 opacity-70"
    >
      <div className="flex items-start gap-3">
        <ListChecks className="mt-1 size-5 shrink-0 text-primary/60" aria-hidden="true" />
        <div className="min-w-0 flex-1">
          <p className="text-xs uppercase tracking-wide text-muted-foreground">Preview</p>
          {/* The single honest, non-fabricated line of copy.
              Phrased as a "prioritized list of pages to look at" rather than
              "pages losing traffic" — the latter presupposes an outcome that
              may not hold for a healthy site, and the persona distrusts
              overstated claims. */}
          <p className="mt-1 text-sm text-muted-foreground">
            While we sync, here&apos;s what your results will look like — a prioritized list of the
            pages worth fixing first on{' '}
            <span className="font-data text-foreground/80">{domain}</span>.
          </p>

          {/* Skeleton rows: a ghost of the prioritized recommendation list.
              Placeholder bars ONLY — no fabricated recommendation text. */}
          <div className="mt-4 space-y-3">
            {[0, 1, 2].map((row) => (
              <div key={row} className="flex items-center gap-3">
                <div className="size-8 shrink-0 rounded-md bg-muted motion-safe:animate-pulse motion-reduce:animate-none" />
                <div className="min-w-0 flex-1 space-y-1.5">
                  <div className="h-2.5 w-3/4 rounded bg-muted motion-safe:animate-pulse motion-reduce:animate-none" />
                  <div className="h-2 w-1/2 rounded bg-muted/70 motion-safe:animate-pulse motion-reduce:animate-none" />
                </div>
                <div className="h-5 w-12 shrink-0 rounded-full bg-muted motion-safe:animate-pulse motion-reduce:animate-none" />
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}