/**
 * PayoffHero — UI-013 first-run payoff moment (DEBT-005 extraction).
 *
 * Rendered between BannerStack and Metrics when the user just ran their first
 * analysis and hasn't yet clicked through to their recommendations. Prominent
 * but dismissable. Shows count of pending fixes + CTA to the Action Queue.
 *
 * Displayed when:
 *   isActivated && !dismissed && firstSite && pendingRecommendations > 0
 */
import { CheckCircle2, Sparkles, X } from 'lucide-react';

import { Link } from '@inertiajs/react';

import { Button } from '@/Components/ui/button';
import { Eyebrow } from '@/Components/ui/eyebrow';

export interface PayoffHeroProps {
  firstSite: { id: string };
  pendingRecommendations: number;
  onDismiss: () => void;
}

export function PayoffHero({ firstSite, pendingRecommendations, onDismiss }: PayoffHeroProps) {
  return (
    <div
      className="mb-8 rounded-2xl border border-success-border bg-success-soft p-6 relative"
      data-testid="payoff-hero"
    >
      <button
        onClick={onDismiss}
        className="absolute top-4 right-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
        aria-label="Dismiss first analysis payoff"
      >
        <X className="size-4" />
      </button>
      <div className="flex items-start gap-4">
        <div className="flex size-10 shrink-0 items-center justify-center rounded-full bg-success/20">
          <Sparkles className="size-5 text-success-strong" aria-hidden="true" />
        </div>
        <div className="flex-1 min-w-0">
          <Eyebrow className="text-success-strong mb-1">First analysis complete</Eyebrow>
          <h2 className="text-xl font-semibold text-foreground">
            Your site has {pendingRecommendations} fix
            {pendingRecommendations !== 1 ? 'es' : ''} worth trying.
          </h2>
          <p className="mt-1 text-sm text-muted-foreground">
            Ranked by traffic impact — start with the top one and track what happens.
          </p>
          <div className="mt-4 flex flex-wrap items-center gap-3">
            <Button asChild>
              <Link
                href={route('opportunity-map.index', firstSite.id) + '?type=recommendation'}
                onClick={onDismiss}
              >
                <CheckCircle2 className="size-4" aria-hidden="true" />
                Review your top fixes
              </Link>
            </Button>
            <button
              type="button"
              onClick={onDismiss}
              className="text-sm text-muted-foreground hover:text-foreground underline underline-offset-2 focus:outline-none focus:ring-2 focus:ring-ring rounded-sm"
            >
              Dismiss
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}