import { A, useParams } from '@solidjs/router';
import { Meta, Title } from '@solidjs/meta';
import { Show, For, createSignal, createResource, onCleanup, onMount, createMemo } from 'solid-js';
import Markdown from 'solid-markdown';
import { fetchArticleBySlug, fetchRelatedArticles } 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 slug = createMemo(() => String(params.slug || '').trim());
  const [scrollY, setScrollY] = createSignal(0);

  const [article] = createResource(() => params.slug, fetchArticleBySlug);
  const [relatedArticles] = createResource(
    () => article(),
    (item) => (item ? fetchRelatedArticles({ article: item, limit: 4 }) : [])
  );
  const canonical = createMemo(() => `https://test121.nxtgauge.com/help-center/article/${encodeURIComponent(slug())}`);
  const pageTitle = createMemo(() => {
    const a = article();
    return a ? `${a.title} | Nxtgauge Help Center` : 'Help Center Article | Nxtgauge';
  });
  const pageDescription = createMemo(() => {
    const a = article();
    return a?.summary || 'Read support and product guidance from Nxtgauge Help Center.';
  });

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

  return (
    <main class="lp-main">
      <Title>{pageTitle()}</Title>
      <Meta name="description" content={pageDescription()} />
      <Meta property="og:title" content={pageTitle()} />
      <Meta property="og:description" content={pageDescription()} />
      <Meta property="og:type" content="article" />
      <Meta property="og:url" content={canonical()} />
      <Meta name="twitter:card" content="summary_large_image" />
      <Meta name="twitter:title" content={pageTitle()} />
      <Meta name="twitter:description" content={pageDescription()} />
      <link rel="canonical" href={canonical()} />

      <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">
                     <Markdown>{a().content}</Markdown>
                   </div>

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

              <section class="public-section scene-dark">
                <div class="container panel panel-light" style={{ 'max-width': '960px' }}>
                  <Show when={(relatedArticles() || []).length > 0}>
                    <div style={{ 'margin-bottom': '20px' }}>
                      <h2 style={{ margin: '0 0 10px', 'font-size': '22px' }}>Related Articles</h2>
                      <div style={{ display: 'grid', gap: '10px' }}>
                        <For each={relatedArticles() || []}>
                          {(related) => (
                            <A href={`/help-center/article/${related.slug}`} style={{ 'text-decoration': 'none' }}>
                              <article style={{ border: '1px solid rgba(255,255,255,0.16)', 'border-radius': '12px', padding: '12px 14px', background: 'rgba(255,255,255,0.02)' }}>
                                <p style={{ margin: 0, color: '#fd6116', 'font-size': '11px', 'font-weight': '700' }}>{related.category || 'General'}</p>
                                <h3 style={{ margin: '5px 0 4px', color: '#fff', 'font-size': '16px' }}>{related.title}</h3>
                                <p style={{ margin: 0, color: 'rgba(255,255,255,0.75)', 'font-size': '13px' }}>{related.summary}</p>
                              </article>
                            </A>
                          )}
                        </For>
                      </div>
                    </div>
                  </Show>

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