import React from 'react'
import { usePage } from '@inertiajs/react'
import DocsCallout from '../../components/docs/DocsCallout'
import DocsComparisonTable from '../../components/docs/DocsComparisonTable'
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 {
  ADVANCED_MODULES,
  ARTWORK_GUIDANCE,
  BEST_PRACTICES,
  CARD_COLLECTION_GUIDANCE,
  COMMON_MISTAKES,
  DRAFT_STEPS,
  FAQ_ITEMS,
  HERO_METRICS,
  RELATED_HELP_ITEMS,
  SECTION_ITEMS,
  STUDIO_AREAS,
  STUDIO_COMPARISON_COLUMNS,
  STUDIO_COMPARISON_ROWS,
  TROUBLESHOOTING_ITEMS,
} from './studioHelpContent'

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 AreaCard({ item, links }) {
  const actions = [
    { label: 'Open Studio', href: links.open_studio },
    { label: 'View content dashboard', href: links.studio_content },
    { label: 'Open artworks', href: links.studio_artworks },
    { label: 'Open drafts', href: links.studio_drafts },
    { label: 'Open cards', href: links.studio_cards },
    { label: 'Open collections', href: links.studio_collections },
    { label: 'Open Group Studio', href: links.group_studio },
    { label: 'Read Groups help', href: links.groups_help },
    { label: 'Open settings', href: links.studio_settings },
    { label: 'Read Profile help', href: links.help_profile },
    { label: 'Help Center', href: links.help_home },
    { label: 'Report issue', href: links.report_issue },
  ]

  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>
      <div className="mt-4 flex flex-wrap gap-2">
        {item.links.map((label) => {
          const action = actions.find((candidate) => candidate.label === label)
          if (!action?.href) return null

          return (
            <a key={label} href={action.href} className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-2 text-sm font-semibold text-slate-200 transition hover:border-white/20 hover:bg-white/[0.07]">
              {label}
            </a>
          )
        })}
      </div>
    </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>
  )
}

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 StudioHelpPage() {
  const { props } = usePage()
  const links = props.links || {}
  const jsonLd = [
    {
      '@context': 'https://schema.org',
      '@type': 'Article',
      headline: 'Studio Help',
      description: props.description,
      url: props.seo?.canonical,
      author: {
        '@type': 'Organization',
        name: 'Skinbase',
      },
      about: ['Studio', 'Drafts', 'Publishing', 'Creator workflow', 'Group Studio'],
    },
    {
      '@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">Studio help</p>
              <h1 className="mt-3 max-w-4xl text-4xl font-semibold tracking-[-0.04em] text-white md:text-5xl xl:text-6xl">Studio is the creative control center of Skinbase.</h1>
              <p className="mt-5 max-w-3xl text-base leading-8 text-slate-300 md:text-lg">Use Studio to manage drafts, uploads, publishing, artworks, cards, collections, and collaborative work before and after it goes public. This page explains how Studio fits into the platform, how personal and Group contexts differ, and how to use the workspace without creating avoidable confusion.</p>
              <div className="mt-6 flex flex-wrap gap-3">
                <a href={links.open_studio} 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">Open Studio</a>
                <a href={links.upload_help} 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 Upload help</a>
                <a href={links.groups_help} 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]">Read Groups 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="Studio help sections" selectLabel="Jump to Studio help section" />

          <div className="space-y-6">
            <DocsSection
              id="what-is-studio"
              eyebrow="Foundations"
              title="What Studio is"
              summary="Studio is the private management workspace for creators. Public pages show published work. Studio is where you prepare, organize, edit, review, and manage that work before and after it reaches the public side of Skinbase."
            >
              <div className="grid gap-4 md:grid-cols-2">
                <div className="rounded-[28px] border border-white/10 bg-black/20 p-5">
                  <h3 className="text-lg font-semibold text-white">Studio is private</h3>
                  <p className="mt-3 text-sm leading-7 text-slate-300">Studio is not your public profile. It is the working area where creator actions happen, drafts live, and management choices are made.</p>
                </div>
                <div className="rounded-[28px] border border-white/10 bg-black/20 p-5">
                  <h3 className="text-lg font-semibold text-white">Public pages are the result</h3>
                  <p className="mt-3 text-sm leading-7 text-slate-300">The public side of Skinbase is what people see after you publish. Studio is where you shape that result intentionally.</p>
                </div>
              </div>

              <div className="mt-6">
                <DocsCallout tone="note" title="The simplest mental model">
                  Think of Studio as your control room. It is where unfinished work is prepared, published work is managed, and context-sensitive actions live.
                </DocsCallout>
              </div>
            </DocsSection>

            <DocsSection
              id="personal-vs-group"
              eyebrow="Context"
              title="Personal Studio vs Group Studio"
              summary="This is one of the most important parts of Studio. The active context changes ownership, available actions, and who is allowed to do what."
            >
              <DocsComparisonTable
                columns={STUDIO_COMPARISON_COLUMNS}
                rows={STUDIO_COMPARISON_ROWS}
                caption="Comparison between Personal Studio and Group Studio"
              />

              <div className="mt-6 grid gap-4 md:grid-cols-2">
                <DocsCallout tone="warning" title="Check context before publishing">
                  If you do not confirm whether you are in personal or Group Studio, it becomes much easier to publish under the wrong identity or lose track of where a draft belongs.
                </DocsCallout>
                <DocsCallout tone="tip" title="Why actions can disappear">
                  In Group Studio, actions may change based on role, permissions, approvals, or workflow stage. Missing actions are often a context or permission issue, not a bug.
                </DocsCallout>
              </div>
            </DocsSection>

            <DocsSection
              id="main-studio-areas"
              eyebrow="Workspace map"
              title="Main Studio areas"
              summary="Studio already includes a broad set of creator surfaces. You do not need to memorize every route, but it helps to understand the main areas and what each one is for."
            >
              <div className="grid gap-4 xl:grid-cols-2">
                {STUDIO_AREAS.map((item) => (
                  <AreaCard key={item.title} item={item} links={links} />
                ))}
              </div>
            </DocsSection>

            <DocsSection
              id="drafts-and-publishing"
              eyebrow="Workflow"
              title="Drafts and publishing"
              summary="Drafts are unfinished workspace items. Publishing is the moment work becomes public. Treat those as different stages with different responsibilities."
            >
              <DocsStepList items={DRAFT_STEPS} />

              <div className="mt-6">
                <DocsCallout tone="practice" title="Before you publish">
                  Review metadata, preview quality, contributor credit, and context every time. Publishing is fastest when those checks become a habit.
                </DocsCallout>
              </div>
            </DocsSection>

            <DocsSection
              id="managing-artworks"
              eyebrow="Content"
              title="Managing artworks"
              summary="Studio is where artwork workflows happen: upload, draft review, metadata cleanup, preview checks, updates, and final publishing decisions."
            >
              <BulletGrid items={ARTWORK_GUIDANCE} tone="emerald" />
            </DocsSection>

            <DocsSection
              id="cards-and-collections"
              eyebrow="Creative tools"
              title="Managing cards and collections"
              summary="Cards and collections are part of the creative management side of Studio. They are not only public-facing features; they also live inside the workspace where you build and organize them."
            >
              <div className="grid gap-4 md:grid-cols-2">
                {CARD_COLLECTION_GUIDANCE.map((item) => (
                  <div key={item.title} 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>
                  </div>
                ))}
              </div>
            </DocsSection>

            <DocsSection
              id="advanced-modules"
              eyebrow="Advanced workflows"
              title="Projects, releases, and other advanced modules"
              summary="As workflows become more collaborative or structured, Studio extends beyond simple drafts and publishes into richer operating surfaces."
            >
              <BulletGrid items={ADVANCED_MODULES} tone="amber" />

              <div className="mt-6">
                <DocsCallout tone="note" title="Use advanced modules when they solve a real need">
                  Projects, releases, challenges, events, assets, and review queues are powerful, but they work best when the team actually needs more structure rather than more complexity.
                </DocsCallout>
              </div>
            </DocsSection>

            <DocsSection
              id="best-practices"
              eyebrow="Habits"
              title="Best practices"
              summary="Good Studio habits reduce confusion, keep work organized, and make publishing smoother for both solo creators and teams."
            >
              <BulletGrid items={BEST_PRACTICES} tone="sky" />
            </DocsSection>

            <DocsSection
              id="common-mistakes"
              eyebrow="Avoid this"
              title="Common mistakes"
              summary="Most Studio confusion does not come from the existence of many tools. It comes from using the right tool in the wrong context or skipping basic review steps."
            >
              <BulletGrid items={COMMON_MISTAKES} tone="amber" />
            </DocsSection>

            <DocsSection
              id="faq"
              eyebrow="FAQ"
              title="Studio FAQ"
              summary="These fast answers cover the questions that come up most often when people are new to Studio or switching into collaborative workflows."
            >
              <DocsFaqAccordion items={FAQ_ITEMS} />
            </DocsSection>

            <DocsSection
              id="troubleshooting"
              eyebrow="Troubleshooting"
              title="Troubleshooting"
              summary="Use these shortcuts when Studio feels confusing, empty, or inconsistent. Most issues come down to context, filters, or permissions."
            >
              <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 Studio has answered the workflow question and you need to go deeper into the right part of the help system or product surface."
            >
              <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.open_studio} 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 Studio</a>
                  <a href={links.studio_drafts} 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 drafts</a>
                  <a href={links.group_studio} 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 Group Studio</a>
                  <a href={links.groups_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 Groups help</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 something feels missing, check context first. Personal Studio and Group Studio are connected, but they are not identical workspaces.</p>
              </div>
            </div>
          </aside>
        </div>
      </div>
    </main>
  )
}