// Helios — Signals (alerts feed) & Connectors (data sources) screens.
// Recolor: action links → ink (not magenta). Reconnect → charcoal (not magenta).
// Timestamps in mono. No magenta on these screens at all.

const SignalsScreen = () => {
  const signals = [
    {
      sev: "warn", time: "12m ago",
      title: "Cancellation rate jumped Tuesday",
      body: "4 cancellations between 2–5 PM. None rebooked. Higher than your last 4 Tuesdays.",
      action: "Investigate Tuesday",
    },
    {
      sev: "info", time: "2h ago",
      title: "Lash fill add-on converted on 38% of bookings",
      body: "Strong first week for the new add-on. Compare to previous launches?",
      action: "Open trend",
    },
    {
      sev: "ok", time: "Yesterday",
      title: "Saturday hit a new weekly high",
      body: "€3,210 in a single day, 8% above your previous best (Sat Oct 18).",
      action: "Pin to dashboard",
    },
    {
      sev: "info", time: "2d ago",
      title: "3 returning clients haven't rebooked",
      body: "Each had averaged a visit every 4–6 weeks for the past 6 months.",
      action: "See clients",
    },
    {
      sev: "warn", time: "3d ago",
      title: "Square sync took 4 minutes",
      body: "Slower than usual. Most days complete in under 30 seconds.",
      action: "Check connection",
    },
  ];

  const sevTone = {
    info: { bg: "var(--color-severity-info-bg)",    border: "var(--color-severity-info-border)",    text: "var(--color-severity-info-text)" },
    warn: { bg: "var(--color-severity-warning-bg)", border: "var(--color-severity-warning-border)", text: "var(--color-severity-warning-text)" },
    ok:   { bg: "var(--color-success-bg)",          border: "var(--color-success-border)",          text: "var(--color-success-text)" },
  };
  const sevLabel = { info: "insight", warn: "attention", ok: "milestone" };

  return (
    <div style={{ flex: 1, display: "flex", flexDirection: "column", minHeight: 0 }}>
      <header style={{
        padding: "16px 28px 12px",
        borderBottom: "1px solid var(--color-border)",
        display: "flex", alignItems: "center", justifyContent: "space-between",
      }}>
        <div>
          <h1 style={{ margin: 0, fontSize: 20, lineHeight: "28px", fontWeight: 600, letterSpacing: "-0.015em" }}>Signals</h1>
          <p style={{ margin: "2px 0 0", fontSize: 12.5, color: "var(--color-text-muted)" }}>
            Helios watches your data and surfaces what's worth your attention.
          </p>
        </div>
        <div style={{ display: "flex", gap: 6 }}>
          <button style={tab(true)}>All<span style={tabCount}>5</span></button>
          <button style={tab(false)}>Unread<span style={tabCount}>3</span></button>
          <button style={tab(false)}>Pinned</button>
        </div>
      </header>

      <div style={{ flex: 1, overflow: "auto", padding: "20px 28px 28px", display: "flex", flexDirection: "column", gap: 10 }}>
        {signals.map((s, i) => {
          const tone = sevTone[s.sev];
          return (
            <article key={i} style={{
              display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 16,
              alignItems: "flex-start",
              background: "var(--color-surface)",
              border: "1px solid var(--color-border)",
              borderRadius: "var(--radius-lg)",
              padding: 14,
            }}>
              <div style={{
                background: tone.bg, color: tone.text,
                border: `1px solid ${tone.border}`,
                borderRadius: 9999, padding: "1px 9px", height: 20,
                fontSize: 11, fontWeight: 500, letterSpacing: 0,
                display: "inline-flex", alignItems: "center",
                fontFamily: "var(--font-mono)",
                fontFeatureSettings: '"tnum" 1, "zero" 1',
              }}>{sevLabel[s.sev]}</div>
              <div>
                <div style={{ fontSize: 14, fontWeight: 600, color: "var(--color-text)", letterSpacing: "-0.005em" }}>{s.title}</div>
                <div style={{ fontSize: 13, lineHeight: "20px", color: "var(--color-text)", marginTop: 3, maxWidth: "65ch" }}>
                  {s.body}
                </div>
                <div style={{ marginTop: 10, display: "flex", gap: 14, alignItems: "center" }}>
                  <button style={signalAction}>{s.action}<Icons.ChevronRight size={12}/></button>
                  <button style={signalGhost}>Mute</button>
                </div>
              </div>
              <div style={{
                fontSize: 11, color: "var(--color-text-muted)", whiteSpace: "nowrap",
                fontFamily: "var(--font-mono)", letterSpacing: 0,
              }}>{s.time}</div>
            </article>
          );
        })}
      </div>
    </div>
  );
};

