import { useEffect, useState } from 'react'

/**
 * 브리프가 수치를 주지 않았다. SKILL.md 0단계 "가정은 소리 내서 말해라"에 따라
 * 지어내지 않고 placeholder 로 두고, design.md 에 미확정 항목으로 적는다.
 * 하드게이트 #11(사용자가 주지 않은 수치) 회피.
 */
const COPY = {
  headline: 'Add every host you want. You pay for checks.',
  sub: 'Pulsegate watches your endpoints from {{REGION_COUNT}} regions and pages you when latency drifts. No agents to install.',
  cta: 'Start the free trial',
  secondary: 'See how billing is calculated',
  command: 'npx pulsegate init',
  shotAlt:
    'Pulsegate 체크 목록 화면. 엔드포인트 이름, 최근 응답 시간, 상태가 표 형태로 정렬되어 있다.',
  shotCaption: 'checks/ — the only screen you need during an incident',
}

function useTheme() {
  const [theme, setTheme] = useState(null) // null = OS 설정을 따른다

  useEffect(() => {
    const root = document.documentElement
    if (theme === null) root.removeAttribute('data-theme')
    else root.setAttribute('data-theme', theme)
  }, [theme])

  const resolved =
    theme ??
    (window.matchMedia?.('(prefers-color-scheme: light)').matches ? 'light' : 'dark')

  return [resolved, () => setTheme(resolved === 'dark' ? 'light' : 'dark')]
}

function CopyCommand({ command }) {
  const [copied, setCopied] = useState(false)

  async function copy() {
    try {
      await navigator.clipboard.writeText(command)
      setCopied(true)
      setTimeout(() => setCopied(false), 1600)
    } catch {
      setCopied(false)
    }
  }

  return (
    <div className="install">
      <span className="install__prompt" aria-hidden="true">$</span>
      <code className="install__cmd">{command}</code>
      <button type="button" className="install__copy" onClick={copy}>
        {copied ? 'Copied' : 'Copy'}
      </button>
      {/* 상태 변화를 스크린리더에도 알린다 */}
      <span role="status" aria-live="polite" className="visually-hidden">
        {copied ? 'Command copied to clipboard' : ''}
      </span>
    </div>
  )
}

export default function Hero() {
  const [theme, toggleTheme] = useTheme()

  return (
    <div className="page">
      <nav className="nav" aria-label="Primary">
        <p className="nav__mark">Pulsegate</p>
        <a className="nav__link" href="#pricing">Pricing</a>
        <a className="nav__link" href="#docs">Docs</a>
        <button
          type="button"
          className="theme-toggle"
          onClick={toggleTheme}
          aria-pressed={theme === 'light'}
        >
          {theme === 'dark' ? 'Light' : 'Dark'}
        </button>
      </nav>

      <header className="hero">
        <div>
          <h1 className="hero__headline">{COPY.headline}</h1>
          <p className="hero__sub">{COPY.sub}</p>
          <div className="hero__actions">
            <a className="cta" href="#signup">{COPY.cta}</a>
            <a className="link-quiet" href="#pricing">{COPY.secondary}</a>
          </div>
        </div>

        <figure style={{ margin: 0 }}>
          <img
            className="shot"
            src="/product-checks.png"
            width="960"
            height="720"
            alt={COPY.shotAlt}
            loading="eager"
            decoding="async"
          />
          <figcaption className="shot-caption">{COPY.shotCaption}</figcaption>
        </figure>
      </header>

      <CopyCommand command={COPY.command} />
    </div>
  )
}
