import React from 'react'
import { usePage } from '@inertiajs/react'
import DocsCallout from '../../components/docs/DocsCallout'
import DocsFaqAccordion from '../../components/docs/DocsFaqAccordion'
import DocsSection from '../../components/docs/DocsSection'
import DocsSidebarNav from '../../components/docs/DocsSidebarNav'
import DocsStepList from '../../components/docs/DocsStepList'
import QuickstartNextSteps from '../../components/docs/QuickstartNextSteps'
import SeoHead from '../../components/seo/SeoHead'
import {
  ACCESS_BASICS_ITEMS,
  COMMON_MISTAKES,
  FAQ_ITEMS,
  HERO_METRICS,
  LOGIN_STEPS,
  RECOVERY_STEPS,
  RELATED_HELP_ITEMS,
  SAFETY_ITEMS,
  SECTION_ITEMS,
  SIGNUP_STEPS,
  TROUBLESHOOTING_ITEMS,
} from './authHelpContent'

function HeroMetric({ label, value, note }) {
  return (
    <div className="rounded-[24px] border border-white/10 bg-black/20 p-4">
      <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">{label}</div>
      <div className="mt-2 text-lg font-semibold text-white">{value}</div>
      <p className="mt-2 text-sm leading-6 text-slate-400">{note}</p>
    </div>
  )
}

function BulletGrid({ items, tone = 'sky' }) {
  const dotColor = tone === 'amber' ? 'bg-amber-300' : tone === 'emerald' ? 'bg-emerald-300' : 'bg-sky-300'

  return (
    <div className="grid gap-3 md:grid-cols-2">
      {items.map((item) => (
        <div key={item} className="rounded-[24px] border border-white/10 bg-black/20 p-4">
          <div className="flex gap-3 text-sm leading-6 text-slate-300">
            <span className={`mt-2 h-2 w-2 shrink-0 rounded-full ${dotColor}`} />
            <span>{item}</span>
          </div>
        </div>
      ))}
    </div>
  )
}

function InsightCard({ item }) {
  return (
    <article className="rounded-[28px] border border-white/10 bg-black/20 p-5">
      <h3 className="text-lg font-semibold text-white">{item.title}</h3>
      <p className="mt-3 text-sm leading-7 text-slate-300">{item.body}</p>
    </article>
  )
}

function TroubleCard({ item, links }) {
  return (
    <a href={links[item.linkKey]} className="rounded-[28px] border border-white/10 bg-black/20 p-5 transition hover:border-white/20 hover:bg-white/[0.05]">
      <h3 className="text-lg font-semibold text-white">{item.title}</h3>
      <p className="mt-3 text-sm leading-7 text-slate-300">{item.body}</p>
      <div className="mt-4 flex items-center justify-between gap-3">
        <span className="text-sm font-semibold text-sky-200">{item.linkLabel}</span>
        <span className="text-slate-500">&rarr;</span>
      </div>
    </a>
  )
}

