// License gate · first-launch activation screen.
// Blocks the entire app until a valid license code is entered.
// Code persists in localStorage; users can deactivate from Settings to transfer devices.

function LicenseGate({ children }) {
  const { state, setSetting } = useStore();
  const [input, setInput] = React.useState("");
  const [error, setError] = React.useState(null);
  const [activating, setActivating] = React.useState(false);

  const activated = isValidLicense(state.settings.aiLicenseCode || "");
  if (activated) return children;

  function tryActivate() {
    const code = input.trim().toUpperCase();
    setError(null);
    if (!code) { setError("Enter your license code."); return; }
    setActivating(true);
    // small delay for premium "verifying" feel
    setTimeout(() => {
      if (isValidLicense(code)) {
        setSetting("aiLicenseCode", code);
        // re-render will pass through to children
      } else {
        setError("That code isn't recognized. Double-check the receipt from your Etsy purchase.");
        setActivating(false);
      }
    }, 450);
  }

  return (
    <div className="exos-gate">
      <div className="exos-gate-bg" />
      <div className="exos-gate-card">
        <div className="exos-gate-mark">
          <svg width="32" height="32" viewBox="0 0 22 22" fill="none">
            <path d="M3 3 L19 19" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
            <path d="M19 3 L12 10" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
            <path d="M3 19 L7 15" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
            <circle cx="12" cy="10" r="1.6" fill="var(--accent)" />
          </svg>
        </div>
        <div className="exos-kicker mono" style={{ marginBottom: 14 }}>EXITOS · v1.0</div>
        <h1 className="exos-gate-title">Activate your copy.</h1>
        <p className="exos-gate-sub">
          Paste the license code from your Etsy purchase. It unlocks ExitOS on this device and stays in your browser. No account, no email, nothing uploaded.
        </p>

        <div className="exos-gate-input-wrap">
          <input
            className="exos-gate-input"
            value={input}
            onChange={e => setInput(e.target.value.toUpperCase())}
            onKeyDown={e => { if (e.key === "Enter") tryActivate(); }}
            placeholder="EXOS-XXXX-XXXX-XXXX"
            autoFocus
            spellCheck="false"
            autoCapitalize="characters"
            autoCorrect="off"
          />
        </div>

        {error && (
          <div className="exos-gate-error">
            <Icons.Warning size={13} />
            <span>{error}</span>
          </div>
        )}

        <button
          className="exos-gate-btn"
          onClick={tryActivate}
          disabled={activating || !input.trim()}
        >
          {activating ? "Verifying…" : "Activate"}
        </button>

        <details className="exos-gate-help">
          <summary>Can't find your code?</summary>
          <div className="exos-gate-help-body">
            <p>
              After purchasing on Etsy, you'll receive an email with your unique activation code.
              It looks like <span className="mono">EXOS-XXXX-XXXX-XXXX</span>.
            </p>
            <p>
              Lost the email? Message the shop from your Etsy purchase page · we'll re-send it.
            </p>
          </div>
        </details>

        <div className="exos-gate-foot">
          <div className="exos-gate-foot-row">
            <span className="exos-gate-dot" />
            <span className="mono">stored locally · no accounts · no servers</span>
          </div>
        </div>
      </div>
    </div>
  );
}

const GATE_STYLES = `
.exos-gate {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  background: var(--bg);
  padding: 24px;
  padding-top: max(24px, env(safe-area-inset-top));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  overflow-y: auto;
}
.exos-gate-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 0%, oklch(from var(--accent) l c h / 0.10), transparent 40%),
    radial-gradient(circle at 80% 100%, oklch(from var(--accent) l c h / 0.06), transparent 50%),
    repeating-linear-gradient(0deg, transparent, transparent 79px, var(--line) 79px, var(--line) 80px),
    repeating-linear-gradient(90deg, transparent, transparent 79px, var(--line) 79px, var(--line) 80px);
  opacity: 0.5;
  mask: radial-gradient(ellipse at center, black 0%, transparent 70%);
  -webkit-mask: radial-gradient(ellipse at center, black 0%, transparent 70%);
  pointer-events: none;
}
.exos-gate-card {
  position: relative; z-index: 1;
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  padding: 36px 32px 28px;
  width: 100%; max-width: 440px;
  box-shadow: var(--shadow-lg);
  animation: gate-in .4s cubic-bezier(.16,1,.3,1);
}
.exos-gate-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent 70%);
  border-radius: 18px 18px 0 0;
}
@keyframes gate-in {
  from { transform: translateY(12px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.exos-gate-mark {
  width: 48px; height: 48px;
  background: var(--bg-elev-2); border: 1px solid var(--line);
  border-radius: 12px;
  display: grid; place-items: center;
  margin-bottom: 22px;
  color: var(--text);
}
.exos-gate-title {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.exos-gate-sub {
  margin: 0 0 22px;
  font-size: 14px;
  color: var(--text-mute);
  line-height: 1.55;
}

.exos-gate-input-wrap {
  position: relative;
  margin-bottom: 12px;
}
.exos-gate-input {
  width: 100%; height: 50px;
  background: var(--bg); border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 0 16px;
  font-family: "Geist Mono", monospace;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.exos-gate-input::placeholder {
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.exos-gate-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.exos-gate-error {
  display: flex; gap: 8px; align-items: center;
  padding: 9px 12px; margin-bottom: 12px;
  background: var(--loss-soft); color: var(--loss);
  border-radius: 8px;
  font-size: 12.5px; line-height: 1.45;
}
.exos-gate-error svg { flex-shrink: 0; }

.exos-gate-btn {
  width: 100%; height: 50px;
  background: var(--accent); color: white;
  border: 1px solid var(--accent);
  border-radius: 10px;
  font-size: 15px; font-weight: 500;
  cursor: pointer;
  transition: filter .15s, transform .1s;
  font-family: inherit;
}
.exos-gate-btn:hover:not(:disabled) { filter: brightness(1.08); }
.exos-gate-btn:active:not(:disabled) { transform: translateY(0.5px); }
.exos-gate-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.exos-gate-help {
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--text-mute);
}
.exos-gate-help summary {
  cursor: pointer;
  user-select: none;
  list-style: none;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  transition: color .12s;
}
.exos-gate-help summary::-webkit-details-marker { display: none; }
.exos-gate-help summary::after {
  content: "+";
  float: right;
  font-family: "Geist Mono", monospace;
  color: var(--text-dim);
}
.exos-gate-help[open] summary::after { content: "−"; }
.exos-gate-help summary:hover { color: var(--text); }
.exos-gate-help-body { padding-top: 10px; line-height: 1.55; }
.exos-gate-help-body p { margin: 0 0 8px; }

.exos-gate-foot {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.exos-gate-foot-row {
  display: flex; gap: 8px; align-items: center;
  font-size: 10.5px; color: var(--text-dim);
  letter-spacing: 0.04em;
}
.exos-gate-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gain);
  animation: pulse-dot 1.8s ease-in-out infinite;
}

@media (max-width: 540px) {
  .exos-gate-card { padding: 28px 22px 22px; }
  .exos-gate-title { font-size: 24px; }
}
`;
(function(){ if(document.getElementById("exos-gate-styles")) return; const t=document.createElement("style"); t.id="exos-gate-styles"; t.textContent=GATE_STYLES; document.head.appendChild(t); })();

window.LicenseGate = LicenseGate;