import { ArrowRight, Star } from 'lucide-react';

import { BillingLink } from '@/Components/billing/BillingLink';
import { CTA_LABELS } from '@/config/cta-labels';
import { trackEvent } from '@/lib/analytics';
import { UPGRADE_PROMPT_CLICKED } from '@/lib/event-catalog';

interface OnboardingUpgradeCardProps {
  siteId: string;
  /**
   * Used to write headline copy: "Want to fix all N?" if positive,
   * generic "Try Pro free for 14 days." otherwise. Caller should pass 0 if
   * the count isn't known yet — but the wizard only renders this card after
   * analysis completes, so 0 means "healthy site" (which the wizard hides
   * the disclosure for anyway).
   */
  recommendationsCount: number;
}

/**
 * Single upgrade ask inside the post-analysis disclosure.
 *
 * Replaces the previous pair of upgrade cards (`OnboardingUpgradeCard` +
 * `ActivationCompleteUpgradeCard`) which fired on different conditions but
 * looked identical to the user — two "Start Free Trial" CTAs on the same
 * screen. The wizard now renders this once, gated on
 * `features.billing && !trial.active && !plan`.
 *
 * Uses the `Star` icon (premium semantics) rather than `Sparkles` —
 * Sparkles is reserved for AI-generated surfaces.
 */
export function OnboardingUpgradeCard({
  siteId,
  recommendationsCount,
}: OnboardingUpgradeCardProps) {
  return (
    <div className="rounded-lg border border-primary/30 bg-primary/5 p-4">
      <div className="flex items-start gap-3">
        <Star className="size-5 text-primary shrink-0 mt-0.5" aria-hidden="true" />
        <div className="flex-1 min-w-0">
          <p className="text-sm font-semibold text-foreground">
            {recommendationsCount > 0
              ? `Want to fix all ${recommendationsCount}?`
              : 'Try Pro free for 14 days.'}
          </p>
          <p className="text-xs text-muted-foreground mt-1">
            Pro closes the loop: generate drafts in bulk, publish to WordPress, and prove which
            fixes drove lift — with before-after ROI on every recommendation.
          </p>
          <div className="mt-3 rounded-md border border-border bg-muted/30 p-3 text-xs">
            <p className="mb-1 font-medium text-foreground">
              Example ROI report — illustrative numbers:
            </p>
            <div className="flex flex-wrap gap-x-4 gap-y-1 text-muted-foreground">
              <span>+93 clicks</span>
              <span>Position 6.2 → 4.1</span>
              <span>CTR up 1.8%</span>
            </div>
            <p className="mt-1 text-[11px] text-muted-foreground">
              Your actual report pulls the same metrics directly from GSC.
            </p>
          </div>
          <BillingLink
            params={{ plan: 'pro', source: 'onboarding_analysis_complete' }}
            className="inline-flex items-center gap-1.5 mt-3 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
            onClick={() =>
              trackEvent(UPGRADE_PROMPT_CLICKED, {
                surface: 'onboarding_wizard',
                source: 'onboarding_analysis_complete',
                site_id: String(siteId),
              })
            }
          >
            {CTA_LABELS.PRO_TRIAL}
            <ArrowRight className="size-3.5" aria-hidden="true" />
          </BillingLink>
        </div>
      </div>
    </div>
  );
}