const tab = (active) => ({
  display: "inline-flex", alignItems: "center", gap: 6,
  border: "1px solid", borderColor: active ? "var(--color-border-strong)" : "var(--color-border)",
  background: active ? "var(--color-surface)" : "transparent",
  color: active ? "var(--color-text)" : "var(--color-text-secondary)",
  borderRadius: 9999, padding: "5px 12px", fontSize: 12, fontWeight: 500,
  cursor: "pointer", fontFamily: "var(--font-sans)", letterSpacing: "-0.005em",
});
const tabCount = {
  fontSize: 11, padding: "0 6px", borderRadius: 9999,
  background: "var(--color-surface-warm)", color: "var(--color-text-secondary)",
  fontFamily: "var(--font-mono)", fontFeatureSettings: '"tnum" 1', fontWeight: 500,
  letterSpacing: 0,
};
// Action link uses ink, with a subtle underline. Quiet, instrument-y.
const signalAction = {
  display: "inline-flex", alignItems: "center", gap: 4,
  background: "transparent", border: 0, padding: 0,
  color: "var(--color-ink)", fontSize: 13, fontWeight: 500,
  cursor: "pointer", fontFamily: "var(--font-sans)", letterSpacing: "-0.005em",
  textDecoration: "underline", textDecorationColor: "var(--color-ink-subtle)", textUnderlineOffset: "3px",
};
const signalGhost = {
  background: "transparent", border: 0, padding: 0,
  color: "var(--color-text-muted)", fontSize: 13,
  cursor: "pointer", fontFamily: "var(--font-sans)",
};

// ─────────────────────────────────────────────────────────
// Connectors — onboarding & state
// ─────────────────────────────────────────────────────────
const ConnectorsScreen = () => {
  const items = [
    { name: "Square",          sub: "POS · 312 transactions today", state: "connected", lastSync: "synced 2m ago" },
    { name: "Stripe",          sub: "Payments",                     state: "connected", lastSync: "synced 8m ago" },
    { name: "Shopify",         sub: "Online orders",                state: "syncing",   lastSync: "syncing now…" },
    { name: "Google Calendar", sub: "Bookings",                     state: "error",     lastSync: "auth expired" },
    { name: "Mailchimp",       sub: "Email campaigns",              state: "available", lastSync: "" },
    { name: "QuickBooks",      sub: "Accounting",                   state: "available", lastSync: "" },
  ];
  return (
    <div style={{ flex: 1, display: "flex", flexDirection: "column", minHeight: 0 }}>
      <header style={{
        padding: "16px 28px 12px",
        borderBottom: "1px solid var(--color-border)",
      }}>
        <h1 style={{ margin: 0, fontSize: 20, lineHeight: "28px", fontWeight: 600, letterSpacing: "-0.015em" }}>Data</h1>
        <p style={{ margin: "2px 0 0", fontSize: 12.5, color: "var(--color-text-muted)" }}>
          Connect the tools your business runs on. Helios reads from these to answer questions.
        </p>
      </header>
      <div style={{ flex: 1, overflow: "auto", padding: "20px 28px 28px" }}>

        {/* Error alert at top */}
        <div style={{
          display: "flex", gap: 12, alignItems: "flex-start",
          background: "var(--color-error-bg)",
          border: "1px solid var(--color-error-border)",
          color: "var(--color-error-text)",
          borderRadius: "var(--radius-lg)", padding: "12px 16px",
          marginBottom: 16,
        }}>
          <div style={{ marginTop: 1 }}>
            <Icons.KeyRound size={16}/>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13, fontWeight: 600, letterSpacing: "-0.005em" }}>Google Calendar auth expired</div>
            <div style={{ fontSize: 13, lineHeight: "18px", color: "var(--color-text)", marginTop: 2 }}>
              Reconnect to keep bookings in sync. We can keep working without it, but you'll see fewer signals.
            </div>
          </div>
          <button style={{ ...primaryBtnInk, alignSelf: "center" }}>Reconnect</button>
        </div>

        {/* Cards grid */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 10 }}>
          {items.map(c => <ConnectorCard key={c.name} {...c}/>)}
        </div>
      </div>
    </div>
  );
};

