import { Sparkles } from 'lucide-react';

import { useEffect } from 'react';

import { trackEvent } from '@/lib/analytics';
import { BYOK_TEASER_SHOWN } from '@/lib/event-catalog';

interface DraftOutputTeaserProps {
  siteId: number;
}

/**
 * ACT-002: Taste-before-commitment teaser shown before the BYOK setup CTA.
 * Renders a blurred illustrative AI draft excerpt so users understand what
 * they are unlocking before being asked to supply an OpenAI API key.
 */
export function DraftOutputTeaser({ siteId }: DraftOutputTeaserProps) {
  useEffect(() => {
    trackEvent(BYOK_TEASER_SHOWN, { source: 'wizard', site_id: String(siteId) });
    // intentional: fire once on mount
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <div className="rounded-md border bg-muted/30 p-3 mb-3" data-testid="draft-output-teaser">
      <p className="text-xs font-medium text-muted-foreground mb-2 flex items-center gap-1">
        <Sparkles className="h-3 w-3 shrink-0" aria-hidden="true" />
        Here is an example of what RankWiz generates for a page like yours
      </p>
      <div className="rounded border bg-background p-3 relative overflow-hidden">
        <p className="text-xs font-semibold text-foreground mb-1.5">
          How to Improve Your Blog&apos;s Search Rankings
        </p>
        <p
          className="text-xs text-muted-foreground leading-relaxed blur-[2px] select-none"
          aria-hidden="true"
        >
          Search engines prioritise content that directly answers user intent. To strengthen
          your ranking, begin by auditing your H2 structure and expanding the section covering
          on-page signals — your competitors average 1,240 words here versus your current 480.
          Adding three internal links to your keyword research guide will improve crawl depth
          and reinforce topical authority. Update the meta description to include the primary
          keyword within the first 60 characters, and consider adding an FAQ block to capture
          featured-snippet opportunities in the 8–12 position range.
        </p>
        {/* Fade gradient to suggest more content below */}
        <div
          className="absolute inset-x-0 bottom-0 h-8 bg-gradient-to-t from-muted/30 to-transparent pointer-events-none"
          aria-hidden="true"
        />
      </div>
    </div>
  );
}