import { A, useParams } from '@solidjs/router';
import { Show, For, createSignal, createResource, onCleanup, onMount } from 'solid-js';
import { fetchArticleBySlug } from '~/lib/help-center';
import PublicBackground from '~/components/PublicBackground';
import PublicHeader from '~/components/PublicHeader';
import PublicFooter from '~/components/PublicFooter';

function categoryTitle(input: string) {
  return input
    .split('-')
    .filter(Boolean)
    .map((chunk) => chunk[0].toUpperCase() + chunk.slice(1))
    .join(' ');
}

export default function HelpCenterArticlePage() {
  const params = useParams();
  const [scrollY, setScrollY] = createSignal(0);

  const [article] = createResource(() => params.slug, fetchArticleBySlug);

  onMount(() => {
    const onScroll = () => setScrollY(window.scrollY || 0);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    onCleanup(() => window.removeEventListener('scroll', onScroll));
  });

  return (
    <main class="lp-main">
      <PublicBackground scrollY={scrollY()} />
      <div class="lp-content">
        <PublicHeader />

        <Show when={article.loading}>
          <section class="public-section scene-dark">
            <div class="container panel panel-light" style={{ 'max-width': '960px' }}>
              <p style="color:#94a3b8;padding:40px 0;text-align:center">Loading article…</p>
            </div>
          </section>
        </Show>

        <Show when={!article.loading && !article()}>
          <section class="public-section scene-dark">
            <div class="container panel panel-light">
              <h1 class="title">Article not found</h1>
              <p class="subtitle">The requested Help Center article is unavailable.</p>
              <div class="actions">
                <A class="btn primary" href="/help-center">Back to Help Center</A>
              </div>
            </div>
          </section>
        </Show>

        <Show when={!article.loading && article()}>
          {(a) => (
            <>
              <section class="public-section scene-dark">
                <div class="container panel panel-light" style={{ 'max-width': '960px' }}>
                  <p class="eyebrow">{a().category || categoryTitle(a().categoryKey)}</p>
                  <h1 class="title">{a().title}</h1>
                  <p class="subtitle">{a().summary}</p>

                  <Show when={a().tags.length > 0}>
                    <div class="help-article-tags" style={{ 'margin-top': '10px' }}>
                      <For each={a().tags}>{(tag) => <span class="help-article-tag">{tag}</span>}</For>
                    </div>
                  </Show>

                  <p class="note">Updated {new Date(a().updatedAt).toLocaleDateString()}</p>

                  <div class="help-article-body">
                    <For each={a().content.split('\n\n').filter(Boolean)}>
                      {(para) => <p>{para}</p>}
                    </For>
                  </div>

                  <div class="actions">
                    <A class="btn" href="/help-center">Back to Help Center</A>
                    <A class="btn primary" href="/auth/register">Get Started</A>
                  </div>
                </div>
              </section>

              <section class="public-section scene-dark">
                <div class="container panel panel-light" style={{ 'max-width': '960px' }}>
                  <h2>Need more help?</h2>
                  <p class="sub">
                    If this article does not solve your issue, send your question with context to support.
                  </p>
                  <div class="actions">
                    <a class="btn primary" href="mailto:support@nxtgauge.com?subject=Nxtgauge%20Help%20Center%20Question">
                      Email support
                    </a>
                    <A class="btn" href="/help-center">Browse more articles</A>
                  </div>
                </div>
              </section>
            </>
          )}
        </Show>

        <PublicFooter />
      </div>
    </main>
  );
}