import { A } from "@solidjs/router";
import { Meta, Title } from "@solidjs/meta";
import { For, createResource, createSignal, Show } 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://test111.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 />

        {/* Dark Hero Section */}
        <section class="public-section scene-dark" style={{ padding: "60px 0 50px" }}>
          <div class="container" style={{ "max-width": "900px", "text-align": "center" }}>
            <h1
              style={{
                margin: "0 0 12px",
                color: "#fff",
                "font-size": "42px",
                "font-weight": "800",
              }}
            >
              How can we help you?
            </h1>
            <p style={{ margin: "0 0 32px", color: "rgba(255,255,255,0.7)", "font-size": "18px" }}>
              Browse guides and find answers to common questions
            </p>

            {/* Search Bar - Dark */}
            <div
              style={{
                display: "flex",
                gap: "12px",
                "max-width": "700px",
                margin: "0 auto",
                "flex-wrap": "wrap",
              }}
            >
              <div style={{ position: "relative", flex: "1", "min-width": "280px" }}>
                <svg
                  width="20"
                  height="20"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="rgba(255,255,255,0.4)"
                  stroke-width="2"
                  style={{
                    position: "absolute",
                    left: "16px",
                    top: "50%",
                    transform: "translateY(-50%)",
                  }}
                >
                  <circle cx="11" cy="11" r="8" />
                  <line x1="21" y1="21" x2="16.65" y2="16.65" />
                </svg>
                <input
                  style={{
                    width: "100%",
                    background: "rgba(255,255,255,0.08)",
                    border: "1px solid rgba(255,255,255,0.15)",
                    "border-radius": "14px",
                    padding: "16px 18px 16px 48px",
                    color: "#fff",
                    "font-size": "16px",
                    outline: "none",
                    transition: "all 0.2s",
                  }}
                  placeholder="Search help articles..."
                  value={query()}
                  onInput={(e) => setQuery(e.currentTarget.value)}
                  onFocus={(e) => {
                    e.currentTarget.style.background = "rgba(255,255,255,0.12)";
                    e.currentTarget.style.borderColor = "rgba(253,97,22,0.5)";
                  }}
                  onBlur={(e) => {
                    e.currentTarget.style.background = "rgba(255,255,255,0.08)";
                    e.currentTarget.style.borderColor = "rgba(255,255,255,0.15)";
                  }}
                />
              </div>
              <select
                style={{
                  background: "rgba(255,255,255,0.08)",
                  border: "1px solid rgba(255,255,255,0.15)",
                  "border-radius": "14px",
                  padding: "16px 20px",
                  color: "#fff",
                  "font-size": "16px",
                  outline: "none",
                  cursor: "pointer",
                  "min-width": "180px",
                }}
                value={category()}
                onChange={(e) => setCategory(e.currentTarget.value)}
              >
                <option value="" style={{ background: "#1a1a2e", color: "#fff" }}>
                  All categories
                </option>
                <For each={categories() || []}>
                  {(c) => (
                    <option value={c.key} style={{ background: "#1a1a2e", color: "#fff" }}>
                      {c.title}
                    </option>
                  )}
                </For>
              </select>
            </div>
          </div>
        </section>

        {/* Content Section - Transparent background to show parallax */}
        <section class="public-section scene-dark" style={{ padding: "60px 0 80px" }}>
          <div class="container" style={{ "max-width": "1100px" }}>
            {/* Categories - Glass Cards */}
            <Show when={!query() && !category()}>
              <div style={{ "margin-bottom": "60px" }}>
                <h2
                  style={{
                    margin: "0 0 28px",
                    color: "#fff",
                    "font-size": "24px",
                    "font-weight": "700",
                  }}
                >
                  Browse by Category
                </h2>
                <div
                  style={{
                    display: "grid",
                    "grid-template-columns": "repeat(auto-fill, minmax(260px, 1fr))",
                    gap: "20px",
                  }}
                >
                  <For each={categories() || []}>
                    {(c) => (
                      <button
                        onClick={() => setCategory(c.key)}
                        style={{
                          display: "flex",
                          "flex-direction": "column",
                          gap: "12px",
                          background: "rgba(255,255,255,0.95)",
                          border: "1px solid rgba(255,255,255,0.2)",
                          "border-radius": "16px",
                          padding: "28px",
                          cursor: "pointer",
                          transition: "all 0.2s",
                          "text-align": "left",
                          "box-shadow": "0 4px 20px rgba(0,0,0,0.1)",
                          "backdrop-filter": "blur(10px)",
                        }}
                        onMouseEnter={(e) => {
                          e.currentTarget.style.borderColor = "#fd6116";
                          e.currentTarget.style.boxShadow = "0 8px 30px rgba(253,97,22,0.2)";
                          e.currentTarget.style.transform = "translateY(-2px)";
                        }}
                        onMouseLeave={(e) => {
                          e.currentTarget.style.borderColor = "rgba(255,255,255,0.2)";
                          e.currentTarget.style.boxShadow = "0 4px 20px rgba(0,0,0,0.1)";
                          e.currentTarget.style.transform = "translateY(0)";
                        }}
                      >
                        <div
                          style={{
                            width: "48px",
                            height: "48px",
                            background: "linear-gradient(135deg, #FFF7ED 0%, #FED7AA 100%)",
                            "border-radius": "12px",
                            display: "flex",
                            "align-items": "center",
                            "justify-content": "center",
                          }}
                        >
                          <svg
                            width="24"
                            height="24"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="#EA580C"
                            stroke-width="2"
                          >
                            <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>
                        </div>
                        <p
                          style={{
                            margin: "4px 0 0",
                            color: "#111827",
                            "font-size": "16px",
                            "font-weight": "600",
                          }}
                        >
                          {c.title}
                        </p>
                        <p style={{ margin: 0, color: "#6B7280", "font-size": "14px" }}>
                          View articles
                        </p>
                      </button>
                    )}
                  </For>
                </div>
              </div>
            </Show>

            {/* Articles - Glass Cards */}
            <div style={{ "margin-top": !query() && !category() ? "0" : "20px" }}>
              <h2
                style={{
                  margin: "0 0 28px",
                  color: "#fff",
                  "font-size": "24px",
                  "font-weight": "700",
                }}
              >
                {query()
                  ? `Search results for "${query()}"`
                  : category()
                    ? "Category Articles"
                    : "All Articles"}
              </h2>
              <Show when={articles.loading} fallback={null}>
                <div style={{ display: "flex", "justify-content": "center", padding: "48px" }}>
                  <div
                    style={{
                      width: "32px",
                      height: "32px",
                      border: "3px solid rgba(255,255,255,0.3)",
                      "border-top-color": "#fd6116",
                      "border-radius": "50%",
                      animation: "spin 1s linear infinite",
                    }}
                  />
                </div>
              </Show>
              <Show when={!articles.loading && (articles() || []).length === 0}>
                <div
                  style={{
                    "text-align": "center",
                    padding: "48px 20px",
                    color: "rgba(255,255,255,0.7)",
                  }}
                >
                  <svg
                    width="48"
                    height="48"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="rgba(255,255,255,0.5)"
                    stroke-width="1.5"
                    style={{ margin: "0 auto 16px" }}
                  >
                    <circle cx="11" cy="11" r="8" />
                    <line x1="21" y1="21" x2="16.65" y2="16.65" />
                  </svg>
                  <p style={{ margin: 0, "font-size": "16px" }}>No articles found</p>
                  <p
                    style={{
                      margin: "8px 0 0",
                      "font-size": "14px",
                      color: "rgba(255,255,255,0.5)",
                    }}
                  >
                    Try adjusting your search or filter
                  </p>
                </div>
              </Show>
              <Show when={!articles.loading && (articles() || []).length > 0}>
                <div
                  style={{
                    display: "grid",
                    "grid-template-columns": "repeat(auto-fill, minmax(340px, 1fr))",
                    gap: "20px",
                  }}
                >
                  <For each={articles() || []}>
                    {(article) => (
                      <A
                        href={`/help-center/article/${article.slug}`}
                        style={{
                          display: "flex",
                          "flex-direction": "column",
                          gap: "12px",
                          background: "rgba(255,255,255,0.95)",
                          border: "1px solid rgba(255,255,255,0.2)",
                          "border-radius": "16px",
                          padding: "28px",
                          "text-decoration": "none",
                          transition: "all 0.2s",
                          "box-shadow": "0 4px 20px rgba(0,0,0,0.1)",
                          "backdrop-filter": "blur(10px)",
                        }}
                        onMouseEnter={(e) => {
                          e.currentTarget.style.borderColor = "#EA580C";
                          e.currentTarget.style.boxShadow = "0 8px 30px rgba(234,88,12,0.2)";
                          e.currentTarget.style.transform = "translateY(-2px)";
                        }}
                        onMouseLeave={(e) => {
                          e.currentTarget.style.borderColor = "rgba(255,255,255,0.2)";
                          e.currentTarget.style.boxShadow = "0 4px 20px rgba(0,0,0,0.1)";
                          e.currentTarget.style.transform = "translateY(0)";
                        }}
                      >
                        <span
                          style={{
                            color: "#EA580C",
                            "font-size": "12px",
                            "font-weight": "700",
                            "text-transform": "uppercase",
                            "letter-spacing": "0.5px",
                          }}
                        >
                          {article.category || "General"}
                        </span>
                        <h3
                          style={{
                            margin: "4px 0 0",
                            color: "#111827",
                            "font-size": "17px",
                            "font-weight": "600",
                            "line-height": "1.4",
                          }}
                        >
                          {article.title}
                        </h3>
                        <p
                          style={{
                            margin: "4px 0 0",
                            color: "#6B7280",
                            "font-size": "14px",
                            "line-height": "1.6",
                          }}
                        >
                          {article.summary}
                        </p>
                      </A>
                    )}
                  </For>
                </div>
              </Show>
            </div>
          </div>
        </section>

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