/* ============================================================
   EBTR — Author Portal: shared UI
   Header, status pill, thumbnail, the sign-on screen, and the
   tone & style-guide drawer (always reachable while writing).
   ============================================================ */
const { Button: PBtn, Badge: PBadge, Input: PInput, ThreeBar: PBar, Eyebrow: PEyebrow, Stat: PStat, Card: PCard } = window.EBTHubDesignSystem_ccdc9d;

const PACCENT = { purple: "var(--ebt-purple)", blue: "var(--ebt-blue)", orange: "var(--ebt-orange)", stone: "var(--neutral-400)" };

/* Small gradient thumbnail (same visual language as the Review covers) */
function PThumb({ accent = "blue", size = 56 }) {
  const c = PACCENT[accent] || PACCENT.blue;
  return (
    <div style={{ width: size, height: size, flex: "none", position: "relative", overflow: "hidden", background: `radial-gradient(120% 120% at 70% 15%, ${c} 0%, rgba(0,0,0,0.65) 95%)`, border: "1px solid var(--border-hairline)" }}>
      <div style={{ position: "absolute", left: 0, bottom: 0, display: "flex", width: size * 0.5, height: 3 }}>
        <span style={{ flex: 1, background: "var(--bar-1)" }} />
        <span style={{ flex: 1, background: "var(--bar-2)" }} />
        <span style={{ flex: 1, background: "var(--bar-3)" }} />
      </div>
    </div>
  );
}

function PStatus({ status, size = "md" }) {
  const s = window.EBTR_AUTHOR.statuses[status];
  if (!s) return null;
  return <PBadge variant={s.variant} shape="square" size={size}>{s.label}</PBadge>;
}

