// Right rail — alerts, saved searches, activity

const alertStyles = `
  .right-rail {
    width: var(--right-w);
    border-left: 1px solid var(--line);
    background: var(--surface-2);
    height: calc(100vh - var(--header-h));
    position: sticky; top: var(--header-h);
    display: flex; flex-direction: column;
    flex: none;
  }
  .right-tabs {
    display: flex;
    border-bottom: 1px solid var(--line);
    padding: 0 12px;
    gap: 2px;
  }
  .right-tabs button {
    padding: 12px 10px 10px;
    background: transparent;
    border: 0;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    display: inline-flex; align-items: center; gap: 5px;
  }
  .right-tabs button:hover { color: var(--ink-2); }
  .right-tabs button.active { color: var(--ink); border-bottom-color: var(--ink); }
  .right-tabs button .num {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--muted);
    background: var(--bg-sunken);
    padding: 1px 5px;
    border-radius: 8px;
    margin-left: 2px;
  }
  .right-body {
    flex: 1; overflow-y: auto;
  }

  /* alert card */
  .alert-card {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    position: relative;
    transition: background .12s;
    cursor: pointer;
  }
  .alert-card:hover { background: var(--surface); }
  .alert-card.disabled { opacity: 0.58; }
  .alert-card .a-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    margin-bottom: 5px;
  }
  .alert-card .a-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    display: flex; align-items: center; gap: 7px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .alert-card .prio-dot {
    width: 6px; height: 6px; border-radius: 50%;
    flex: none;
  }
  .alert-card .prio-dot.high { background: var(--accent); }
  .alert-card .prio-dot.med { background: var(--info); }
  .alert-card .prio-dot.low { background: var(--faint); }

  .alert-card .a-crit {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted);
    padding: 6px 8px;
    background: var(--bg-soft);
    border-radius: 4px;
    margin-top: 4px;
    line-height: 1.4;
  }
  .alert-card .a-foot {
    margin-top: 8px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    color: var(--muted);
  }
  .a-ch {
    display: inline-flex; align-items: center; gap: 4px;
  }
  .a-ch .ico {
    width: 18px; height: 18px;
    border-radius: 4px;
    background: var(--bg-sunken);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink-2);
    border: 1px solid var(--line);
  }

  /* create alert box */
  .create-alert {
    margin: 14px;
    padding: 14px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--r);
    background: linear-gradient(180deg, var(--accent-tint) 0%, transparent 120%);
  }
  [data-theme="dim"] .create-alert {
    background: linear-gradient(180deg, rgba(184,137,58,0.08) 0%, transparent 120%);
  }
  .create-alert h4 {
    margin: 0 0 4px;
    font-family: var(--font-serif);
    font-size: 18px;
    letter-spacing: -0.01em;
    font-weight: 400;
    color: var(--ink);
  }
  .create-alert .t {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 10px;
    line-height: 1.4;
  }

  /* activity */
  .act-row {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 10px;
    padding: 9px 14px;
    font-size: 12px;
    border-bottom: 1px dashed var(--line);
  }
  .act-row:last-child { border-bottom: 0; }
  .act-row .t {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--muted);
    padding-top: 2px;
    letter-spacing: 0.02em;
  }
  .act-row .msg { color: var(--ink-2); line-height: 1.4; }
  .act-row .pin {
    display: inline-block;
    width: 5px; height: 5px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
  }
  .act-row .pin.ok { background: var(--live); }
  .act-row .pin.match { background: var(--accent); }
  .act-row .pin.alert { background: var(--hot); }
  .act-row .pin.info { background: var(--faint); }

  /* saved searches */
  .saved-row {
    display: grid;
    grid-template-columns: 4px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px dashed var(--line);
    cursor: pointer;
    transition: background .12s;
  }
  .saved-row:hover { background: var(--surface); }
  .saved-row .stripe { width: 4px; height: 22px; border-radius: 2px; }
  .saved-row .sn { font-size: 13px; color: var(--ink); font-weight: 500; }
  .saved-row .sc { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }

  .match-spark {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
  }
  .spark-svg {
    width: 100%; height: 42px;
    display: block;
    margin-top: 6px;
  }

  /* history rows */
  .hist-row { padding: 11px 14px; border-bottom: 1px dashed var(--line); }
  .hist-row .h-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .hist-row .h-rule { font-size: 12.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hist-row .h-item { font-size: 11.5px; color: var(--ink-2); margin-top: 4px; }
  .hist-row .h-meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); margin-top: 4px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .dstatus { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.04em; }
  .dstatus .dd { width: 5px; height: 5px; border-radius: 50%; }
  .dstatus.sent { background: var(--live-soft); color: var(--live); } .dstatus.sent .dd { background: var(--live); }
  .dstatus.pending { background: var(--accent-tint); color: var(--accent-deep); } .dstatus.pending .dd { background: var(--accent); animation: blink-soft 1.4s infinite; }
  .dstatus.failed { background: var(--hot-soft); color: var(--hot); } .dstatus.failed .dd { background: var(--hot); }

  /* channel rows */
  .chan-row { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-bottom: 1px dashed var(--line); }
  .chan-row .ch-ic { width: 32px; height: 32px; border-radius: 8px; background: var(--bg-sunken); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--ink-2); flex: none; }
  .chan-row.discord .ch-ic { background: #5865F2; color: #fff; border-color: #4651cf; }
  .chan-row .ch-body { flex: 1; min-width: 0; }
  .chan-row .ch-name { font-size: 13px; font-weight: 500; color: var(--ink); }
  .chan-row .ch-sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); margin-top: 2px; }
  .chan-row.soon { opacity: 0.62; }

  /* anon gate panel */
  .rail-gate { padding: 22px 18px; display: flex; flex-direction: column; gap: 16px; }
  .rail-gate .g-hero {
    border: 1px solid var(--accent-soft); border-radius: var(--r-lg);
    background: linear-gradient(160deg, var(--accent-tint), var(--surface) 130%);
    padding: 18px;
  }
  [data-theme="dim"] .rail-gate .g-hero { background: linear-gradient(160deg, rgba(184,137,58,0.1), var(--surface) 130%); }
  .rail-gate .g-hero h3 { margin: 0 0 6px; font-family: var(--font-serif); font-size: 22px; font-weight: 400; letter-spacing: -0.01em; color: var(--ink); }
  .rail-gate .g-hero p { margin: 0 0 14px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
  .rail-gate .g-list { display: flex; flex-direction: column; gap: 11px; }
  .rail-gate .g-item { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--ink-2); }
  .rail-gate .g-item .gi { width: 22px; height: 22px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--accent-deep); flex: none; }
  .rail-gate .g-item b { color: var(--ink); }
`;