export default function AuthHelpPage() {
  const { props } = usePage()
  const links = props.links || {}
  const signedIn = Boolean(props.auth?.signed_in)

  const jsonLd = [
    {
      '@context': 'https://schema.org',
      '@type': 'Article',
      headline: 'Signup and Login Help',
      description: props.description,
      url: props.seo?.canonical,
      author: {
        '@type': 'Organization',
        name: 'Skinbase',
      },
      about: ['Signup', 'Login', 'Password recovery', 'Verification', 'Account access'],
    },
    {
      '@context': 'https://schema.org',
      '@type': 'FAQPage',
      mainEntity: FAQ_ITEMS.map((item) => ({
        '@type': 'Question',
        name: item.question,
        acceptedAnswer: {
          '@type': 'Answer',
          text: item.answer,
        },
      })),
    },
  ]

  const relatedHelpItems = RELATED_HELP_ITEMS.map((item) => ({
    ...item,
    href: links[item.linkKey],
  }))

  return (
    <main className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.18),_transparent_23%),radial-gradient(circle_at_bottom_right,_rgba(250,204,21,0.14),_transparent_22%),linear-gradient(180deg,_#020617_0%,_#030712_100%)] px-4 py-8 sm:px-6 lg:px-8">
      <SeoHead seo={props.seo || {}} title={props.title} description={props.description} jsonLd={jsonLd} />

      <div className="mx-auto max-w-[1500px]">
        <section id="introduction" className="rounded-[36px] border border-white/10 bg-[linear-gradient(135deg,rgba(15,23,42,0.92),rgba(15,23,42,0.72)),radial-gradient(circle_at_top_right,rgba(125,211,252,0.16),transparent_28%)] p-6 shadow-[0_30px_100px_rgba(2,6,23,0.35)] md:p-8 lg:p-10">
          <div className="grid gap-8 xl:grid-cols-[minmax(0,1fr)_360px]">
            <div>
              <p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-sky-200/80">Signup and login help</p>
              <h1 className="mt-3 max-w-4xl text-4xl font-semibold tracking-[-0.04em] text-white md:text-5xl xl:text-6xl">Account access should feel clear, fixable, and much less stressful than it often does.</h1>
              <p className="mt-5 max-w-3xl text-base leading-8 text-slate-300 md:text-lg">This page explains how signup, login, password recovery, and account verification basics work on Skinbase Nova so you can get into your account, recover it when needed, and separate true access problems from workflow or permission confusion.</p>
              <div className="mt-6 flex flex-wrap gap-3">
                <a href={signedIn ? links.open_studio : links.login} className="rounded-full border border-sky-300/25 bg-sky-300/12 px-5 py-3 text-sm font-semibold text-sky-100 transition hover:border-sky-300/40 hover:bg-sky-300/18">{signedIn ? 'Open Studio' : 'Open login'}</a>
                <a href={links.register} className="rounded-full border border-white/10 bg-white/[0.04] px-5 py-3 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/[0.07]">Create account</a>
                <a href={links.password_request} className="rounded-full border border-white/10 bg-black/20 px-5 py-3 text-sm font-semibold text-slate-200 transition hover:border-white/20 hover:bg-white/[0.05]">Reset password</a>
                <a href={links.help_account} className="rounded-full border border-white/10 bg-black/20 px-5 py-3 text-sm font-semibold text-slate-200 transition hover:border-white/20 hover:bg-white/[0.05]">Account settings help</a>
              </div>
            </div>

            <div className="grid gap-3 sm:grid-cols-3 xl:grid-cols-1">
              {HERO_METRICS.map((metric) => (
                <HeroMetric key={metric.label} label={metric.label} value={metric.value} note={metric.note} />
              ))}
            </div>
          </div>
        </section>

        <div className="mt-8 grid gap-6 lg:grid-cols-[240px_minmax(0,1fr)] xl:grid-cols-[240px_minmax(0,1fr)_280px]">
          <DocsSidebarNav sections={SECTION_ITEMS} ariaLabel="Signup and login help sections" selectLabel="Jump to auth help section" />

          <div className="space-y-6">
            <DocsSection
              id="creating-an-account"
              eyebrow="Signup"
              title="Creating an account"
              summary="Account creation should feel straightforward: start from signup, use the right email, finish the flow carefully, and complete any verification the account still needs afterward."
            >
              <DocsStepList items={SIGNUP_STEPS} />
            </DocsSection>

            <DocsSection
              id="logging-in"
              eyebrow="Login"
              title="Logging in"
              summary="Login is the return path into your Skinbase identity. When it works, it should bring you back into the account so you can continue with profile, Studio, and publishing work."
            >
              <DocsStepList items={LOGIN_STEPS} />

              <div className="mt-6">
                <DocsCallout tone="note" title="Where login leads afterward">
                  The important point is not only getting signed in. It is getting back to the authenticated parts of Skinbase that depend on account access, such as Studio and creator settings.
                </DocsCallout>
              </div>
            </DocsSection>

            <DocsSection
              id="password-reset-recovery"
              eyebrow="Recovery"
              title="Password reset / recovery"
              summary="If the password is missing or no longer reliable, recovery is the safer and faster route. This should feel like a reset process, not a panic moment."
            >
              <DocsStepList items={RECOVERY_STEPS} />

              <div className="mt-6 grid gap-4 md:grid-cols-2">
                <DocsCallout tone="tip" title="Check the right inbox first">
                  Reset confusion often comes from watching the wrong email account or ignoring spam and promotions folders.
                </DocsCallout>
                <DocsCallout tone="warning" title="Do not keep guessing forever">
                  If the password is unclear, move into recovery instead of burning time on repeated failed guesses that only make the situation feel worse.
                </DocsCallout>
              </div>
            </DocsSection>

            <DocsSection
              id="access-and-verification"
              eyebrow="Access basics"
              title="Account access and verification basics"
              summary="Being logged in, being verified, and having permission inside a specific workflow are related but not identical. Keeping those ideas separate reduces a lot of confusion."
            >
              <div className="grid gap-4 xl:grid-cols-3">
                {ACCESS_BASICS_ITEMS.map((item) => (
                  <InsightCard key={item.title} item={item} />
                ))}
              </div>
            </DocsSection>

            <DocsSection
              id="safety-and-protection"
              eyebrow="Safety"
              title="Safety and account protection"
              summary="Security guidance works best when it is simple enough to follow in real life. These habits protect access without turning basic account care into a technical lecture."
            >
              <BulletGrid items={SAFETY_ITEMS} tone="emerald" />
            </DocsSection>

            <DocsSection
              id="common-mistakes"
              eyebrow="Avoid this"
              title="Common mistakes"
              summary="Most auth confusion comes from small mismatches: the wrong email, the wrong inbox, the wrong assumption about what login should solve, or a permissions issue being mistaken for an account-access failure."
            >
              <BulletGrid items={COMMON_MISTAKES} tone="amber" />
            </DocsSection>

            <DocsSection
              id="faq"
              eyebrow="FAQ"
              title="Signup and login FAQ"
              summary="These are the fastest answers for the questions people most often ask when access is blocked, incomplete, or simply confusing."
            >
              <DocsFaqAccordion items={FAQ_ITEMS} />
            </DocsSection>

            <DocsSection
              id="troubleshooting"
              eyebrow="Troubleshooting"
              title="Troubleshooting"
              summary="Use these shortcuts when account access is failing, recovery feels unclear, or the problem may actually live in permissions and workflow rather than login itself."
            >
              <div className="grid gap-4 xl:grid-cols-2">
                {TROUBLESHOOTING_ITEMS.map((item) => (
                  <TroubleCard key={item.title} item={item} links={links} />
                ))}
              </div>
            </DocsSection>

            <DocsSection
              id="related-help"
              eyebrow="Next steps"
              title="Related help"
              summary="Use these links when account access is clear and the next question belongs to profile setup, creator workflows, Group permissions, or broader troubleshooting."
            >
              <QuickstartNextSteps items={relatedHelpItems} />
            </DocsSection>
          </div>

          <aside className="hidden xl:block xl:sticky xl:top-24 xl:self-start">
            <div className="space-y-4 rounded-[28px] border border-white/10 bg-white/[0.03] p-5 shadow-[0_18px_50px_rgba(2,6,23,0.22)]">
              <div>
                <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-sky-200/80">Quick route map</p>
                <div className="mt-4 space-y-2">
                  <a href={links.login} className="block rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/[0.05]">Open login</a>
                  <a href={links.register} className="block rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/[0.05]">Create account</a>
                  <a href={links.password_request} className="block rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/[0.05]">Reset password</a>
                  <a href={links.help_account} className="block rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/[0.05]">Read account settings help</a>
                  <a href={links.help_troubleshooting} className="block rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/[0.05]">Open troubleshooting hub</a>
                </div>
              </div>

              <div className="rounded-[24px] border border-amber-300/20 bg-amber-400/10 p-4 text-amber-50">
                <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-amber-100/80">Fast reminder</div>
                <p className="mt-2 text-sm leading-6 text-amber-50/85">If access breaks, check four things first: the email, the password, the inbox, and whether the problem is really permissions rather than login.</p>
              </div>
            </div>
          </aside>
        </div>
      </div>
    </main>
  )
}