/* global React */
const { useState } = window.ReactHooks;

function ProductPage({ query }) {
  const params = new URLSearchParams(query);
  const id = params.get("id") || "horizon-kpi";
  const p = window.PRODUCTS.find((x) => x.id === id) || window.PRODUCTS[0];
  const [tab, setTab] = useState("Overview");
  const [seat, setSeat] = useState(5);

  const related = window.PRODUCTS.filter((x) => x.id !== p.id).slice(0, 4);

  return (
    <main>
      <section className="page-head">
        <div className="container">
          <div className="crumb">
            <a href="#/home">Home</a><span>/</span><a href="#/catalog">Catalog</a><span>/</span><span>{p.category}</span>
          </div>
          <h1 style={{ fontSize: "clamp(36px, 5vw, 64px)" }}>{p.name}</h1>
          <p className="sub">{p.tagline}</p>
        </div>
      </section>

      <section>
        <div className="container">
          <div className="product-layout">
            <div>
              <div className="product-preview">
                <div className="ph">
                  <span className="mono" style={{ fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--muted)" }}>
                    Preview · {p.name}
                  </span>
                  <span className="hero-chip"><span className="dot" /> INTERACTIVE</span>
                </div>
                <div className="pb">
                  <window.ProductVisual id={p.id} big />
                </div>
              </div>

              <div className="tabs">
                {["Overview", "Features", "Technical", "Changelog"].map((t) => (
                  <button key={t} className={"tab " + (tab === t ? "active" : "")} onClick={() => setTab(t)}>{t}</button>
                ))}
              </div>

              <div className="spacer-6" />
              {tab === "Overview" && (
                <div style={{ maxWidth: 640, color: "var(--fg-2)", fontSize: 16, lineHeight: 1.6 }}>
                  <p>{p.summary}</p>
                  <p>Every TC visual ships with a documented measure contract, formatting pane parity for Power BI Desktop and Service, and a test suite pinned to the Microsoft certification path. You can roll back any version from your tenant admin, without re-publishing reports.</p>
                </div>
              )}
              {tab === "Features" && (
                <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 12, maxWidth: 640 }}>
                  {p.features.map((f, i) => (
                    <li key={i} style={{ display: "flex", gap: 16, padding: "12px 0", borderBottom: "1px solid var(--line-softer)" }}>
                      <span className="mono" style={{ color: "var(--muted)", fontSize: 11, letterSpacing: "0.08em", minWidth: 28 }}>
                        F{String(i + 1).padStart(2, "0")}
                      </span>
                      <span style={{ fontSize: 15 }}>{f}</span>
                    </li>
                  ))}
                </ul>
              )}
              {tab === "Technical" && (
                <dl className="product-meta" style={{ maxWidth: 640, borderTop: 0, paddingTop: 0 }}>
                  <dt>Runtime</dt><dd>Power BI Desktop 2.118+ · Power BI Service · Fabric</dd>
                  <dt>Cert. status</dt><dd>Microsoft certified · code-signed</dd>
                  <dt>Data bind</dt><dd>Up to 30,000 categories · Direct Query & Import</dd>
                  <dt>Render</dt><dd>SVG with optional WebGL for N &gt; 5000</dd>
                  <dt>Bundle size</dt><dd>~180 KB gzipped</dd>
                  <dt>Locales</dt><dd>EN, ES, DE, FR, PT-BR, JA</dd>
                </dl>
              )}
              {tab === "Changelog" && (
                <ul style={{ listStyle: "none", padding: 0, margin: 0, maxWidth: 640 }}>
                  {[
                    ["2.4.1", "2026-03-18", "Fix: axis tick alignment when scale < 10"],
                    ["2.4.0", "2026-02-09", "New: multi-metric KPI layout (up to 6 metrics)"],
                    ["2.3.2", "2025-12-04", "Perf: 18% faster first render on large models"],
                    ["2.3.0", "2025-10-22", "New: accessibility summaries, high-contrast mode"]
                  ].map(([v, d, msg]) => (
                    <li key={v} style={{ display: "grid", gridTemplateColumns: "80px 120px 1fr", gap: 16, padding: "12px 0", borderBottom: "1px solid var(--line-softer)", fontSize: 14 }}>
                      <span className="mono">v{v}</span>
                      <span className="mono" style={{ color: "var(--muted)" }}>{d}</span>
                      <span>{msg}</span>
                    </li>
                  ))}
                </ul>
              )}
            </div>

            <aside>
              <div className="buybar">
                <div>
                  <div className="eyebrow">Per seat / month</div>
                  <div className="price-big num">${p.price}</div>
                </div>
                <div style={{ textAlign: "right" }}>
                  <div className="eyebrow" style={{ marginBottom: 6 }}>Seats</div>
                  <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
                    <button className="btn btn-ghost btn-sm" onClick={() => setSeat(Math.max(1, seat - 1))}>–</button>
                    <span style={{ width: 40, textAlign: "center", fontFamily: "var(--f-mono)" }}>{seat}</span>
                    <button className="btn btn-ghost btn-sm" onClick={() => setSeat(seat + 1)}>+</button>
                  </div>
                </div>
              </div>

              <div style={{ display: "flex", gap: 12 }}>
                <a href="#/contact" className="btn" style={{ flex: 1, justifyContent: "center" }}>Start 30-day pilot</a>
                <a href="#/contact" className="btn btn-ghost">Request demo</a>
              </div>

              <div className="spacer-6" />

              <div className="product-meta">
                <dl>
                  <dt>Version</dt><dd className="num">{p.version}</dd>
                  <dt>Last updated</dt><dd className="num">{p.updated}</dd>
                  <dt>Downloads</dt><dd className="num">{p.downloads.toLocaleString()}</dd>
                  <dt>Rating</dt><dd>{p.rating} ★ · 312 reviews</dd>
                  <dt>License</dt><dd>Commercial per-seat</dd>
                  <dt>Tags</dt><dd>{p.tags.join(" · ")}</dd>
                </dl>
              </div>

              <div className="spacer-6" />
              <div className="eyebrow">Total · annual</div>
              <div className="num" style={{ fontFamily: "var(--f-display)", fontSize: 24, marginTop: 4, letterSpacing: "-0.02em" }}>
                ${(p.price * 12 * seat).toLocaleString()} <span className="muted" style={{ fontSize: 13, fontFamily: "var(--f-ui)", letterSpacing: 0 }}>/ year</span>
              </div>

              <div className="spacer-6" />
              <div className="eyebrow">Also available on</div>
              <p style={{ fontSize: 14, color: "var(--fg-2)", marginTop: 8 }}>Microsoft AppSource · direct purchase from tcviz.com · volume agreements available.</p>
            </aside>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="section-label">
            <span className="mono">Related visuals</span>
            <span className="rule" />
          </div>
          <div className="cards">
            {related.map((r) => (
              <a key={r.id} href={"#/product?id=" + r.id} className="card">
                <div className="card-vis">
                  <div className="card-tag">{r.category}</div>
                  <window.ProductVisual id={r.id} />
                </div>
                <div>
                  <div className="card-title">{r.name}</div>
                  <div className="card-sub">{r.tagline}</div>
                </div>
                <div className="card-foot">
                  <span>v{r.version}</span>
                  <span className="price">${r.price}</span>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

window.ProductPage = ProductPage;