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 {
  BEST_PRACTICES,
  COMMON_MISTAKES,
  CREDIT_BULLETS,
  CREDIT_EXAMPLE,
  DRAFT_FLOW_ITEMS,
  FAQ_ITEMS,
  FILE_METADATA_ITEMS,
  HERO_METRICS,
  PREP_ITEMS,
  PUBLISH_FLOW_ITEMS,
  RELATED_HELP_ITEMS,
  SECTION_ITEMS,
  TROUBLESHOOTING_ITEMS,
  UPLOAD_COMPARISON_COLUMNS,
  UPLOAD_COMPARISON_ROWS,
  WORKFLOW_STEPS,
} from './uploadHelpContent'

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 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 UploadHelpPage() {
  const { props } = usePage()
  const links = props.links || {}

  const jsonLd = [
    {
      '@context': 'https://schema.org',
      '@type': 'Article',
      headline: 'Upload Help',
      description: props.description,
      url: props.seo?.canonical,
      author: {
        '@type': 'Organization',
        name: 'Skinbase',
      },
      about: ['Upload workflow', 'Drafts', 'Publishing', 'Contributor credit', 'Group uploads'],
    },
    {
      '@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">Upload help</p>
              <h1 className="mt-3 max-w-4xl text-4xl font-semibold tracking-[-0.04em] text-white md:text-5xl xl:text-6xl">Uploading on Skinbase is a guided workflow, not just a raw file submission.</h1>
              <p className="mt-5 max-w-3xl text-base leading-8 text-slate-300 md:text-lg">This page explains how uploads move from file submission to draft, review, and final publish. It is designed to help you upload confidently, prepare the right details in advance, avoid common context mistakes, and understand what to do when something feels stuck.</p>
              <div className="mt-6 flex flex-wrap gap-3">
                <a href={links.upload} 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">Start an upload</a>
                <a href={links.studio_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 Studio 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="Upload help sections" selectLabel="Jump to Upload help section" />

          <div className="space-y-6">
            <DocsSection
              id="how-uploading-works"
              eyebrow="Workflow"
              title="How uploading works"
              summary="Uploading is designed to feel understandable and safe. The workflow gives you space to review and finish the public version before it goes live."
            >
              <DocsStepList items={WORKFLOW_STEPS} />

              <div className="mt-6">
                <DocsCallout tone="note" title="Why draft-first upload exists">
                  Drafts reduce rushed submissions. They give you a chance to review context, metadata, previews, and contributor credit before the upload becomes public.
                </DocsCallout>
              </div>
            </DocsSection>

            <DocsSection
              id="prepare-before-upload"
              eyebrow="Preparation"
              title="What to prepare before upload"
              summary="The better prepared you are before upload starts, the less likely you are to end up with an unfinished draft, weak presentation, or incorrect publishing context."
            >
              <BulletGrid items={PREP_ITEMS} tone="emerald" />
            </DocsSection>

            <DocsSection
              id="personal-vs-group"
              eyebrow="Context"
              title="Personal upload vs Group upload"
              summary="The most important upload decision is not just the file. It is whether the work should publish under your personal identity or under a Group."
            >
              <DocsComparisonTable
                columns={UPLOAD_COMPARISON_COLUMNS}
                rows={UPLOAD_COMPARISON_ROWS}
                caption="Comparison between Personal upload and Group upload"
              />

              <div className="mt-6 grid gap-4 md:grid-cols-2">
                <DocsCallout tone="warning" title="Always verify context before final publish">
                  The wrong context can turn a correct upload into the wrong public record. Check whether the work belongs to you or to a Group before the final step.
                </DocsCallout>
                <DocsCallout tone="tip" title="When in doubt, open Groups help">
                  If the upload involves shared ownership, contributor credit, or review queues, the Groups guide is the next best place to clarify how the upload should behave.
                </DocsCallout>
              </div>
            </DocsSection>

            <DocsSection
              id="draft-flow"
              eyebrow="Drafts"
              title="Draft flow"
              summary="Uploads usually begin as drafts so you can finish the details deliberately instead of publishing a half-finished item by accident."
            >
              <BulletGrid items={DRAFT_FLOW_ITEMS} tone="sky" />
            </DocsSection>

            <DocsSection
              id="publish-flow"
              eyebrow="Publish"
              title="Publish flow"
              summary="Publish is the final decision point. By the time you reach it, the file, context, metadata, and contributor details should already feel solid."
            >
              <BulletGrid items={PUBLISH_FLOW_ITEMS} tone="amber" />

              <div className="mt-6">
                <DocsCallout tone="practice" title="Treat final publish like a checklist moment">
                  If something still feels unclear, stop and review it before publishing. A short pause now is cheaper than cleaning up a public mistake later.
                </DocsCallout>
              </div>
            </DocsSection>

            <DocsSection
              id="file-preview-metadata"
              eyebrow="Presentation"
              title="File, preview, and metadata basics"
              summary="Strong uploads are not only about file quality. They also depend on how clearly the work is presented and how understandable it feels to other people."
            >
              <BulletGrid items={FILE_METADATA_ITEMS} tone="emerald" />
            </DocsSection>

            <DocsSection
              id="contributor-credit"
              eyebrow="Credit"
              title="Contributor credit during upload"
              summary="Upload identity, published identity, and authorship are related, but they are not always the same thing. That matters most in collaborative and Group uploads."
            >
              <div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_320px]">
                <div>
                  <BulletGrid items={CREDIT_BULLETS} tone="sky" />
                </div>
                <div className="rounded-[28px] border border-white/10 bg-black/20 p-5">
                  <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-sky-200/80">Simple example</p>
                  <div className="mt-4 space-y-3">
                    {CREDIT_EXAMPLE.map((entry) => (
                      <div key={entry.label} className="rounded-[20px] border border-white/10 bg-white/[0.03] p-3">
                        <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">{entry.label}</div>
                        <div className="mt-2 text-sm font-semibold text-white">{entry.value}</div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </DocsSection>

            <DocsSection
              id="best-practices"
              eyebrow="Best practices"
              title="Best practices"
              summary="The best upload habits are simple: prepare before you start, review before you publish, and keep the workspace clean enough that you can trust what you are looking at."
            >
              <BulletGrid items={BEST_PRACTICES} tone="emerald" />
            </DocsSection>

            <DocsSection
              id="common-mistakes"
              eyebrow="Avoid this"
              title="Common mistakes"
              summary="Most upload problems are not technical failures. They come from skipping review steps, using the wrong context, or leaving too many things unfinished at once."
            >
              <BulletGrid items={COMMON_MISTAKES} tone="amber" />
            </DocsSection>

            <DocsSection
              id="faq"
              eyebrow="FAQ"
              title="Upload FAQ"
              summary="These answers cover the most common questions people ask when an upload becomes a draft, stalls before publish, or behaves differently inside a Group."
            >
              <DocsFaqAccordion items={FAQ_ITEMS} />
            </DocsSection>

            <DocsSection
              id="troubleshooting"
              eyebrow="Troubleshooting"
              title="Troubleshooting"
              summary="Use these shortcuts when the upload workflow feels stalled, confusing, or inconsistent."
            >
              <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 the upload workflow is clear and you need the next layer of guidance around Studio, Groups, profile context, or adjacent creative tools."
            >
              <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.upload} 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]">Start upload</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.studio_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 Studio help</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 an upload feels wrong, check three things first: context, draft state, and contributor credit.</p>
              </div>
            </div>
          </aside>
        </div>
      </div>
    </main>
  )
}