/* portfolio-products.jsx — Product Ecosystem (v5)
   7 evolving operational engineering platforms with status, screenshots,
   roadmap, frameworks, business problem, operational workflow. */

const { useState: useStateP, useEffect: useEffectP } = React;

// =========================================================
// STATUS PILL (used everywhere)
// =========================================================
const StatusPill = ({ statusKey, statuses, compact }) => {
  const s = statuses?.[statusKey] || { label: statusKey, dot: "#6b7280", tone: "gray" };
  return (
    <span className={`status-pill-v5 tone-${s.tone}${compact ? " compact" : ""}`}>
      <span className="dot" style={{ background: s.dot }}></span>
      <span>{s.label}</span>
    </span>
  );
};

// =========================================================
// PRODUCT SCREENSHOT SLOT — image-slot placeholder + fallback art
// =========================================================
const ProductScreenshot = ({ product }) => {
  const slotId = product.screenshotSlot || `prod-${product.id}`;
  // When no screenshot is uploaded we render an *intelligent cover* — a
  // branded, app-style preview built from the product's own identity — instead
  // of an empty "drop here" box. The <image-slot> sits on top (drag-drop in
  // admin); when filled, it covers the fallback. For visitors the slot is
  // click-through (CSS) so clicking the card opens the product, not a file
  // dialog — the upload affordance only appears in admin / on hover.
  return (
    <div className="prod-screen" style={{ '--prod-c': product.color }}>
      <div className="prod-screen-fallback" aria-hidden="true">
        <span className="ps-grid"></span>
        <div className="psf-chrome"><i></i><i></i><i></i><span>{product.name}</span></div>
        <div className="psf-stage">
          <span className="psf-logo">{product.logo}</span>
          <span className="psf-name">{product.name}</span>
          {product.domain && <span className="psf-domain">{product.domain}</span>}
        </div>
      </div>
      <image-slot
        id={slotId}
        shape="rounded"
        radius="14"
        placeholder={`Drop ${product.name} screenshot`}
        style={{ width: "100%", height: "100%", display: "block" }}
      ></image-slot>
    </div>
  );
};

// =========================================================
// PRODUCT CARD (grid / list / mosaic variants)
// =========================================================
const ProductCard = ({ product, statuses, style, onOpen }) => {
  if (style === "list") {
    return (
      <article className="prod-list-row" onClick={() => onOpen(product)} style={{ '--prod-c': product.color }}>
        <div className="plr-logo">{product.logo}</div>
        <div className="plr-body">
          <div className="plr-head">
            <h3>{product.name}</h3>
            <StatusPill statusKey={product.status} statuses={statuses} compact />
          </div>
          <div className="plr-kicker">{product.kicker} · {product.domain}</div>
          <p>{product.tagline}</p>
          <div className="plr-stack">
            {(product.stack || []).slice(0, 5).map((t, i) => <span className="tag" key={i}>{t}</span>)}
          </div>
        </div>
        <div className="plr-arrow"><Icon name="arrow-right" size={16} /></div>
      </article>
    );
  }

  // grid + mosaic share most markup
  return (
    <article
      className={`prod-card prod-card-${style || "grid"}`}
      style={{ '--prod-c': product.color }}
      onClick={() => onOpen(product)}
    >
      <div className="prod-head">
        <div className="prod-logo">{product.logo}</div>
        <StatusPill statusKey={product.status} statuses={statuses} compact />
      </div>
      <div className="prod-domain">{product.domain}</div>
      <h3>{product.name}</h3>
      <div className="prod-kicker">{product.kicker}</div>
      <p>{product.tagline}</p>

      <ProductScreenshot product={product} />

      {product.metrics && product.metrics.length > 0 && (
        <div className="prod-metrics">
          {product.metrics.slice(0, 3).map((m, i) => (
            <div className="m" key={i}>
              <div className="num">{m.num}</div>
              <div className="lab">{m.lab}</div>
            </div>
          ))}
        </div>
      )}

      <div className="prod-foot">
        <div className="prod-stack">
          {(product.stack || []).slice(0, 4).map((t, i) => <span className="tag" key={i}>{t}</span>)}
        </div>
        <div className="prod-cta">
          <span>Open product</span>
          <Icon name="arrow-right" size={12} />
        </div>
      </div>
    </article>
  );
};