const ConnectorCard = ({ name, sub, state, lastSync }) => {
  const stateBadge = {
    connected: { bg: "var(--color-success-bg)",         text: "var(--color-success-text)",         label: "connected" },
    syncing:   { bg: "var(--color-severity-info-bg)",   text: "var(--color-severity-info-text)",   label: "syncing" },
    error:     { bg: "var(--color-error-bg)",           text: "var(--color-error-text)",           label: "action needed" },
    available: { bg: "var(--color-surface-warm)",       text: "var(--color-text-secondary)",       label: "available" },
  }[state];
  return (
    <div style={{
      background: "var(--color-surface)",
      border: "1px solid var(--color-border)",
      borderRadius: "var(--radius-lg)",
      padding: 14,
      display: "flex", alignItems: "center", gap: 12,
    }}>
      <div style={{
        width: 36, height: 36, borderRadius: 8,
        background: "var(--color-surface-muted)",
        border: "1px solid var(--color-border)",
        display: "flex", alignItems: "center", justifyContent: "center",
        fontSize: 13, fontWeight: 600, color: "var(--color-text)",
        fontFamily: "var(--font-sans)", flexShrink: 0,
      }}>{name.charAt(0)}</div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <span style={{ fontSize: 13.5, fontWeight: 600, letterSpacing: "-0.005em" }}>{name}</span>
          <span style={{
            background: stateBadge.bg, color: stateBadge.text,
            borderRadius: 9999, padding: "1px 8px",
            fontSize: 11, fontWeight: 500, letterSpacing: 0,
            display: "inline-flex", alignItems: "center", gap: 4,
            fontFamily: "var(--font-mono)",
            fontFeatureSettings: '"tnum" 1, "zero" 1',
          }}>
            {state === "syncing" && <span style={{ width: 4, height: 4, borderRadius: 9999, background: "currentColor", animation: "pulseDot 1.4s infinite" }}/>}
            {stateBadge.label}
          </span>
        </div>
        <div style={{ fontSize: 12, color: "var(--color-text-muted)", marginTop: 1 }}>{sub}</div>
        {lastSync && <div style={{ fontSize: 10.5, color: "var(--color-text-muted)", marginTop: 3, fontFamily: "var(--font-mono)", letterSpacing: 0 }}>{lastSync}</div>}
      </div>
      {state === "available"
        ? <button style={primaryBtnInk}>Connect</button>
        : <button style={ghostBtn3}>Manage</button>}
    </div>
  );
};

// "Connect" / "Reconnect" — charcoal, not magenta. Keeps magenta reserved for the
// composer Send. (Magenta-as-punctuation rule.)
const primaryBtnInk = {
  background: "var(--color-text)", color: "var(--color-bg)", border: 0,
  borderRadius: 10, padding: "7px 14px", fontSize: 13, fontWeight: 500,
  letterSpacing: "-0.005em",
  cursor: "pointer", fontFamily: "var(--font-sans)",
  boxShadow: "var(--shadow-btn)",
};
const ghostBtn3 = {
  background: "transparent", border: "1px solid var(--color-border)",
  color: "var(--color-text-secondary)",
  borderRadius: 10, padding: "7px 14px", fontSize: 13, fontWeight: 500,
  letterSpacing: "-0.005em",
  cursor: "pointer", fontFamily: "var(--font-sans)",
};

Object.assign(window, { SignalsScreen, ConnectorsScreen });