import { A, useParams } from '@solidjs/router';
import { createSignal, onCleanup, onMount } from 'solid-js';
import { getArticleBySlug } 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 article = getArticleBySlug(params.slug || '');
  const [scrollY, setScrollY] = createSignal(0);

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

  if (!article) {
    return (
      <main class="lp-main">
        <PublicBackground scrollY={scrollY()} />
        <div class="lp-content">
          <PublicHeader />
          <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>
          <PublicFooter />
        </div>
      </main>
    );
  }

  return (
    <main class="lp-main">
      <PublicBackground scrollY={scrollY()} />
      <div class="lp-content">
        <PublicHeader />
        <section class="public-section scene-dark">
          <div class="container panel panel-light" style={{ 'max-width': '960px' }}>
            <p class="eyebrow">{categoryTitle(article.categoryKey)}</p>
            <h1 class="title">{article.title}</h1>
            <p class="subtitle">{article.summary}</p>

            <div class="help-article-tags" style={{ 'margin-top': '10px' }}>
              {article.tags.map((tag) => <span class="help-article-tag">{tag}</span>)}
            </div>
            <p class="note">Updated {new Date(article.updatedAt).toLocaleDateString()}</p>

            <div class="help-article-body">
              <p>{article.content}</p>
            </div>

            <div class="actions">
              <A class="btn" href="/help-center">Back to Help Center</A>
              <A class="btn primary" href="/auth/register?intent=customer&redirect=/users/onboarding/customer">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>

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