if (!document.getElementById("alerts-styles")) {
  const s = document.createElement("style");
  s.id = "alerts-styles";
  s.textContent = alertStyles;
  document.head.appendChild(s);
}

const ChannelIcon = ({ ch }) => {
  const icons = {
    discord: <I.hash size={10}/>, discord_webhook: <I.hash size={10}/>,
    email: <I.mail size={10}/>, web_push: <I.bell size={10}/>,
  };
  return <span className="ico" title={ch}>{icons[ch] || <I.bell size={10}/>}</span>;
};

const AlertCard = ({ alert, onToggle, onOpen }) => (
  <div className={`alert-card ${alert.enabled ? "" : "disabled"}`} onClick={onOpen}>
    <div className="a-top">
      <div className="a-name">
        <span className={`prio-dot ${alert.tier === "offer" ? "high" : alert.tier === "deal" ? "med" : "low"}`}/>
        {alert.name}
      </div>
      <Toggle on={alert.enabled} onChange={()=>onToggle(alert.id)} variant="accent"/>
    </div>
    <div className="a-crit">{alert.criteria}</div>
    <div className="a-foot">
      <div className="a-ch">
        {alert.channels.map(ch => <ChannelIcon key={ch} ch={ch}/>)}
        <span style={{fontSize:10, color:"var(--muted-2)", marginLeft:2, fontFamily:"var(--font-mono)"}}>v{alert.version}</span>
      </div>
      <div className="mono" style={{fontSize:10.5}}>
        {alert.matches24h} · 24h · {alert.lastTriggered}
      </div>
    </div>
  </div>
);

