import { Fragment } from 'react';
import { useQuery } from '@tanstack/react-query';
import { apiFetch, assetsUrl } from '../lib/api';
import { useHeadlessScan } from '../hooks/useHeadlessScan';
import type { ScannableUrl } from '../lib/types';

const FEATURES: { title: string; desc: string; variant: 'score' | 'severity' | 'passed' | 'ai' }[] = [
  {
    variant: 'score',
    title: 'Accessibility score',
    desc: 'Get a clear score to understand the accessibility status of each page.',
  },
  {
    variant: 'severity',
    title: 'Issues by severity',
    desc: 'See critical, serious, warning and notice issues that need attention.',
  },
  {
    variant: 'passed',
    title: 'Passed checks',
    desc: 'See what’s already working well, including the number of accessibility checks passed.',
  },
  {
    variant: 'ai',
    title: 'AI-powered fix suggestions',
    desc: 'Get practical, easy to follow recommendations to fix identified issues.',
  },
];

const STEPS = [
  { title: 'Scan',   desc: 'Choose a page and run an accessibility scan.' },
  { title: 'Review', desc: 'See the score, issues and recommendations.' },
  { title: 'Fix',    desc: 'Make the suggested changes and rescan.' },
];

function FeatureIcon({ variant }: { variant: 'score' | 'severity' | 'passed' | 'ai' }) {
  if (variant === 'score') {
    return <span className="aai-hero__feature-icon aai-hero__feature-icon--score">A</span>;
  }
  if (variant === 'severity') {
    return (
      <span className="aai-hero__feature-icon aai-hero__feature-icon--severity">
        <svg width="16" height="16" viewBox="0 0 20 20" fill="none"><path d="M10 3.5L18 16.5H2L10 3.5Z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/><path d="M10 8.5V11.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/><circle cx="10" cy="14" r="0.9" fill="currentColor"/></svg>
      </span>
    );
  }
  if (variant === 'passed') {
    return (
      <span className="aai-hero__feature-icon aai-hero__feature-icon--passed">
        <svg width="16" height="16" viewBox="0 0 20 20" fill="none"><rect x="3" y="2.5" width="14" height="15" rx="1.5" stroke="currentColor" strokeWidth="1.6"/><path d="M6.5 7H13.5M6.5 10H13.5M6.5 13H10.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>
      </span>
    );
  }
  return (
    <span className="aai-hero__feature-icon aai-hero__feature-icon--ai">
      <svg width="16" height="16" viewBox="0 0 20 20" fill="none"><path d="M10 2L11.6 7.4L17 9L11.6 10.6L10 16L8.4 10.6L3 9L8.4 7.4L10 2Z" fill="currentColor"/></svg>
    </span>
  );
}

export default function OnboardingHero() {
  const { scanning, startScan } = useHeadlessScan();

  const { data: urls = [] } = useQuery({
    queryKey: ['scannable-urls', ''],
    queryFn: () => apiFetch<ScannableUrl[]>('/scannable-urls'),
  });

  const homepage   = urls.find((u) => u.type === 'home');
  const isScanning = !!(homepage && scanning[homepage.url]);

  return (
    <div className="aai-hero">
      {/* ── Welcome banner ── */}
      <div className="aai-hero__card">
        <div className="aai-hero__copy">
          <span className="aai-hero__eyebrow">Welcome to AccessMate</span>
          <h1 className="aai-hero__title">Let&rsquo;s check your accessibility</h1>
          <p className="aai-hero__sub">
            Scan your pages for accessibility issues and get practical recommendations to make your website more inclusive.
          </p>
          <div className="aai-hero__actions">
            <button
              className="aai-btn aai-btn--primary aai-hero__cta"
              onClick={() => homepage && startScan(homepage.url)}
              disabled={!homepage || isScanning}
              aria-busy={isScanning}
            >
              {isScanning ? (
                <>
                  <span className="aai-spinner" aria-hidden="true" />
                  Scanning&hellip;
                </>
              ) : (
                <>Scan Homepage <span aria-hidden="true">&rarr;</span></>
              )}
            </button>
            <a
              className="aai-btn aai-btn--ghost"
              href="https://accessmate.ai/"
              target="_blank"
              rel="noopener noreferrer"
            >
              Learn more <span aria-hidden="true">&#8599;</span>
            </a>
          </div>
        </div>

        <div className="aai-hero__art" aria-hidden="true">
          <div className="aai-hero__mock">
            <div className="aai-hero__mock-dots"><span /><span /><span /></div>
            <div className="aai-hero__mock-img" />
            <div className="aai-hero__mock-line" />
            <div className="aai-hero__mock-line" />
            <div className="aai-hero__mock-line" style={{ width: '55%' }} />
          </div>
          <div className="aai-hero__glass">
            <img src={assetsUrl + 'accessmate-logomark-white.svg'} alt="" />
          </div>
        </div>
      </div>

      {/* ── Feature preview cards ── */}
      <div className="aai-hero__features">
        <h3 className="aai-hero__features-title">Your accessibility report will show you:</h3>
        <div className="aai-hero__feature-grid">
          {FEATURES.map((f) => (
            <div className="aai-hero__feature" key={f.title}>
              <FeatureIcon variant={f.variant} />
              <strong>{f.title}</strong>
              <p>{f.desc}</p>
            </div>
          ))}
        </div>
      </div>

      {/* ── How it works ── */}
      <div className="aai-hero__steps">
        <div className="aai-hero__steps-intro">
          <strong>How AccessMate works</strong>
          <p>In just 3 simple steps, you can scan, review and improve your website.</p>
        </div>
        <div className="aai-hero__steps-list">
          {STEPS.map((s, i) => (
            <Fragment key={s.title}>
              <div className="aai-hero__step">
                <span className="aai-hero__step-num">{i + 1}</span>
                <div>
                  <strong>{s.title}</strong>
                  <p>{s.desc}</p>
                </div>
              </div>
              {i < STEPS.length - 1 && (
                <span className="aai-hero__step-arrow" aria-hidden="true">&rarr;</span>
              )}
            </Fragment>
          ))}
        </div>
      </div>
    </div>
  );
}