/* global React, M */

// ====================================================================
// B3 — Notifications inbox
// ====================================================================
function NotificationsInbox() {
  const { MScreen, MTopBar, Eyebrow, SagePill, Glyph } = window.M;

  return (
    <MScreen>
      <MTopBar right={<button style={{ background: "transparent", border: "none", color: "var(--accent)", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", cursor: "pointer", padding: "0 8px" }}>Mark all read</button>}/>

      {/* Headline */}
      <div style={{ padding: "8px 24px 28px" }}>
        <Eyebrow>3 New · Today</Eyebrow>
        <h1 className="serif" style={{ fontSize: 38, lineHeight: 1, letterSpacing: "-0.02em", margin: "10px 0 0" }}>
          Notifications.
        </h1>
      </div>

      {/* Today section */}
      <div style={{ padding: "0 24px 6px" }}>
        <Eyebrow>Today · Tue 5 May</Eyebrow>
      </div>

      <div style={{ borderTop: "1px solid var(--border-soft)", marginTop: 14 }}>
        <NotifRow
          unread
          glyph={<Glyph.PaperPlane color="var(--accent)"/>}
          actor="Priya Anand"
          time="2h"
          body="requested a 1to1"
          quote="She wants to discuss commercial buyer referrals."
          actions
        />
        <NotifRow
          unread
          glyph={<Glyph.Wave color="var(--accent)"/>}
          actor="Mid-week Rhythm"
          time="6h"
          serifActor
          quote='"Two more steps to your Rhythm this week — one connection given, one request sent."'
        />
        <NotifRow
          unread
          glyph={<Glyph.Check color="var(--accent)"/>}
          actor="James Whitford"
          time="4h"
          body="accepted your 1to1"
          context="Confirmed for Thu 7 May, 8:00 at The Pantry."
        />
        <NotifRow
          glyph={<Glyph.Check color="var(--accent)"/>}
          actor="Your debrief is ready"
          time="5m"
          body=""
          context="From your 1to1 with Priya Anand."
          serifActor
        />
        <NotifRow
          glyph={<Glyph.ArrowRet color="var(--accent)"/>}
          actor="Eliza Hart"
          time="Yest"
          body="attributed a connection to you"
          quote='Said your intro to "Coast Ledger" turned into a retainer.'
        />
        <NotifRow
          glyph={<Glyph.Pending color="var(--text-2)"/>}
          actor="Devon Park"
          time="Yest"
          body="proposed a different time"
          context="Suggests Mon 11 May, 10:30."
          actions
          actionType="reschedule"
        />
      </div>

      {/* Earlier */}
      <div style={{ padding: "30px 24px 6px" }}>
        <Eyebrow>Earlier this week</Eyebrow>
      </div>
      <div style={{ borderTop: "1px solid var(--border-soft)", marginTop: 14, opacity: 0.78 }}>
        <NotifRow
          glyph={<Glyph.PaperPlane color="var(--text-2)"/>}
          actor="Coast Referral Collective"
          time="2d"
          body=""
          context="Tomás Rivera applied to join. As Convenor, you can review them."
          serifActor
        />
        <NotifRow
          glyph={<Glyph.Wave color="var(--accent)"/>}
          actor="Rhythm held"
          time="Sun"
          quote='"9 weeks running."'
          serifActor
        />
        <NotifRow
          glyph={<Glyph.Check color="var(--text-2)"/>}
          actor="Sienna Kovač"
          time="Sat"
          body="submitted her debrief"
          context="From your 1to1 last Friday."
        />
        <NotifRow
          glyph={<Glyph.Dot color="var(--text-2)"/>}
          actor="Felix Aoki"
          time="Fri"
          body=""
          context="Still owes a debrief — gentle reminder sent on your behalf."
          last
        />
      </div>

      <div style={{ padding: "32px 24px 24px", textAlign: "center" }}>
        <span className="mono muted-2" style={{ fontSize: 10, letterSpacing: "0.12em" }}>· END ·</span>
      </div>
    </MScreen>
  );
}

function NotifRow({ glyph, actor, body, context, quote, time, unread, actions, actionType, serifActor, last }) {
  return (
    <div style={{ position: "relative", padding: "18px 24px", borderBottom: last ? "none" : "1px dotted var(--border)", display: "flex", gap: 14 }}>
      {unread && <div style={{ position: "absolute", left: 8, top: 28, width: 5, height: 5, borderRadius: "50%", background: "var(--accent)" }}/>}
      <div style={{ flex: "0 0 28px", marginTop: 2 }}>{glyph}</div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 12 }}>
          <div style={{ fontSize: 13.5, lineHeight: 1.5 }}>
            <span style={{ fontWeight: 500, ...(serifActor ? { fontFamily: "var(--serif)", fontStyle: "italic", fontWeight: 400, fontSize: 15 } : {}) }}>{actor}</span>
            {body && <span className="muted" style={{ marginLeft: 6 }}>{body}</span>}
          </div>
          <span className="mono" style={{ fontSize: 10, color: "var(--text-3)", letterSpacing: "0.08em", flex: "0 0 auto" }}>{time}</span>
        </div>
        {context && <div className="muted" style={{ fontSize: 12.5, lineHeight: 1.5, marginTop: 4 }}>{context}</div>}
        {quote && <div className="serif-i" style={{ fontSize: 14, lineHeight: 1.5, color: "var(--text)", marginTop: 6 }}>{quote}</div>}
        {actions && (
          <div style={{ display: "flex", gap: 8, marginTop: 12 }}>
            <button style={{ height: 32, padding: "0 14px", borderRadius: 999, background: "var(--accent)", border: "none", color: "#0E0D0B", fontSize: 12, fontWeight: 600, cursor: "pointer" }}>{actionType === "reschedule" ? "Accept new time" : "Accept"}</button>
            <button style={{ height: 32, padding: "0 14px", borderRadius: 999, background: "transparent", border: "1px solid var(--border)", color: "var(--text-2)", fontSize: 12, cursor: "pointer" }}>Decline</button>
            <button style={{ height: 32, padding: "0 8px", background: "transparent", border: "none", color: "var(--accent)", fontSize: 12, cursor: "pointer" }}>Propose another time</button>
          </div>
        )}
      </div>
    </div>
  );
}

// Empty state
function NotificationsEmpty() {
  const { MScreen, MTopBar } = window.M;
  return (
    <MScreen>
      <MTopBar/>
      <div style={{ padding: "120px 32px 0", textAlign: "center" }}>
        <h1 className="serif-i" style={{ fontSize: 38, letterSpacing: "-0.015em", lineHeight: 1.1, color: "var(--text)", margin: 0 }}>
          You're all <span style={{ color: "var(--accent)" }}>caught up.</span>
        </h1>
        <p className="muted" style={{ fontSize: 14, lineHeight: 1.6, marginTop: 18, maxWidth: 280, marginLeft: "auto", marginRight: "auto" }}>
          We'll let you know when something needs you.
        </p>
        <div style={{ marginTop: 80, display: "inline-flex", gap: 4, alignItems: "center", padding: "8px 16px", borderRadius: 999, border: "1px solid var(--border-soft)" }}>
          <span className="mono muted-2" style={{ fontSize: 10, letterSpacing: "0.12em" }}>LAST CHECK · 5 MIN AGO</span>
        </div>
      </div>
    </MScreen>
  );
}

// Single row detail (isolated)
function NotificationRowDetail() {
  const { Eyebrow, Glyph } = window.M;
  return (
    <div style={{ width: "100%", height: "100%", padding: 32, background: "var(--bg)", color: "var(--text)" }}>
      <Eyebrow>Row · anatomy</Eyebrow>
      <div style={{ marginTop: 22, padding: "20px 0", borderTop: "1px dotted var(--border)", borderBottom: "1px dotted var(--border)", display: "flex", gap: 14, position: "relative" }}>
        <div style={{ position: "absolute", left: -10, top: 28, width: 5, height: 5, borderRadius: "50%", background: "var(--accent)" }}/>
        <div style={{ flex: "0 0 28px", marginTop: 2 }}><Glyph.ArrowRet color="var(--accent)"/></div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
            <div style={{ fontSize: 14, fontWeight: 500 }}>Eliza Hart <span className="muted" style={{ fontWeight: 400 }}>attributed a connection to you</span></div>
            <span className="mono" style={{ fontSize: 10, color: "var(--text-3)", letterSpacing: "0.08em" }}>YEST</span>
          </div>
          <div className="serif-i" style={{ fontSize: 15, lineHeight: 1.5, marginTop: 6 }}>
            "Said your intro to <span style={{ color: "var(--accent)" }}>Coast Ledger</span> turned into a retainer."
          </div>
        </div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18, marginTop: 26 }}>
        <Anatomy n="01" l="Sage dot" v="Unread state, left edge"/>
        <Anatomy n="02" l="Custom glyph" v="SVG · never emoji"/>
        <Anatomy n="03" l="Actor + verb" v="Sans semibold + muted body"/>
        <Anatomy n="04" l="Time" v="Mono, right-aligned"/>
        <Anatomy n="05" l="Quote" v="Serif italic for attribution"/>
      </div>
    </div>
  );
}

function Anatomy({ n, l, v }) {
  return (
    <div>
      <div className="mono muted-2" style={{ fontSize: 9, letterSpacing: "0.12em" }}>{n}</div>
      <div style={{ fontSize: 12, fontWeight: 500, marginTop: 4 }}>{l}</div>
      <div className="muted" style={{ fontSize: 11.5, marginTop: 2 }}>{v}</div>
    </div>
  );
}

window.NotificationsInbox = NotificationsInbox;
window.NotificationsEmpty = NotificationsEmpty;
window.NotificationRowDetail = NotificationRowDetail;