const HistoryRow = ({ h }) => (
  <div className="hist-row">
    <div className="h-top">
      <div className="h-rule">{h.rule} <span style={{color:"var(--muted-2)", fontFamily:"var(--font-mono)", fontSize:10}}>v{h.ruleVersion}</span></div>
      <span className={`dstatus ${h.status}`}><span className="dd"/>{h.status}</span>
    </div>
    <div className="h-item">{h.item} · <span style={{color: h.ratio < 1 ? "var(--accent-deep)" : "var(--ink-2)", fontWeight:600, fontFamily:"var(--font-mono)"}}>{h.ratio.toFixed(2)}×</span></div>
    <div className="h-meta">
      <ChannelIcon ch={h.channel}/>
      <span>{h.channel.replace("_"," ")}</span>
      <span>· {h.sentAt}</span>
      {h.attempts > 1 && <span>· {h.attempts} attempts</span>}
      {h.nextRetry && <span style={{color:"var(--accent-deep)"}}>· retry {h.nextRetry}</span>}
      {h.error && <span style={{color:"var(--hot)"}}>· {h.error}</span>}
    </div>
  </div>
);

const ChannelRow = ({ c }) => {
  const isDiscord = c.type === "discord_webhook";
  const soon = c.status === "coming_soon";
  return (
    <div className={`chan-row ${isDiscord ? "discord" : ""} ${soon ? "soon" : ""}`}>
      <span className="ch-ic">{isDiscord ? <I.hash size={15}/> : c.type === "email" ? <I.mail size={15}/> : <I.bell size={15}/>}</span>
      <div className="ch-body">
        <div className="ch-name">{c.label}</div>
        <div className="ch-sub">{c.type.replace("_"," ")}{c.fingerprint ? ` · ${c.fingerprint}` : ""}</div>
      </div>
      {soon
        ? <Badge tone="outline">soon</Badge>
        : <div style={{display:"flex", gap:6, alignItems:"center"}}>
            <button className="btn xs ghost" title="Send test"><I.bolt size={11}/></button>
            <Toggle on={c.enabled} onChange={()=>{}} variant="accent"/>
          </div>}
    </div>
  );
};

const RailGate = ({ onSignIn }) => (
  <div className="rail-gate">
    <div className="g-hero">
      <h3>Never miss a steal</h3>
      <p>Browsing is free. Sign in to unlock the power-user loop — set a rule once and get pinged the instant a matching deal lands.</p>
      <button className="btn accent" style={{width:"100%", justifyContent:"center"}} onClick={onSignIn}><I.bolt size={14}/> Sign in with email</button>
      <div style={{fontSize:10.5, color:"var(--muted)", marginTop:8, textAlign:"center"}}>Magic link — no password.</div>
    </div>
    <div className="g-list">
      <div className="g-item"><span className="gi"><I.bell size={12}/></span><div><b>Alert rules</b> — thresholds on ratio, weight, karat, confidence. Delivered to Discord.</div></div>
      <div className="g-item"><span className="gi"><I.pulse size={12}/></span><div><b>Live stream</b> — new deals appear the moment they're analyzed.</div></div>
      <div className="g-item"><span className="gi"><I.star size={12}/></span><div><b>Save</b> items and searches to a personal watchlist.</div></div>
      <div className="g-item"><span className="gi"><I.spark size={12}/></span><div><b>Feedback loop</b> — report real karat &amp; weight to sharpen estimates.</div></div>
    </div>
  </div>
);

const MatchSparkline = () => {
  // fake sparkline: hourly matches last 24h
  const data = [3,2,4,1,2,6,8,7,5,9,12,14,11,8,6,7,10,13,18,15,11,9,7,12];
  const max = Math.max(...data);
  const w = 288, h = 42, bw = w / data.length;
  return (
    <div className="match-spark">
      <div style={{display:"flex", alignItems:"baseline", justifyContent:"space-between"}}>
        <div>
          <div className="micro">Matches · 24h</div>
          <div className="mono" style={{fontSize:16, color:"var(--ink)", marginTop:2, fontWeight:500}}>184 <span style={{color:"var(--live)", fontSize:12, fontWeight:500}}>▲ 22%</span></div>
        </div>
        <div className="mono" style={{fontSize:10.5, color:"var(--muted)"}}>per hr</div>
      </div>
      <svg className="spark-svg" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none">
        {data.map((v, i) => {
          const bh = (v / max) * (h - 4);
          return <rect key={i} x={i*bw + 1} y={h - bh} width={bw - 2} height={bh} fill="var(--accent)" opacity={i >= data.length - 4 ? 1 : 0.45} rx="1"/>;
        })}
      </svg>
    </div>
  );
};

