// PortalTable — "Made with PortalTable" attribution badge for free-plan portals.
// Webflow-style floating pill shown in the corner of every client portal while
// the workspace is on the free plan. Brand mark uses FIXED colors so the badge
// reads identically on light or dark portals. Depends on React (global) +
// pd-tokens.css for theme vars (.pd-ink remaps a subtree to dark).

const { useState: useStateFB } = React;

const PT_INK = "#14161A";
const PT_ACCENT = "#D7FF3A";
const ACCENT_INK = "#16180F";

/* Brand mark — 2×2 grid, one chartreuse cell. Theme-adaptive (var tokens) so it
   reads on the white pill and the dark-portal pill alike. */
function BadgeMark({ size = 20 }) {
  const pos = [0, 17];
  const cells = [];
  pos.forEach((x, ci) => pos.forEach((y, ri) => {
    const lit = ci === 0 && ri === 0;
    cells.push(<rect key={ci + "-" + ri} x={x} y={y} width="13" height="13" rx="3.4" fill={lit ? "var(--accent)" : "var(--fg-1)"} />);
  }));
  return (
    <svg width={size} height={size} viewBox="0 0 30 30" fill="none" aria-hidden="true" style={{ display: "block", flexShrink: 0 }}>
      {cells}
    </svg>
  );
}

/* -------------------------------------------------------------------------- */
/* Default pill — mark + "Made with PortalTable". Hover lifts (no scale).       */
/* -------------------------------------------------------------------------- */
function FreeBadge() {
  const [hover, setHover] = useStateFB(false);
  return (
    <a href="https://portaltable.com" target="_blank" rel="noopener noreferrer"
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        display: "inline-flex", alignItems: "center", gap: 8,
        padding: "7px 13px 7px 9px", background: "var(--ink-900)",
        border: `1px solid ${hover ? "var(--line-4)" : "var(--line-3)"}`,
        borderRadius: 10, textDecoration: "none",
        boxShadow: hover ? "var(--pd-shadow-lg)" : "var(--pd-shadow-md)",
        transition: "border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out)",
      }}>
      <BadgeMark size={20} />
      <span style={{ fontSize: 12.5, color: "var(--fg-2)", whiteSpace: "nowrap", lineHeight: 1, letterSpacing: "-0.005em" }}>
        Made with <span style={{ fontWeight: 600, color: "var(--fg-1)" }}>PortalTable</span>
      </span>
    </a>
  );
}

/* -------------------------------------------------------------------------- */
/* Compact — mark only, tooltip on hover. Smallest footprint.                  */
/* -------------------------------------------------------------------------- */
function FreeBadgeCompact() {
  const [hover, setHover] = useStateFB(false);
  return (
    <a href="https://portaltable.com" target="_blank" rel="noopener noreferrer"
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ position: "relative", display: "inline-flex", padding: 7, background: "var(--ink-900)",
        border: `1px solid ${hover ? "var(--line-4)" : "var(--line-3)"}`, borderRadius: 10,
        boxShadow: hover ? "var(--pd-shadow-lg)" : "var(--pd-shadow-md)", textDecoration: "none",
        transition: "border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out)" }}>
      <BadgeMark size={22} />
      <span style={{
        position: "absolute", bottom: "calc(100% + 8px)", right: 0, whiteSpace: "nowrap",
        background: "var(--fg-1)", color: "var(--ink-900)", fontSize: 11.5, fontWeight: 500,
        padding: "5px 9px", borderRadius: 7, pointerEvents: "none",
        opacity: hover ? 1 : 0, transform: hover ? "none" : "translateY(3px)",
        transition: "opacity 150ms var(--ease-out), transform 150ms var(--ease-out)",
      }}>Made with PortalTable</span>
    </a>
  );
}

