import { A, useParams } from '@solidjs/router';
import { getArticleBySlug } from '~/lib/help-center';
import PublicHeader from '~/components/PublicHeader';

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 || '');

  if (!article) {
    return (
      <main class="lp-main">
        <div class="lp-bg" aria-hidden="true">
          <div class="lp-dark-base" />
          <div class="lp-mesh" />
          <div class="lp-ribbon" />
          <div class="lp-noise" />
        </div>
        <div class="lp-content">
          <PublicHeader />
          <section class="public-section scene-light">
            <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>
        </div>
      </main>
    );
  }

  return (
    <main class="lp-main">
      <div class="lp-bg" aria-hidden="true">
        <div class="lp-dark-base" />
        <div class="lp-mesh" />
        <div class="lp-ribbon" />
        <div class="lp-noise" />
      </div>
      <div class="lp-content">
        <PublicHeader />
        <section class="public-section scene-light">
          <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-light">
          <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>
      </div>
    </main>
  );
}