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 {
  COVERAGE_ITEMS,
  EMAIL_PASSWORD_STEPS,
  FAQ_ITEMS,
  HERO_METRICS,
  MAINTENANCE_HABITS,
  PROFILE_PREFERENCE_ITEMS,
  RELATED_HELP_ITEMS,
  SECTION_ITEMS,
  SETTINGS_AREA_ITEMS,
} from './accountHelpContent'

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 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 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>
  )
}

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

  const jsonLd = [
    {
      '@context': 'https://schema.org',
      '@type': 'Article',
      headline: 'Account Settings Help',
      description: props.description,
      url: props.seo?.canonical,
      author: {
        '@type': 'Organization',
        name: 'Skinbase',
      },
      about: ['Account settings', 'Profile settings', 'Password changes', 'Email changes', 'Preferences'],
    },
    {
      '@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.16),_transparent_22%),radial-gradient(circle_at_bottom_right,_rgba(34,197,94,0.12),_transparent_20%),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(74,222,128,0.14),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-emerald-200/80">Account settings 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 settings should feel like steady maintenance, not a maze you only visit when something is already on fire.</h1>
              <p className="mt-5 max-w-3xl text-base leading-8 text-slate-300 md:text-lg">Use this page when access already works and you need clearer guidance for profile settings, account details, email and password care, notifications, and the ongoing habits that keep the account easier to manage.</p>
              <div className="mt-6 flex flex-wrap gap-3">
                <a href={signedIn ? links.profile_settings : links.login} className="rounded-full border border-emerald-300/25 bg-emerald-300/12 px-5 py-3 text-sm font-semibold text-emerald-100 transition hover:border-emerald-300/40 hover:bg-emerald-300/18">{signedIn ? 'Open account settings' : 'Open login'}</a>
                <a href={links.help_auth} 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]">Read auth help</a>
                <a href={links.help_troubleshooting} 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]">Open troubleshooting</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="Account help sections" selectLabel="Jump to account help section" />

          <div className="space-y-6">
            <DocsSection
              id="what-account-help-covers"
              eyebrow="Scope"
              title="What account help covers"
              summary="Account help sits between pure access recovery and deeper module-specific workflow guides. It is for the practical middle ground where the account works, but the settings still need attention."
            >
              <div className="grid gap-4 xl:grid-cols-3">
                {COVERAGE_ITEMS.map((item) => (
                  <InsightCard key={item.title} item={item} />
                ))}
              </div>
            </DocsSection>

            <DocsSection
              id="settings-areas"
              eyebrow="Areas"
              title="The settings areas that matter most"
              summary="Most account questions fall into a few repeat categories. Naming the category first makes the right next step much easier to see."
            >
              <div className="grid gap-4 xl:grid-cols-2">
                {SETTINGS_AREA_ITEMS.map((item) => (
                  <InsightCard key={item.title} item={item} />
                ))}
              </div>

              <div className="mt-6">
                <DocsCallout tone="note" title="A useful way to think about settings">
                  Settings are not only administrative. They control recovery, trust, profile clarity, and how manageable the creator experience feels over time.
                </DocsCallout>
              </div>
            </DocsSection>

            <DocsSection
              id="email-and-password"
              eyebrow="Sensitive changes"
              title="Email and password changes"
              summary="Treat identity and security changes carefully. These are not hard tasks, but they are the least forgiving when rushed."
            >
              <DocsStepList items={EMAIL_PASSWORD_STEPS} />
            </DocsSection>

            <DocsSection
              id="profile-and-preferences"
              eyebrow="Daily use"
              title="Profile and preference maintenance"
              summary="The account feels healthier when profile details, notification choices, and other core preferences stay aligned with how you actually use the platform."
            >
              <BulletGrid items={PROFILE_PREFERENCE_ITEMS} tone="sky" />
            </DocsSection>

            <DocsSection
              id="maintenance-habits"
              eyebrow="Good habits"
              title="Maintenance habits that prevent bigger problems"
              summary="The easiest account problems to fix are the ones that never turn into a crisis because the basics stayed current."
            >
              <BulletGrid items={MAINTENANCE_HABITS} tone="emerald" />
            </DocsSection>

            <DocsSection
              id="faq"
              eyebrow="FAQ"
              title="Account settings FAQ"
              summary="These answers cover the common point where access is fine, but settings and maintenance still feel unclear."
            >
              <DocsFaqAccordion items={FAQ_ITEMS} />
            </DocsSection>

            <DocsSection
              id="related-help"
              eyebrow="Next steps"
              title="Related help"
              summary="Use these guides when the account question turns back into access recovery, identity presentation, faster troubleshooting, or broader creator workflow help."
            >
              <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-emerald-200/80">Quick route map</p>
                <div className="mt-4 space-y-2">
                  <a href={signedIn ? links.profile_settings : 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]">{signedIn ? 'Open account settings' : 'Open login'}</a>
                  <a href={links.help_auth} 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 auth help</a>
                  <a href={links.help_profile} 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 Profile 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</a>
                </div>
              </div>

              <div className="rounded-[24px] border border-emerald-300/20 bg-emerald-400/10 p-4 text-emerald-50">
                <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-emerald-100/80">Fast reminder</div>
                <p className="mt-2 text-sm leading-6 text-emerald-50/85">The healthiest account is the one with a current email, a manageable password, and settings reviewed before they become emergency work.</p>
              </div>
            </div>
          </aside>
        </div>
      </div>
    </main>
  )
}