// =========================================================
// PRODUCT MODAL (full product page in a sheet)
// =========================================================
const ProductDetailModal = ({ product, statuses, onClose }) => {
  useEffectP(() => {
    if (!product) return;
    const k = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", k);
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", k);
      document.body.style.overflow = "";
    };
  }, [product, onClose]);

  if (!product) return null;
  const p = product;

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal prod-modal" onClick={(e) => e.stopPropagation()} style={{ '--prod-c': p.color }}>
        <div className="prod-modal-hero">
          <div className="prod-modal-head">
            <div className="pmh-l">
              <div className="pmh-logo">{p.logo}</div>
              <div>
                <div className="pmh-kicker">{p.kicker} · {p.domain}</div>
                <h2>{p.name}</h2>
              </div>
            </div>
            <button className="modal-close" onClick={onClose}><Icon name="close" size={16} /></button>
          </div>
          <p className="pmh-tag">{p.tagline}</p>
          <div className="pmh-meta">
            <StatusPill statusKey={p.status} statuses={statuses} />
            {(p.metrics || []).slice(0, 3).map((m, i) => (
              <span key={i} className="pmh-metric"><strong>{m.num}</strong> {m.lab}</span>
            ))}
          </div>
        </div>

        <div className="prod-modal-body">
          <div className="prod-screenshot-large">
            <ProductScreenshot product={p} />
          </div>

          <div className="prod-grid-2">
            <section>
              <h4>The product</h4>
              <p>{p.hero}</p>
            </section>
            <section>
              <h4>Business problem</h4>
              <p>{p.businessProblem}</p>
            </section>
          </div>

          <section className="prod-block">
            <h4>Operational workflow</h4>
            <p className="prod-workflow">{p.operationalWorkflow}</p>
          </section>

          <div className="prod-grid-2">
            <section>
              <h4>Engineering goals</h4>
              <ul className="prod-bullets">
                {(p.engineeringGoals || []).map((g, i) => <li key={i}>{g}</li>)}
              </ul>
            </section>
            <section>
              <h4>Roadmap</h4>
              <div className="prod-roadmap">
                {(p.roadmap || []).map((r, i) => (
                  <div className="rm-row" key={i}>
                    <span className="rm-phase">{r.phase}</span>
                    <span className="rm-item">{r.item}</span>
                  </div>
                ))}
              </div>
            </section>
          </div>

          <section className="prod-block">
            <h4>Tech stack</h4>
            <div className="prod-stack-full">
              {(p.stack || []).map((t, i) => <span className="tag" key={i}>{t}</span>)}
            </div>
          </section>

          {p.frameworks && p.frameworks.length > 0 && (
            <section className="prod-block">
              <h4>Frameworks applied</h4>
              <div className="prod-frameworks">
                {p.frameworks.map((f, i) => (
                  <a key={i} href="#frameworks" className="prod-fw-tag">
                    <Icon name="blueprint" size={12} />
                    <span>{f}</span>
                  </a>
                ))}
              </div>
            </section>
          )}

          <section className="prod-block prod-cta-row">
            <a className="btn btn-accent" href={p.links?.demo || "#"} target="_blank" rel="noreferrer">
              <Icon name="external" size={13} /> Open demo
            </a>
            <a className="btn" href={p.links?.github || "#"} target="_blank" rel="noreferrer">
              <Icon name="github" size={13} /> Source on GitHub
            </a>
            <a className="btn" href={p.links?.pdf || "#"} target="_blank" rel="noreferrer">
              <Icon name="file" size={13} /> Architecture PDF
            </a>
            <button
              className="btn"
              onClick={() => {
                const text = `${p.name} — ${p.tagline}\n${p.hero}`;
                navigator.clipboard.writeText(text);
              }}
            >
              <Icon name="share" size={13} /> Copy share text
            </button>
          </section>
        </div>
      </div>
    </div>
  );
};

// =========================================================
// PRODUCT ECOSYSTEM SECTION
// =========================================================
const ProductEcosystem = ({ data, onEdit }) => {
  const p = data.products;
  if (!p || !p.items) return null;
  const cardStyle = data.settings?.productCardStyle || "grid";
  const [openProd, setOpenProd] = useStateP(null);
  const [statusFilter, setStatusFilter] = useStateP("all");

  const statuses = p.statuses || {};
  const statusKeys = ["all", ...Object.keys(statuses)];

  // Publishing-state gate: public visitors only see allowed statuses
  // (default "published"); admins see everything. Seed items without a
  // publishStatus are treated as published.
  const isAdmin = (typeof isAdminSession === "function") ? isAdminSession() : false;
  const allowedCfg = data.config?.publishing?.showOnPublic;
  const allowed = Array.isArray(allowedCfg) ? allowedCfg
    : typeof allowedCfg === "string" ? allowedCfg.split(",").map(s => s.trim()).filter(Boolean)
    : ["published"];
  const publishVisible = (p.items || []).filter(it => isAdmin ? true : allowed.includes(it.publishStatus || "published"));

  const filtered = publishVisible.filter(item =>
    statusFilter === "all" ? true : item.status === statusFilter
  );

  return (
    <Section
      id="products"
      eyebrow="04 · Product Ecosystem"
      title="Seven evolving"
      italic="operational platforms."
      sub={p.lead}
    >
      <Editable onEdit={() => onEdit("products")}>
        <div className="prod-controls">
          <div className="prod-filter">
            {statusKeys.map((k) => {
              const def = statuses[k];
              const label = k === "all" ? "All products" : def?.label || k;
              return (
                <button
                  key={k}
                  className={"prod-filter-chip" + (statusFilter === k ? " active" : "")}
                  onClick={() => setStatusFilter(k)}
                >
                  {k !== "all" && def && <span className="dot" style={{ background: def.dot }}></span>}
                  <span>{label}</span>
                  {k === "all" && <span className="ct">{p.items.length}</span>}
                  {k !== "all" && <span className="ct">{p.items.filter(it => it.status === k).length}</span>}
                </button>
              );
            })}
          </div>
        </div>

        <div className={`prod-grid prod-grid-${cardStyle}`}>
          {filtered.map((item) => (
            <ProductCard
              key={item.id}
              product={item}
              statuses={statuses}
              style={cardStyle}
              onOpen={setOpenProd}
            />
          ))}
          {filtered.length === 0 && (
            <div className="prod-empty">
              No products in <strong>{statuses[statusFilter]?.label}</strong>.
              Switch filter above.
            </div>
          )}
        </div>
      </Editable>

      <ProductDetailModal
        product={openProd}
        statuses={statuses}
        onClose={() => setOpenProd(null)}
      />
    </Section>
  );
};

Object.assign(window, {
  ProductEcosystem, ProductDetailModal, StatusPill, ProductCard
});