/**
 * WelcomeDemoModal — lazy iframe video dialog + sticky CTA bar (DEBT-005 extraction).
 *
 * Groups the two portal-level overlays from Welcome.tsx:
 *   - Demo video modal (focus-trapped, Escape closes)
 *   - Sticky bottom CTA bar (visible after 60% scroll depth)
 *
 * Extracted verbatim (Wave-2 content preserved, move not rewrite).
 */
import { ArrowRight, X } from 'lucide-react';

import { type RefObject } from 'react';

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

import { Button } from '@/Components/ui/button';
import { CTA_LABELS } from '@/config/cta-labels';
import { trackEvent } from '@/lib/analytics';
import { CTA_CLICKED, VIDEO_PLAYED } from '@/lib/event-catalog';
import { LAYER_STICKY_CTA } from '@/lib/overlay-layers';

export interface WelcomeDemoModalProps {
  isDemoModalOpen: boolean;
  demoVideoUrl: string | undefined;
  // useRef<HTMLDivElement | null> produces RefObject<HTMLDivElement | null> in React 18
  demoModalRef: RefObject<HTMLDivElement | null>;
  onClose: () => void;
}

export function WelcomeDemoModal({
  isDemoModalOpen,
  demoVideoUrl,
  demoModalRef,
  onClose,
}: WelcomeDemoModalProps) {
  if (!isDemoModalOpen || !demoVideoUrl) return null;

  return (
    <div
      ref={demoModalRef as RefObject<HTMLDivElement>}
      role="dialog"
      aria-modal="true"
      aria-label="Product demo video"
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/75 p-0 sm:p-6"
      onClick={() => {
        onClose();
        trackEvent(VIDEO_PLAYED, { action: 'dismissed', cta_location: 'hero' });
      }}
    >
      {/* Mobile: auto-shrinks to 16:9 aspect ratio. (F-MOB-11) */}
      <div
        className="relative w-full sm:h-auto sm:max-w-3xl sm:rounded-lg overflow-hidden bg-black"
        onClick={(e) => e.stopPropagation()}
      >
        <button
          type="button"
          // bg-white/15 + ring = visible touch boundary on bg-black frame. (F-DM-15)
          // .touch-target expands to 44×44 on coarse pointers. (F-A11Y-08)
          className="touch-target absolute top-3 right-3 z-10 flex size-8 items-center justify-center rounded-full bg-white/15 text-white ring-1 ring-white/30 backdrop-blur-sm transition-colors hover:bg-white/25"
          onClick={() => {
            onClose();
            trackEvent(VIDEO_PLAYED, { action: 'dismissed', cta_location: 'hero' });
          }}
          aria-label="Close demo video"
        >
          <X className="size-4" aria-hidden="true" />
        </button>
        <div className="relative w-full" style={{ paddingBottom: '56.25%' }}>
          <iframe
            className="absolute inset-0 h-full w-full"
            src={demoVideoUrl}
            title="RankWizAI 90-second product demo"
            allow="autoplay; fullscreen; picture-in-picture"
            allowFullScreen
            onLoad={() => trackEvent(VIDEO_PLAYED, { action: 'loaded', cta_location: 'hero' })}
          />
        </div>
      </div>
    </div>
  );
}

export interface WelcomeStickyCTAProps {
  show: boolean;
  onDismiss: () => void;
}

export function WelcomeStickyCTA({ show, onDismiss }: WelcomeStickyCTAProps) {
  if (!show) return null;

  return (
    <div
      style={{ zIndex: LAYER_STICKY_CTA }}
      className="fixed bottom-0 left-0 right-0 border-t bg-background/95 backdrop-blur-sm shadow-lg"
      role="complementary"
      aria-label="Get started prompt"
    >
      <div className="container flex items-center justify-between gap-4 py-3">
        <p className="text-sm font-medium text-foreground hidden sm:block">
          Ready to turn your Search Console data into results?
        </p>
        <div className="flex items-center gap-3 ml-auto">
          <Button size="sm" asChild>
            <Link
              href={route('register')}
              onClick={() =>
                trackEvent(CTA_CLICKED, {
                  cta_text: CTA_LABELS.FREE_NO_CARD,
                  cta_location: 'sticky_bottom',
                  page: 'homepage',
                })
              }
            >
              {CTA_LABELS.FREE_NO_CARD}
              <ArrowRight className="ml-1.5 size-3.5" aria-hidden="true" />
            </Link>
          </Button>
          <button
            type="button"
            // 44×44 hit area on coarse pointers (WCAG 2.5.5/2.5.8). (F-A11Y-10)
            className="flex h-11 w-11 items-center justify-center text-muted-foreground hover:text-foreground transition-colors"
            onClick={onDismiss}
            aria-label="Dismiss get-started prompt"
          >
            <X className="size-4" aria-hidden="true" />
          </button>
        </div>
      </div>
    </div>
  );
}