const RightRail = ({ alerts, onToggle, signedIn, onCreateRule, onComingSoon }) => {
  return (
    <aside className="right-rail">
      <div className="right-tabs">
        <button className="active"><I.bell size={12}/> Alerts <span className="num">soon</span></button>
      </div>
      <div className="right-body">
        <ComingSoon
          variant="panel"
          feature="Account tools"
          detail="Alert rules, notification channels, alert history, and saved searches are gated until accounts ship."
          onAction={() => onComingSoon?.("Account tools", "Alert rules, notification channels, alert history, and saved searches are gated until accounts ship.")}
          actionLabel="Coming soon"
        />
      </div>
    </aside>
  );

  if (!signedIn) {
    return (
      <aside className="right-rail">
        <div className="right-tabs">
          <button className="active"><I.bolt size={12}/> Get alerts</button>
        </div>
        <div className="right-body"><RailGate onSignIn={onSignIn}/></div>
      </aside>
    );
  }

  return (
    <aside className="right-rail">
      <div className="right-tabs">
        <button className={tab === "alerts" ? "active" : ""} onClick={() => setTab("alerts")}>
          <I.bell size={12}/> Rules <span className="num">{alerts.filter(a => a.enabled).length}</span>
        </button>
        <button className={tab === "history" ? "active" : ""} onClick={() => setTab("history")}>
          <I.pulse size={12}/> History
        </button>
        <button className={tab === "channels" ? "active" : ""} onClick={() => setTab("channels")}>
          <I.hash size={12}/> Channels
        </button>
        <button className={tab === "activity" ? "active" : ""} onClick={() => setTab("activity")}>
          <I.spark size={12}/> Live
        </button>
      </div>
      <div className="right-body">
        {tab === "alerts" && (
          <>
            <MatchSparkline/>
            <div className="create-alert">
              <h4>New alert rule</h4>
              <div className="t">Set thresholds once; KaratScan pings your Discord the moment a new listing matches.</div>
              <div style={{display:"flex", gap:"6px"}}>
                <button className="btn accent sm" style={{flex:1, justifyContent:"center"}} onClick={onCreateRule}>
                  <I.plus size={12}/> Build rule
                </button>
                <button className="btn sm" title="From current filters" onClick={onCreateRule}><I.sliders size={12}/></button>
              </div>
            </div>
            <div style={{padding:"8px 14px 4px"}} className="micro">Your rules</div>
            {alerts.map(a => <AlertCard key={a.id} alert={a} onToggle={onToggle} onOpen={onCreateRule}/>)}
            <div style={{padding:"10px 14px"}} className="micro">Saved searches</div>
            {SAVED_SEARCHES.map(s => (
              <div key={s.id} className="saved-row">
                <span className="stripe" style={{background: s.color}}/>
                <span><span className="sn">{s.name}</span><span className="sc" style={{display:"block"}}>{s.crit}</span></span>
                <span className="sc">{s.count} new</span>
              </div>
            ))}
          </>
        )}
        {tab === "history" && (
          <>
            <div style={{padding:"14px 14px 8px"}} className="micro">Alert deliveries</div>
            {ALERT_HISTORY.map(h => <HistoryRow key={h.id} h={h}/>)}
          </>
        )}
        {tab === "channels" && (
          <>
            <div style={{padding:"14px 14px 8px"}} className="micro">Notification channels</div>
            {CHANNELS.map(c => <ChannelRow key={c.id} c={c}/>)}
            <div style={{padding:"16px 14px"}}>
              <button className="btn accent" style={{width:"100%", justifyContent:"center"}}><I.plus size={13}/> Add Discord webhook</button>
              <div style={{fontSize:11, color:"var(--muted)", marginTop:8, lineHeight:1.4, textAlign:"center"}}>Email &amp; web-push delivery are coming soon. We only ever store a secret fingerprint, never the webhook URL.</div>
            </div>
          </>
        )}
        {tab === "activity" && (
          <>
            <div style={{padding:"14px 14px 8px", display:"flex", alignItems:"center", justifyContent:"space-between"}}>
              <span className="micro">Live stream · SSE</span>
              <span className="dstatus sent"><span className="dd"/>connected</span>
            </div>
            {ACTIVITY.map((a, i) => (
              <div key={i} className="act-row">
                <div className="t">{a.t}</div>
                <div className="msg"><span className={`pin ${a.kind}`}/>{a.text}</div>
              </div>
            ))}
          </>
        )}
      </div>
    </aside>
  );
};

Object.assign(window, { RightRail });