import {
  getSuperTokensAuthRuntimeValidation,
  isGitHubOAuthEnabled,
  isGoogleOAuthEnabled,
  isOrcidOAuthEnabled,
} from '../../auth/supertokens-runtime'
import { HyperTwistButtonLink } from './HyperTwistButton'

type BrowserAuthMethodCard = {
  title: string
  description: string
  bullets: readonly string[]
}

function buildBrowserAuthMethodCards(): readonly BrowserAuthMethodCard[] {
  const cards: BrowserAuthMethodCard[] = [
    {
      title: 'Email and password',
      description:
        'This is the simplest way to create your HyperTwist account and unlock the dashboard, downloads, and desktop pairing tools.',
      bullets: [
        'Use it when you want the clearest route into your account, downloads, and first desktop launch.',
        'It opens the same dashboard and download tools as the optional provider buttons.',
        'It helps you reach the simulator; it does not replace the desktop app itself.',
      ],
    },
  ]

  if (isGitHubOAuthEnabled()) {
    cards.push({
      title: 'GitHub sign-in',
      description:
        'GitHub can be used as a faster sign-in route when this deployment has it enabled.',
      bullets: [
        'You still land in the same dashboard, downloads, and pairing tools.',
        'It uses the same account and entitlement checks as email and password.',
      ],
    })
  }

  if (isGoogleOAuthEnabled()) {
    cards.push({
      title: 'Google sign-in',
      description:
        'Google can be used for the same account and download flow when it is enabled on this deployment.',
      bullets: [
        'It opens the same dashboard, downloads, and account tools as the default sign-in.',
        'It does not change the boundary between the website and the desktop simulator.',
      ],
    })
  }

  if (isOrcidOAuthEnabled()) {
    cards.push({
      title: 'ORCID sign-in',
      description:
        'ORCID can be used here when research-oriented identity needs to flow into the same HyperTwist account experience.',
      bullets: [
        'It opens the same dashboard and download tools when the deployment has ORCID configured.',
        'It remains an account-access path only; the desktop simulator still does the training work.',
      ],
    })
  }

  return cards
}

export function BrowserAuthMethodsGuide() {
  const authRuntimeValidation = getSuperTokensAuthRuntimeValidation()
  const cards = buildBrowserAuthMethodCards()
  const diagnostics = [
    ...authRuntimeValidation.missing.map((item) => `Auth runtime setting pending: ${item}`),
    ...authRuntimeValidation.warnings,
  ]

  const statusLabel = authRuntimeValidation.ready
    ? (diagnostics.length === 0 ? 'Auth methods ready' : 'Auth methods mixed')
    : 'Auth methods bounded'

  const summary = authRuntimeValidation.ready
    ? (
      diagnostics.length === 0
        ? 'The sign-in options below all lead into the same HyperTwist account, download, and desktop-pairing experience.'
        : 'The sign-in options are available, but a few configuration warnings still remain in this deployment.'
    )
    : 'This deployment may still be running with a limited auth configuration, but the sign-in lineup below remains the intended account path.'

  return (
    <div>
      <article className="callout">
        <p className={`status-pill${authRuntimeValidation.ready && diagnostics.length === 0 ? ' status-pill--success' : ' status-pill--info'}`}>
          {statusLabel}
        </p>
        <p>{summary}</p>
        {diagnostics.length > 0 ? (
          <ul className="list top-gap">
            {diagnostics.map((item) => (
              <li key={item}>{item}</li>
            ))}
          </ul>
        ) : null}
      </article>
      <div className="card-grid top-gap">
        {cards.map((card) => (
          <article key={card.title} className="card">
            <h3>{card.title}</h3>
            <p>{card.description}</p>
            <ul className="list top-gap">
              {card.bullets.map((bullet) => (
                <li key={bullet}>{bullet}</li>
              ))}
            </ul>
          </article>
        ))}
      </div>
      <div className="button-row top-gap">
        <HyperTwistButtonLink to="/register?next=%2Fapp">
          Create account
        </HyperTwistButtonLink>
        <HyperTwistButtonLink tone="secondary" to="/login?next=%2Fapp">
          Log in
        </HyperTwistButtonLink>
      </div>
    </div>
  )
}