/* Portal header */
function PHeader({ me, onHome, onNew, onGuide, onProfile, onSignOut }) {
  const [menu, setMenu] = React.useState(false);
  return (
    <header style={{ position: "sticky", top: 0, zIndex: 40, background: "rgba(20,18,18,0.9)", backdropFilter: "blur(10px)", borderBottom: "1px solid var(--border-hairline)" }}>
      <div style={{ maxWidth: 1600, margin: "0 auto", padding: "0 var(--space-7)", height: 72, display: "flex", alignItems: "center", gap: 24 }} className="pf-hdr">
        <button onClick={onHome} style={{ display: "flex", alignItems: "center", gap: 14, background: "none", border: "none", padding: 0, cursor: "pointer", flex: "none" }}>
          <PBar orientation="vertical" thickness={10} />
          <div style={{ textAlign: "left", lineHeight: 1.1 }}>
            <div style={{ fontFamily: "var(--font-ui)", fontSize: 19, color: "var(--white)", letterSpacing: "0.12em" }}>EBT<span style={{ color: "var(--ebt-stone)", margin: "0 1px" }}>·</span>HUB</div>
            <div style={{ fontFamily: "var(--font-ui)", fontSize: 9.5, letterSpacing: "0.42em", color: "var(--ebt-orange)", marginTop: 5, textTransform: "uppercase" }}>Authors</div>
          </div>
        </button>

        {/* Desktop actions */}
        <div className="pf-actions" style={{ display: "flex", alignItems: "center", gap: 18, marginLeft: "auto", flex: "none" }}>
          <button onClick={onGuide} className="pf-link" style={{ background: "none", border: "none", cursor: "pointer", fontFamily: "var(--font-ui)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--text-secondary)" }}>Style guide</button>
          <PBtn variant="primary" size="sm" icon="none" onClick={onNew}>+ New</PBtn>
          <div style={{ width: 1, height: 28, background: "var(--border-hairline)" }} />
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <button onClick={onProfile} className="pf-link" style={{ background: "none", border: "none", cursor: "pointer", fontFamily: "var(--font-ui)", fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--text-secondary)" }}>Profile</button>
            <span style={{ width: 1, height: 18, background: "var(--border-hairline)" }}></span>
            <button onClick={onSignOut} className="pf-link" title="Sign out" style={{ background: "none", border: "none", cursor: "pointer", fontFamily: "var(--font-ui)", fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--text-muted)" }}>Sign out</button>
          </div>
        </div>

        {/* Mobile burger */}
        <button className="pf-burger" onClick={() => setMenu((v) => !v)} aria-label="Menu" style={{ display: "none", marginLeft: "auto", flex: "none", width: 38, height: 38, alignItems: "center", justifyContent: "center", background: "none", border: "1px solid var(--border-hairline)", borderRadius: 2, cursor: "pointer", color: "var(--white)" }}>
          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 6h18M3 12h18M3 18h18" /></svg>
        </button>
      </div>

      {/* Mobile dropdown */}
      {menu && (
        <div className="pf-menu" style={{ borderTop: "1px solid var(--border-hairline)", background: "var(--ebt-ink)", padding: "10px var(--space-7) 18px", display: "flex", flexDirection: "column", gap: 4 }}>
          <button onClick={() => { setMenu(false); onNew(); }} style={pfMenuItem(true)}>+ New submission</button>
          <button onClick={() => { setMenu(false); onGuide(); }} style={pfMenuItem()}>Style guide</button>
          <button onClick={() => { setMenu(false); onProfile(); }} style={pfMenuItem()}>Profile</button>
          <button onClick={() => { setMenu(false); onSignOut(); }} style={pfMenuItem()}>Sign out</button>
        </div>
      )}
    </header>
  );
}
function pfMenuItem(primary) {
  return { textAlign: "left", background: primary ? "var(--ebt-orange)" : "none", border: "none", borderBottom: primary ? "none" : "1px solid var(--border-hairline)", padding: primary ? "13px 14px" : "13px 2px", cursor: "pointer", fontFamily: "var(--font-ui)", fontSize: 12, letterSpacing: "0.08em", textTransform: "uppercase", color: primary ? "var(--neutral-1000)" : "var(--text-secondary)" };
}

/* Sign-on screen (Submittable-style, EBTHub dark) */
function PAuth({ onContinue, onSendLink, live }) {
  const [email, setEmail] = React.useState("");
  return (
    <div style={{ minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center", padding: 24, background: "radial-gradient(120% 90% at 50% -10%, rgba(29,56,220,0.18), transparent 60%), var(--ebt-ink)" }}>
      <div style={{ width: "100%", maxWidth: 460 }}>
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginBottom: 30 }}>
          <PBar orientation="vertical" thickness={16} />
          <div style={{ fontFamily: "var(--font-ui)", fontSize: 22, color: "var(--white)", letterSpacing: "0.12em", marginTop: 18 }}>EBT<span style={{ color: "var(--ebt-stone)", margin: "0 1px" }}>·</span>HUB</div>
          <div style={{ fontFamily: "var(--font-ui)", fontSize: 10, letterSpacing: "0.42em", color: "var(--ebt-orange)", marginTop: 6, textTransform: "uppercase" }}>Authors</div>
        </div>
        <div style={{ background: "var(--surface-raised)", border: "1px solid var(--border-hairline)", borderTop: "3px solid var(--ebt-orange)", padding: "38px 36px 40px" }}>
          <h1 style={{ fontFamily: "var(--font-ui)", fontSize: 30, letterSpacing: "0.02em", textTransform: "uppercase", color: "var(--white)", margin: "0 0 10px" }}>Welcome</h1>
          <p style={{ fontFamily: "var(--font-body)", fontSize: 15.5, lineHeight: 1.6, color: "var(--text-secondary)", margin: "0 0 24px" }}>
            Sign in to pitch, submit and track your work through editorial review.
          </p>
          <button onClick={onContinue} style={{ width: "100%", display: "flex", alignItems: "center", justifyContent: "center", gap: 11, background: "var(--white)", border: "none", borderRadius: "var(--radius-sm)", padding: "13px 16px", cursor: "pointer", fontFamily: "var(--font-ui)", fontSize: 13, color: "#1f1f1f" }}>
            <svg width="17" height="17" viewBox="0 0 24 24" aria-hidden="true"><path fill="#4285F4" d="M23.5 12.27c0-.79-.07-1.54-.2-2.27H12v4.51h6.47a5.53 5.53 0 0 1-2.4 3.63v3h3.88c2.27-2.09 3.55-5.17 3.55-8.87z"/><path fill="#34A853" d="M12 24c3.24 0 5.95-1.08 7.95-2.91l-3.88-3c-1.08.72-2.45 1.16-4.07 1.16-3.13 0-5.78-2.11-6.73-4.96H1.29v3.09A12 12 0 0 0 12 24z"/><path fill="#FBBC05" d="M5.27 14.29A7.21 7.21 0 0 1 4.89 12c0-.8.14-1.57.38-2.29V6.62H1.29A12 12 0 0 0 0 12c0 1.94.46 3.77 1.29 5.38l3.98-3.09z"/><path fill="#EA4335" d="M12 4.75c1.77 0 3.35.61 4.6 1.8l3.43-3.43C17.95 1.19 15.24 0 12 0A12 12 0 0 0 1.29 6.62l3.98 3.09C6.22 6.86 8.87 4.75 12 4.75z"/></svg>
            Continue with EBTHub email
          </button>
          <div style={{ fontFamily: "var(--font-ui)", fontSize: 10.5, letterSpacing: "0.03em", color: "var(--text-muted)", textAlign: "center", margin: "9px 0 2px" }}>For @ebthub.com authors · Google sign-in</div>
          <div style={{ display: "flex", alignItems: "center", gap: 14, margin: "22px 0", color: "var(--text-muted)", fontFamily: "var(--font-ui)", fontSize: 9.5, letterSpacing: "0.14em" }}>
            <div style={{ flex: 1, height: 1, background: "var(--border-hairline)" }} /> EXTERNAL AUTHOR <div style={{ flex: 1, height: 1, background: "var(--border-hairline)" }} />
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <PInput label="Invited author email" type="email" placeholder="you@company.com" value={email} onChange={(e) => setEmail(e.target.value)} />
            <PBtn variant="ghost" size="md" icon="none" onClick={() => (onSendLink ? onSendLink(email) : onContinue())}>Email me a sign-in link</PBtn>
          </div>
        </div>
        <p style={{ textAlign: "center", marginTop: 22, fontFamily: "var(--font-ui)", fontSize: 10, letterSpacing: "0.08em", color: "var(--text-muted)" }}>EBTHub — Vienna · Selective. Pitches reviewed within 14 days.</p>
      </div>
    </div>
  );
}

/* Tone & style guide drawer */
function PGuideDrawer({ open, onClose }) {
  const g = window.EBTR_AUTHOR.guide;
  return (
    <React.Fragment>
      <div onClick={onClose} style={{ position: "fixed", inset: 0, zIndex: 90, background: "rgba(8,8,10,0.6)", backdropFilter: "blur(3px)", opacity: open ? 1 : 0, pointerEvents: open ? "auto" : "none", transition: "opacity var(--dur-base)" }} />
      <aside style={{ position: "fixed", top: 0, right: 0, bottom: 0, width: "min(520px, 92vw)", zIndex: 91, background: "var(--surface-raised)", borderLeft: "1px solid var(--border-hairline)", boxShadow: "var(--shadow-lg)", transform: open ? "none" : "translateX(100%)", transition: "transform var(--dur-slow) var(--ease-out)", overflowY: "auto" }}>
        <div style={{ position: "sticky", top: 0, background: "var(--surface-raised)", borderBottom: "1px solid var(--border-hairline)", padding: "22px 28px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <div><PEyebrow color="orange">Before you submit</PEyebrow><div style={{ fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 22, color: "var(--white)", marginTop: 8 }}>Tone & style guide</div></div>
          <button onClick={onClose} style={{ background: "none", border: "none", color: "var(--text-muted)", cursor: "pointer", fontSize: 22, fontFamily: "var(--font-ui)" }}>✕</button>
        </div>
        <div style={{ padding: "28px" }}>
          <p style={{ fontFamily: "var(--font-body)", fontSize: 15.5, lineHeight: 1.6, color: "var(--text-secondary)", margin: "0 0 28px" }}>Every word — pitch, draft, headline — passes all three filters. If a sentence doesn't, cut it.</p>
          {g.filters.map((f, i) => (
            <div key={i} style={{ marginBottom: 22, paddingBottom: 22, borderBottom: "1px solid var(--border-hairline)" }}>
              <div style={{ fontFamily: "var(--font-ui)", fontSize: 13, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--white)", marginBottom: 8 }}>{i + 1}. {f.name}</div>
              <p style={{ fontFamily: "var(--font-body)", fontSize: 15, lineHeight: 1.55, color: "var(--text-secondary)", margin: "0 0 14px" }}>{f.rule}</p>
              <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                <div style={{ display: "grid", gridTemplateColumns: "18px 1fr", gap: 10, fontFamily: "var(--font-body)", fontSize: 14, color: "var(--text-muted)" }}><span style={{ color: "var(--ebt-orange)" }}>✕</span><span>{f.bad}</span></div>
                <div style={{ display: "grid", gridTemplateColumns: "18px 1fr", gap: 10, fontFamily: "var(--font-body)", fontSize: 14, color: "var(--neutral-100)" }}><span style={{ color: "var(--blue-400)" }}>→</span><span>{f.good}</span></div>
              </div>
            </div>
          ))}
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20, marginBottom: 24 }}>
            <div>
              <div style={{ fontFamily: "var(--font-ui)", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--blue-400)", marginBottom: 12 }}>Words we use</div>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>{g.use.map((w) => <span key={w} style={{ fontFamily: "var(--font-ui)", fontSize: 10.5, color: "var(--text-secondary)", border: "1px solid var(--border-hairline)", padding: "4px 9px" }}>{w}</span>)}</div>
            </div>
            <div>
              <div style={{ fontFamily: "var(--font-ui)", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ebt-orange)", marginBottom: 12 }}>Words we avoid</div>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>{g.avoid.map((w) => <span key={w} style={{ fontFamily: "var(--font-ui)", fontSize: 10.5, color: "var(--text-muted)", border: "1px solid var(--border-hairline)", padding: "4px 9px", textDecoration: "line-through" }}>{w}</span>)}</div>
            </div>
          </div>
          <div style={{ background: "rgba(29,56,220,0.08)", border: "1px solid rgba(29,56,220,0.4)", padding: "18px 20px" }}>
            <div style={{ fontFamily: "var(--font-ui)", fontSize: 10.5, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--blue-400)", marginBottom: 8 }}>Casing & numbers</div>
            <p style={{ fontFamily: "var(--font-body)", fontSize: 14, lineHeight: 1.55, color: "var(--neutral-100)", margin: 0 }}>{g.casing}</p>
          </div>
        </div>
      </aside>
    </React.Fragment>
  );
}

Object.assign(window, { PThumb, PStatus, PHeader, PAuth, PGuideDrawer, PACCENT, PBtn, PBadge, PInput, PBar, PEyebrow, PStat, PCard });