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 QuickstartNextSteps from '../../components/docs/QuickstartNextSteps'
import SeoHead from '../../components/seo/SeoHead'
import {
  ACCOUNT_ACCESS_ITEMS,
  FAQ_ITEMS,
  FIRST_CHECKS,
  HERO_METRICS,
  PROFILE_SETTINGS_ITEMS,
  PUBLISHING_CONTEXT_ITEMS,
  RELATED_HELP_ITEMS,
  REPORTING_ITEMS,
  SECTION_ITEMS,
} from './troubleshootingHelpContent'

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 TroubleshootingHelpPage() {
  const { props } = usePage()
  const links = props.links || {}
  const signedIn = Boolean(props.auth?.signed_in)

  const jsonLd = [
    {
      '@context': 'https://schema.org',
      '@type': 'Article',
      headline: 'Troubleshooting Help',
      description: props.description,
      url: props.seo?.canonical,
      author: {
        '@type': 'Organization',
        name: 'Skinbase',
      },
      about: ['Troubleshooting', 'Account access', 'Permissions', 'Publishing blockers', 'Support'],
    },
    {
      '@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(244,114,182,0.12),_transparent_20%),radial-gradient(circle_at_bottom_right,_rgba(56,189,248,0.16),_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(244,114,182,0.12),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-rose-200/80">Troubleshooting help</p>
              <h1 className="mt-3 max-w-4xl text-4xl font-semibold tracking-[-0.04em] text-white md:text-5xl xl:text-6xl">When something feels broken, the fastest fix usually starts with diagnosing the right kind of problem.</h1>
              <p className="mt-5 max-w-3xl text-base leading-8 text-slate-300 md:text-lg">Use this page when you need shorter, support-oriented guidance for account entry issues, context confusion, publishing blockers, incomplete setup, permissions problems, or the point where a clean bug report becomes the right move.</p>
              <div className="mt-6 flex flex-wrap gap-3">
                <a href={signedIn ? links.open_studio : links.login} className="rounded-full border border-rose-300/25 bg-rose-300/12 px-5 py-3 text-sm font-semibold text-rose-100 transition hover:border-rose-300/40 hover:bg-rose-300/18">{signedIn ? 'Open Studio' : '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.report_issue} 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]">Report a problem</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="Troubleshooting help sections" selectLabel="Jump to troubleshooting section" />

          <div className="space-y-6">
            <DocsSection
              id="first-checks"
              eyebrow="Start here"
              title="First checks before you spiral"
              summary="Troubleshooting works better when you slow the situation down, label the failure clearly, and rule out the most common context mistakes first."
            >
              <BulletGrid items={FIRST_CHECKS} tone="sky" />

              <div className="mt-6 grid gap-4 md:grid-cols-2">
                <DocsCallout tone="note" title="A useful troubleshooting split">
                  Ask whether the issue is about access, permissions, settings, or a truly broken route. Those categories lead to very different fixes.
                </DocsCallout>
                <DocsCallout tone="warning" title="Do not skip straight to bug reports">
                  Many urgent-feeling problems resolve much faster once you confirm the right account, inbox, route, or Group context.
                </DocsCallout>
              </div>
            </DocsSection>

            <DocsSection
              id="account-access"
              eyebrow="Access"
              title="Account access and recovery issues"
              summary="If you cannot enter the account consistently, or can only reach part of the platform, start here before diagnosing deeper creator workflow surfaces."
            >
              <div className="grid gap-4 xl:grid-cols-3">
                {ACCOUNT_ACCESS_ITEMS.map((item) => (
                  <InsightCard key={item.title} item={item} />
                ))}
              </div>
            </DocsSection>

            <DocsSection
              id="publishing-and-context"
              eyebrow="Workflow"
              title="Publishing and context problems"
              summary="When uploads, Studio, or publishing actions feel blocked, the root cause is often context or permissions rather than a total platform failure."
            >
              <div className="grid gap-4 xl:grid-cols-3">
                {PUBLISHING_CONTEXT_ITEMS.map((item) => (
                  <InsightCard key={item.title} item={item} />
                ))}
              </div>
            </DocsSection>

            <DocsSection
              id="profile-and-settings"
              eyebrow="Settings"
              title="Profile and account-settings confusion"
              summary="Some problems feel technical when they are really profile maintenance, settings drift, or identity confusion that belongs in a guide instead of a support ticket."
            >
              <div className="grid gap-4 xl:grid-cols-3">
                {PROFILE_SETTINGS_ITEMS.map((item) => (
                  <InsightCard key={item.title} item={item} />
                ))}
              </div>
            </DocsSection>

            <DocsSection
              id="when-to-report"
              eyebrow="Escalation"
              title="When to contact support or report a bug"
              summary="Escalation works best when the problem is already described clearly enough that another person can follow it without guessing."
            >
              <BulletGrid items={REPORTING_ITEMS} tone="amber" />
            </DocsSection>

            <DocsSection
              id="faq"
              eyebrow="FAQ"
              title="Troubleshooting FAQ"
              summary="These are the fast answers for the moment when a problem exists, but the category of the problem still feels uncertain."
            >
              <DocsFaqAccordion items={FAQ_ITEMS} />
            </DocsSection>

            <DocsSection
              id="related-help"
              eyebrow="Next steps"
              title="Related help"
              summary="Use these routes when the diagnosis points toward access recovery, account settings, publishing workflows, or role-based collaboration guidance."
            >
              <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-rose-200/80">Quick route map</p>
                <div className="mt-4 space-y-2">
                  <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_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.upload_help} 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 Upload help</a>
                  <a href={links.groups_faq} 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 Groups FAQ</a>
                  <a href={links.report_issue} 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]">Report a problem</a>
                </div>
              </div>

              <div className="rounded-[24px] border border-rose-300/20 bg-rose-400/10 p-4 text-rose-50">
                <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-rose-100/80">Fast reminder</div>
                <p className="mt-2 text-sm leading-6 text-rose-50/85">A clear problem statement beats frantic guessing. Name the route, the context, and what changed before you decide the product is broken.</p>
              </div>
            </div>
          </aside>
        </div>
      </div>
    </main>
  )
}