/* -------------------------------------------------------------------------- */
/* Owner control — what the agency owner sees in portal settings (the upsell)  */
/* -------------------------------------------------------------------------- */
function BadgeSettingRow() {
  const [hover, setHover] = useStateFB(false);
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 16, padding: 18, background: "var(--ink-900)",
      border: "1px solid var(--line-2)", borderRadius: 12, boxShadow: "var(--pd-shadow-sm)", maxWidth: 540, width: "100%", boxSizing: "border-box" }}>
      <div style={{ flexShrink: 0 }}><FreeBadge /></div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 14, fontWeight: 600, color: "var(--fg-1)" }}>PortalTable badge</div>
        <div style={{ fontSize: 12.5, color: "var(--fg-3)", marginTop: 3, lineHeight: 1.45 }}>
          Shown on every client portal on the free plan. Upgrade to Pro to remove it.
        </div>
      </div>
      <button onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
        style={{ flexShrink: 0, display: "inline-flex", alignItems: "center", gap: 7, height: 38, padding: "0 16px",
          background: hover ? "var(--accent-hover)" : "var(--accent)", color: "var(--accent-ink)", border: 0,
          borderRadius: 8, fontFamily: "inherit", fontSize: 13.5, fontWeight: 600, cursor: "pointer", whiteSpace: "nowrap",
          transition: "background 150ms var(--ease-out)" }}>
        Upgrade to Pro
      </button>
    </div>
  );
}

/* -------------------------------------------------------------------------- */
/* Portal scene — realistic client-portal corner so the badge has context      */
/* -------------------------------------------------------------------------- */
function PortalScene({ dark = false, children }) {
  const initials = "NW";
  return (
    <div className={dark ? "pd-ink" : ""} style={{ position: "relative", width: "100%", height: "100%",
      background: "var(--ink-950)", overflow: "hidden", display: "flex", flexDirection: "column" }}>
      {/* portal header — the agency's brand, in their accent */}
      <div style={{ display: "flex", alignItems: "center", gap: 11, padding: "13px 18px", background: PT_ACCENT, color: ACCENT_INK }}>
        <span style={{ width: 28, height: 28, borderRadius: 8, display: "grid", placeItems: "center", background: "rgba(0,0,0,0.16)", fontSize: 13, fontWeight: 700 }}>{initials}</span>
        <span style={{ fontSize: 15, fontWeight: 600, letterSpacing: "-0.01em" }}>Northwind Studio</span>
        <span style={{ marginLeft: "auto", display: "flex", gap: 18, fontSize: 12.5, opacity: 0.82 }}>
          <span>Projects</span><span>Invoices</span><span>Files</span>
        </span>
      </div>

      {/* portal body */}
      <div style={{ flex: 1, padding: 22 }}>
        <div style={{ fontSize: 17, fontWeight: 600, letterSpacing: "-0.02em", color: "var(--fg-1)" }}>Welcome back, Ada</div>
        <div style={{ fontSize: 13, color: "var(--fg-3)", marginTop: 3 }}>Here's what's moving on your projects.</div>
        <div style={{ display: "flex", gap: 12, marginTop: 18, maxWidth: 420 }}>
          {[{ l: "In review", v: "3" }, { l: "Due soon", v: "1" }, { l: "Outstanding", v: "$4.2k" }].map((s) => (
            <div key={s.l} style={{ flex: 1, background: "var(--ink-900)", border: "1px solid var(--line-2)", boxShadow: "var(--pd-shadow-xs)", borderRadius: 10, padding: "13px 14px" }}>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: "0.06em", color: "var(--fg-3)", textTransform: "uppercase" }}>{s.l}</div>
              <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: "-0.03em", color: "var(--fg-1)", marginTop: 6, fontVariantNumeric: "tabular-nums" }}>{s.v}</div>
            </div>
          ))}
        </div>
      </div>

      {/* the badge, pinned bottom-right like Webflow */}
      <div style={{ position: "absolute", right: 18, bottom: 18 }}>{children}</div>
    </div>
  );
}

Object.assign(window, { BadgeMark, FreeBadge, FreeBadgeCompact, BadgeSettingRow, PortalScene });