import { A } from '@solidjs/router';
import { Meta, Title } from '@solidjs/meta';
import { For, createResource, createSignal } from 'solid-js';
import PublicBackground from '~/components/PublicBackground';
import PublicFooter from '~/components/PublicFooter';
import PublicHeader from '~/components/PublicHeader';
import { fetchHelpCenterArticles, fetchHelpCenterCategories } from '~/lib/help-center';

export default function HelpCenterPage() {
  const title = 'Help Center | Nxtgauge';
  const description = 'Browse Nxtgauge guides for getting started, roles, requests, approvals, and platform troubleshooting.';
  const canonical = 'https://test121.nxtgauge.com/help-center';
  const [query, setQuery] = createSignal('');
  const [category, setCategory] = createSignal('');

  const [categories] = createResource(fetchHelpCenterCategories);
  const [articles] = createResource(
    () => ({ q: query().trim(), categoryKey: category().trim() }),
    (input) => fetchHelpCenterArticles({ q: input.q || undefined, categoryKey: input.categoryKey || undefined })
  );

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

      <PublicBackground />
      <div class="lp-content">
        <PublicHeader />

        <section class="public-section scene-dark lp-section">
          <div class="container panel panel-dark" style={{ padding: '24px' }}>
            <h1 style={{ margin: '0 0 8px', color: '#fff', 'font-size': '32px', 'font-weight': '800' }}>Help Center</h1>
            <p style={{ margin: '0 0 20px', color: 'rgba(255,255,255,0.8)' }}>Browse guides and platform FAQs.</p>

            <div style={{ display: 'grid', gap: '12px', 'grid-template-columns': '2fr 1fr', 'margin-bottom': '20px' }}>
              <input
                class="input"
                placeholder="Search help articles"
                value={query()}
                onInput={(e) => setQuery(e.currentTarget.value)}
              />
              <select class="input" value={category()} onChange={(e) => setCategory(e.currentTarget.value)}>
                <option value="">All categories</option>
                <For each={categories() || []}>
                  {(c) => <option value={c.key}>{c.title}</option>}
                </For>
              </select>
            </div>

            <div style={{ display: 'grid', gap: '10px' }}>
              <For each={articles() || []}>
                {(article) => (
                  <A href={`/help-center/article/${article.slug}`} style={{ 'text-decoration': 'none' }}>
                    <article style={{ border: '1px solid rgba(255,255,255,0.12)', 'border-radius': '12px', padding: '14px 16px', background: 'rgba(255,255,255,0.02)' }}>
                      <p style={{ margin: 0, color: '#fd6116', 'font-size': '12px', 'font-weight': '700' }}>{article.category || 'General'}</p>
                      <h2 style={{ margin: '6px 0 6px', color: '#fff', 'font-size': '18px' }}>{article.title}</h2>
                      <p style={{ margin: 0, color: 'rgba(255,255,255,0.8)', 'font-size': '14px' }}>{article.summary}</p>
                    </article>
                  </A>
                )}
              </For>
              <For each={articles() && (articles() || []).length === 0 ? [1] : []}>
                {() => <p style={{ margin: 0, color: 'rgba(255,255,255,0.75)' }}>No articles found.</p>}
              </For>
            </div>
          </div>
        </section>

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