/**
 * Teaching empty state for the AI Overview Click Recovery segment.
 *
 * Plan §5: "Three-state rigor" — a recovery segment with zero items needs a
 * clear "no AI-Overview erosion detected" empty state, not a blank panel.
 *
 * BHUNT-FLOW-01: Two distinct empty states, never conflated:
 *   - "warming_up" (warmingUp=true) — detection ran but the site has < 90 days of
 *     GSC history. AioRecoveryDetector literally could not compare windows. Show a
 *     "Still gathering data" early-signal state so users know this is temporary.
 *   - "all-clear"  (warmingUp=false) — detection ran, had sufficient history, and
 *     found nothing. Show the confident "Your ranking pages are holding their clicks."
 *
 * Empty-state contract (see plan §11.2):
 *   never-ran → AioRecovery runs the detection job; this component renders only after
 *   a completed run. The caller (AioRecoverySegment) checks items.length===0 to decide
 *   whether to render this state at all.
 */
import { Clock, ShieldCheck } from 'lucide-react';

import { memo } from 'react';

import { cn } from '@/lib/utils';

interface AioRecoveryEmptyStateProps {
  className?: string;
  /**
   * BHUNT-FLOW-01: When true, the site had insufficient GSC history for a valid AIO
   * comparison. Show early-signal copy instead of all-clear copy.
   */
  warmingUp?: boolean;
}

export const AioRecoveryEmptyState = memo(function AioRecoveryEmptyState({
  className,
  warmingUp = false,
}: AioRecoveryEmptyStateProps) {
  if (warmingUp) {
    return (
      <div
        className={cn(
          'flex flex-col items-center justify-center gap-3 rounded-lg border border-border bg-card px-6 py-8 text-center',
          className,
        )}
        data-testid="aio-recovery-warming-up-state"
        role="status"
      >
        <div className="flex size-10 items-center justify-center rounded-full bg-muted">
          <Clock className="size-5 text-muted-foreground" aria-hidden="true" />
        </div>
        <div className="space-y-1">
          <p className="text-sm font-semibold text-foreground">
            Still gathering data
          </p>
          <p className="text-sm text-muted-foreground max-w-xs">
            We need at least 90 days of search data to detect AI Overview erosion accurately.
            Check back once your site has been tracked for a few months.
          </p>
        </div>
      </div>
    );
  }

  return (
    <div
      className={cn(
        'flex flex-col items-center justify-center gap-3 rounded-lg border border-border bg-card px-6 py-8 text-center',
        className,
      )}
      data-testid="aio-recovery-empty-state"
      role="status"
    >
      <div className="flex size-10 items-center justify-center rounded-full bg-success-soft">
        <ShieldCheck className="size-5 text-success-strong" aria-hidden="true" />
      </div>
      <div className="space-y-1">
        <p className="text-sm font-semibold text-foreground">
          No AI Overview erosion detected
        </p>
        <p className="text-sm text-muted-foreground max-w-xs">
          Your ranking pages are holding their clicks. We check automatically after each
          analysis — you'll see affected pages here if an AI Overview starts intercepting
          your traffic.
        </p>
      </div>
    </div>
  );
});