import { ArrowRight } from 'lucide-react';

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

import type { SiteBasic } from '@/types';

import OnboardingWizard from './OnboardingWizard';

interface GscConnection {
  property_url: string;
  last_synced_at: string | null;
  status: string;
}

interface WpConnection {
  wp_url: string;
  setup_token?: string;
  status: string;
  plugin_version?: string;
  capabilities?: Record<string, boolean>;
  last_webhook_at?: string | null;
  last_sync_at?: string | null;
}

interface LatestRun {
  id: number;
  status: string;
  before_start: string | null;
  before_end: string | null;
  after_start: string | null;
  after_end: string | null;
  summary: {
    overall: {
      clicks_after: number;
      clicks_delta_pct: number;
      impressions_after: number;
      impressions_delta_pct: number;
      ctr_after: number;
      ctr_delta_pct: number;
      position_after: number;
      position_delta_pct: number;
    };
  } | null;
}

interface Props {
  site: SiteBasic & { is_demo: boolean };
  gsc_connection: (GscConnection & { sync_progress_pct?: number | null }) | null;
  wp_connection: WpConnection | null;
  gsc_data_range?: { earliest: string | null; latest: string | null; coverage_days?: number | null };
  latest_run?: LatestRun | null;
  winners_count?: number;
  losers_count?: number;
  recommendations_count?: number;
  referral_url?: string | null;
  product_overview_video_url?: string | null;
  /** ACT-003: demo mode is available for this site (no real GSC connection yet). */
  demo_data_available?: boolean;
  /** ACT-003: User role for persona-conditional messaging. Matches UserRole enum values. */
  user_role?: string | null;
  just_registered?: boolean;
}

export default function OnboardingIndex({
  site,
  gsc_connection: gscConnection,
  wp_connection: wpConnection,
  gsc_data_range: gscDataRange,
  latest_run: latestRun,
  winners_count: winnersCount,
  losers_count: losersCount,
  recommendations_count: recommendationsCount,
  referral_url: referralUrl,
  product_overview_video_url: productOverviewVideoUrl,
  demo_data_available: demoDataAvailable,
  user_role: userRole,
  just_registered: justRegistered = false,
}: Props) {
  const isSyncing = gscConnection?.status === 'syncing';
  const syncAnnouncement = isSyncing
    ? 'Syncing Google Search Console data…'
    : gscConnection?.status === 'synced'
      ? 'Google Search Console sync complete'
      : '';

  const showWelcomeBanner = justRegistered && gscConnection === null;

  return (
    <>
      <div aria-live="polite" aria-atomic="true" className="sr-only" id="status-announcer">
        {syncAnnouncement}
      </div>
      {showWelcomeBanner && (
        <div
          role="region"
          aria-label="Welcome — next step"
          className="mx-auto max-w-2xl px-4 pt-6"
        >
          <div className="flex items-center justify-between gap-4 rounded-lg border border-border bg-card px-5 py-4 shadow-sm">
            <div>
              <p className="text-sm font-semibold text-foreground">Find out why your traffic is dropping — and what to fix first.</p>
              <p className="mt-0.5 text-sm text-muted-foreground">
                Connect Google Search Console to get your first diagnosis in minutes.
              </p>
            </div>
            <Link
              href={route('gsc.connect', { site: site.id })}
              className="inline-flex shrink-0 items-center gap-1.5 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
            >
              Connect Google Search Console — takes 30 seconds
              <ArrowRight className="h-4 w-4" aria-hidden="true" />
            </Link>
          </div>
        </div>
      )}
      <OnboardingWizard
        site={site}
        gscConnection={gscConnection}
        wpConnection={wpConnection}
        gscDataRange={gscDataRange}
        latestRun={latestRun}
        winnersCount={winnersCount}
        losersCount={losersCount}
        recommendationsCount={recommendationsCount}
        referralUrl={referralUrl}
        productOverviewVideoUrl={productOverviewVideoUrl}
        demoDataAvailable={demoDataAvailable}
        userRole={userRole}
      />
    </>
  );
}