import { A, useParams } from "@solidjs/router";
import { Meta, Title } from "@solidjs/meta";
import { Show, For, createSignal, createResource, onCleanup, onMount, createMemo } from "solid-js";
import { fetchArticleBySlug, fetchRelatedArticles } from "~/lib/help-center";
import PublicBackground from "~/components/PublicBackground";
import PublicHeader from "~/components/PublicHeader";
import PublicFooter from "~/components/PublicFooter";
import ArticleContent from "~/components/ArticleContent";

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

  const formattedDate = createMemo(() => {
    const a = article();
    if (!a?.updatedAt) return "";
    const date = new Date(a.updatedAt);
    return date.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
  });

  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 />

        {/* Breadcrumb - Dark */}
        <section style={{ padding: "20px 0 0" }}>
          <div class="container" style={{ "max-width": "960px" }}>
            <nav
              style={{
                display: "flex",
                "align-items": "center",
                gap: "8px",
                "font-size": "14px",
                color: "rgba(255,255,255,0.5)",
              }}
            >
              <A
                href="/help-center"
                style={{
                  color: "rgba(255,255,255,0.6)",
                  "text-decoration": "none",
                  display: "flex",
                  "align-items": "center",
                  gap: "6px",
                }}
              >
                <svg
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                >
                  <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
                  <polyline points="9,22 9,12 15,12 15,22" />
                </svg>
                Help Center
              </A>
              <span style={{ color: "rgba(255,255,255,0.3)" }}>/</span>
              <Show when={article()}>
                {(a) => (
                  <span style={{ color: "#fd6116", "font-weight": "600" }}>
                    {a().category || categoryTitle(a().categoryKey)}
                  </span>
                )}
              </Show>
            </nav>
          </div>
        </section>

        {/* Loading State */}
        <Show when={article.loading}>
          <section class="public-section scene-dark">
            <div class="container" style={{ "max-width": "960px" }}>
              <div
                class="panel panel-light"
                style={{ padding: "60px 40px", "text-align": "center" }}
              >
                <div
                  class="spinner"
                  style={{
                    width: "40px",
                    height: "40px",
                    border: "3px solid rgba(253,97,22,0.2)",
                    "border-top-color": "#fd6116",
                    "border-radius": "50%",
                    animation: "spin 1s linear infinite",
                    margin: "0 auto 20px",
                  }}
                />
                <p style={{ color: "#6B7280", margin: 0 }}>Loading article...</p>
              </div>
            </div>
          </section>
        </Show>

        {/* Not Found State */}
        <Show when={!article.loading && !article()}>
          <section class="public-section scene-dark">
            <div class="container" style={{ "max-width": "960px" }}>
              <div
                class="panel panel-light"
                style={{ padding: "60px 40px", "text-align": "center" }}
              >
                <div
                  style={{
                    width: "64px",
                    height: "64px",
                    background: "rgba(253,97,22,0.1)",
                    "border-radius": "16px",
                    display: "flex",
                    "align-items": "center",
                    "justify-content": "center",
                    margin: "0 auto 24px",
                  }}
                >
                  <svg
                    width="32"
                    height="32"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="#fd6116"
                    stroke-width="2"
                  >
                    <circle cx="12" cy="12" r="10" />
                    <line x1="12" y1="8" x2="12" y2="12" />
                    <line x1="12" y1="16" x2="12.01" y2="16" />
                  </svg>
                </div>
                <h1
                  style={{
                    margin: "0 0 12px",
                    color: "#111827",
                    "font-size": "28px",
                    "font-weight": "700",
                  }}
                >
                  Article not found
                </h1>
                <p style={{ margin: "0 0 24px", color: "#6B7280", "font-size": "16px" }}>
                  The requested Help Center article is unavailable or has been moved.
                </p>
                <A class="btn primary" href="/help-center">
                  Back to Help Center
                </A>
              </div>
            </div>
          </section>
        </Show>

        {/* Article Content */}
        <Show when={!article.loading && article()}>
          {(a) => (
            <>
              {/* Dark Article Header */}
              <section class="public-section scene-dark" style={{ padding: "20px 0 30px" }}>
                <div class="container" style={{ "max-width": "960px" }}>
                  <div style={{ padding: "0 0 20px" }}>
                    <div
                      style={{
                        display: "inline-flex",
                        "align-items": "center",
                        gap: "6px",
                        background: "rgba(253,97,22,0.15)",
                        color: "#fd6116",
                        padding: "6px 14px",
                        "border-radius": "20px",
                        "font-size": "12px",
                        "font-weight": "700",
                        "text-transform": "uppercase",
                        "letter-spacing": "0.5px",
                      }}
                    >
                      <svg
                        width="12"
                        height="12"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2.5"
                      >
                        <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
                        <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
                      </svg>
                      {a().category || categoryTitle(a().categoryKey)}
                    </div>
                    <h1
                      style={{
                        margin: "16px 0 12px",
                        color: "#fff",
                        "font-size": "36px",
                        "font-weight": "800",
                        "line-height": "1.2",
                      }}
                    >
                      {a().title}
                    </h1>
                    <p
                      style={{
                        margin: 0,
                        color: "rgba(255,255,255,0.7)",
                        "font-size": "18px",
                        "line-height": "1.6",
                      }}
                    >
                      {a().summary}
                    </p>
                    <div
                      style={{
                        display: "flex",
                        "align-items": "center",
                        gap: "12px",
                        "margin-top": "20px",
                        "flex-wrap": "wrap",
                      }}
                    >
                      <Show when={a().tags?.length > 0}>
                        <div style={{ display: "flex", gap: "8px", "flex-wrap": "wrap" }}>
                          <For each={a().tags}>
                            {(tag) => (
                              <span
                                style={{
                                  display: "inline-flex",
                                  "align-items": "center",
                                  background: "rgba(255,255,255,0.1)",
                                  color: "rgba(255,255,255,0.8)",
                                  padding: "4px 10px",
                                  "border-radius": "6px",
                                  "font-size": "12px",
                                  border: "1px solid rgba(255,255,255,0.15)",
                                }}
                              >
                                {tag}
                              </span>
                            )}
                          </For>
                        </div>
                      </Show>
                      <div
                        style={{
                          display: "flex",
                          "align-items": "center",
                          gap: "6px",
                          color: "rgba(255,255,255,0.5)",
                          "font-size": "13px",
                        }}
                      >
                        <svg
                          width="14"
                          height="14"
                          viewBox="0 0 24 24"
                          fill="none"
                          stroke="currentColor"
                          stroke-width="2"
                        >
                          <circle cx="12" cy="12" r="10" />
                          <polyline points="12,6 12,12 16,14" />
                        </svg>
                        Updated {formattedDate()}
                      </div>
                    </div>
                  </div>
                </div>
              </section>

              {/* Light Content Section */}
              <section style={{ background: "#F8FAFC", padding: "40px 0 30px" }}>
                <div class="container" style={{ "max-width": "960px" }}>
                  <div
                    style={{
                      background: "#fff",
                      "border-radius": "20px",
                      border: "1px solid #E5E7EB",
                      padding: "40px",
                      "box-shadow": "0 1px 3px rgba(0,0,0,0.05)",
                    }}
                  >
                    <Show
                      when={a().content}
                      fallback={<p style={{ color: "#6B7280" }}>No content available.</p>}
                    >
                      <ArticleContent blocks={a().content} />
                    </Show>
                    <div
                      style={{
                        display: "flex",
                        gap: "12px",
                        "margin-top": "40px",
                        "padding-top": "32px",
                        "border-top": "1px solid #E5E7EB",
                      }}
                    >
                      <A
                        class="btn"
                        href="/help-center"
                        style={{ display: "inline-flex", "align-items": "center", gap: "6px" }}
                      >
                        <svg
                          width="18"
                          height="18"
                          viewBox="0 0 24 24"
                          fill="none"
                          stroke="currentColor"
                          stroke-width="2"
                        >
                          <line x1="19" y1="12" x2="5" y2="12" />
                          <polyline points="12,19 5,12 12,5" />
                        </svg>
                        Back to Help Center
                      </A>
                      <A class="btn primary" href="/contact">
                        Get Started
                      </A>
                    </div>
                  </div>
                </div>
              </section>

              {/* Related Articles - Light */}
              <Show when={(relatedArticles() || []).length > 0}>
                <section style={{ background: "#F8FAFC", padding: "20px 0 40px" }}>
                  <div class="container" style={{ "max-width": "960px" }}>
                    <div
                      style={{
                        background: "#fff",
                        "border-radius": "20px",
                        padding: "32px",
                        border: "1px solid #E5E7EB",
                        "box-shadow": "0 1px 3px rgba(0,0,0,0.05)",
                      }}
                    >
                      <h2
                        style={{
                          margin: "0 0 20px",
                          color: "#111827",
                          "font-size": "20px",
                          "font-weight": "700",
                        }}
                      >
                        Related Articles
                      </h2>
                      <div
                        style={{
                          display: "grid",
                          "grid-template-columns": "repeat(auto-fit, minmax(260px, 1fr))",
                          gap: "16px",
                        }}
                      >
                        <For each={relatedArticles() || []}>
                          {(related) => (
                            <A
                              href={`/help-center/article/${related.slug}`}
                              style={{ "text-decoration": "none" }}
                            >
                              <article
                                style={{
                                  display: "flex",
                                  "flex-direction": "column",
                                  gap: "8px",
                                  background: "#F9FAFB",
                                  border: "1px solid #E5E7EB",
                                  "border-radius": "12px",
                                  padding: "20px",
                                  transition: "all 0.2s",
                                  cursor: "pointer",
                                }}
                                onMouseEnter={(e) => {
                                  e.currentTarget.style.background = "#fff";
                                  e.currentTarget.style.borderColor = "#fd6116";
                                  e.currentTarget.style.boxShadow =
                                    "0 4px 12px rgba(253,97,22,0.1)";
                                }}
                                onMouseLeave={(e) => {
                                  e.currentTarget.style.background = "#F9FAFB";
                                  e.currentTarget.style.borderColor = "#E5E7EB";
                                  e.currentTarget.style.boxShadow = "none";
                                }}
                              >
                                <span
                                  style={{
                                    color: "#fd6116",
                                    "font-size": "11px",
                                    "font-weight": "700",
                                    "text-transform": "uppercase",
                                    "letter-spacing": "0.5px",
                                  }}
                                >
                                  {related.category || "General"}
                                </span>
                                <h3
                                  style={{
                                    margin: 0,
                                    color: "#111827",
                                    "font-size": "15px",
                                    "font-weight": "600",
                                    "line-height": "1.4",
                                  }}
                                >
                                  {related.title}
                                </h3>
                                <p
                                  style={{
                                    margin: 0,
                                    color: "#6B7280",
                                    "font-size": "13px",
                                    "line-height": "1.5",
                                  }}
                                >
                                  {related.summary}
                                </p>
                              </article>
                            </A>
                          )}
                        </For>
                      </div>
                    </div>
                  </div>
                </section>
              </Show>

              {/* Help Section - Dark */}
              <section style={{ padding: "0 0 40px" }}>
                <div class="container" style={{ "max-width": "960px" }}>
                  <div
                    style={{
                      background:
                        "linear-gradient(135deg, rgba(253,97,22,0.15) 0%, rgba(253,97,22,0.08) 100%)",
                      "border-radius": "20px",
                      padding: "40px",
                      border: "1px solid rgba(253,97,22,0.25)",
                      "text-align": "center",
                    }}
                  >
                    <div
                      style={{
                        width: "56px",
                        height: "56px",
                        background: "rgba(253,97,22,0.2)",
                        "border-radius": "14px",
                        display: "flex",
                        "align-items": "center",
                        "justify-content": "center",
                        margin: "0 auto 20px",
                      }}
                    >
                      <svg
                        width="28"
                        height="28"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="#fd6116"
                        stroke-width="2"
                      >
                        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
                      </svg>
                    </div>
                    <h2
                      style={{
                        margin: "0 0 12px",
                        color: "#fff",
                        "font-size": "24px",
                        "font-weight": "700",
                      }}
                    >
                      Need more help?
                    </h2>
                    <p
                      style={{
                        margin: "0 0 24px",
                        color: "rgba(255,255,255,0.7)",
                        "font-size": "16px",
                      }}
                    >
                      If this article does not solve your issue, send your question with context to
                      support.
                    </p>
                    <div
                      style={{
                        display: "flex",
                        gap: "12px",
                        "justify-content": "center",
                        "flex-wrap": "wrap",
                      }}
                    >
                      <a
                        class="btn primary"
                        href="mailto:support@nxtgauge.com?subject=Nxtgauge%20Help%20Center%20Question"
                        style={{ display: "inline-flex", "align-items": "center", gap: "6px" }}
                      >
                        <svg
                          width="18"
                          height="18"
                          viewBox="0 0 24 24"
                          fill="none"
                          stroke="currentColor"
                          stroke-width="2"
                        >
                          <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
                          <polyline points="22,6 12,13 2,6" />
                        </svg>
                        Email support
                      </a>
                      <A class="btn" href="/help-center">
                        Browse more articles
                      </A>
                    </div>
                  </div>
                </div>
              </section>
            </>
          )}
        </Show>

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