// Helios — Reports / Dashboard.
// Recolor: line chart → ink. Trend triangles dropped — pill-deltas only.
// Mini sparkline per KPI. Density tightened.

const ReportsDashboardScreen = () => (
  <div style={{ flex: 1, display: "flex", flexDirection: "column", minHeight: 0, overflow: "hidden" }}>
    <header style={{
      padding: "16px 28px 12px", display: "flex",
      alignItems: "center", justifyContent: "space-between",
      borderBottom: "1px solid var(--color-border)",
    }}>
      <div>
        <h1 style={{
          margin: 0, fontSize: 20, lineHeight: "28px", fontWeight: 600,
          letterSpacing: "-0.015em",
        }}>Weekly revenue check</h1>
        <p style={{
          margin: "2px 0 0", fontSize: 12.5, color: "var(--color-text-muted)",
          fontFamily: "var(--font-mono)", letterSpacing: 0,
        }}>pinned · refreshed 2m ago · mon 25 – sun 31</p>
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
        <button style={selectBtn}>Last 7 days <Icons.ChevronsUpDown size={12}/></button>
        <button style={ghostBtn2}><Icons.Pin size={14}/>Unpin</button>
        <button style={primaryBtnSm}><Icons.Sparkle size={14}/>Ask Helios</button>
      </div>
    </header>

    <div style={{ flex: 1, overflow: "auto", padding: "20px 28px 28px", display: "flex", flexDirection: "column", gap: 20 }}>

      {/* KPI row — sparkline + delta pill, no triangles */}
      <section style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
        {[
          { label: "Revenue",     val: "€12,840", delta: "+12.4%", prior: "€11,425", pos: true,  spark: [10,12,11,14,13,18,21] },
          { label: "Bookings",    val: "84",      delta: "+6.3%",  prior: "79",      pos: true,  spark: [9,10,8,11,12,14,15] },
          { label: "Avg ticket",  val: "€152",    delta: "+5.7%",  prior: "€144",    pos: true,  spark: [8,8,9,10,9,11,12] },
          { label: "Cancel rate", val: "4.8%",    delta: "−1.2%",  prior: "6.0%",    pos: true,  spark: [12,11,10,11,9,8,7] },
        ].map(k => (
          <div key={k.label} style={kpiCard}>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
              <span style={{ fontSize: 12, color: "var(--color-text-secondary)", letterSpacing: "-0.005em" }}>{k.label}</span>
              <span style={{
                background: k.pos ? "var(--color-success-bg)" : "var(--color-error-bg)",
                color: k.pos ? "var(--color-success-text)" : "var(--color-error-text)",
                fontFamily: "var(--font-mono)", fontFeatureSettings: '"tnum" 1, "zero" 1',
                fontSize: 11, fontWeight: 500,
                padding: "2px 7px", borderRadius: 9999, letterSpacing: 0,
              }}>{k.delta}</span>
            </div>
            <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 10 }}>
              <span style={kpiValue}>{k.val}</span>
            </div>
            <Spark values={k.spark}/>
            <div style={{
              fontSize: 11, color: "var(--color-text-muted)",
              fontFamily: "var(--font-mono)", letterSpacing: 0,
              borderTop: "1px solid var(--color-border)", paddingTop: 8, marginTop: 2,
            }}>
              vs last week · <span style={{ color: "var(--color-text-secondary)" }}>{k.prior}</span>
            </div>
          </div>
        ))}
      </section>

      {/* Two-up: line chart + top services */}
      <section style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 16 }}>
        <div style={card}>
          <div style={cardHead}>
            <div>
              <div style={cardTitle}>Daily revenue</div>
              <div style={cardSub}>last 7 days · €</div>
            </div>
            <div style={{ display: "flex", gap: 14, fontSize: 11, color: "var(--color-text-muted)", fontFamily: "var(--font-mono)", letterSpacing: 0 }}>
              <span><span style={legendDot("var(--color-ink)")}/>this week</span>
              <span><span style={legendDot("var(--color-border-strong)")}/>prior</span>
            </div>
          </div>
          <DashLineChart />
        </div>

        <div style={card}>
          <div style={cardHead}>
            <div>
              <div style={cardTitle}>Top services</div>
              <div style={cardSub}>by revenue · last 7 days</div>
            </div>
            <a style={linkSm}>View all<Icons.ChevronRight size={12}/></a>
          </div>
          <table style={tbl}>
            <thead>
              <tr>
                <th style={thL}>service</th>
                <th style={thR}>bookings</th>
                <th style={thR}>revenue</th>
              </tr>
            </thead>
            <tbody>
              {[
                ["Gel manicure",  84, "€3,360"],
                ["Brow shape",    61, "€1,525"],
                ["Lash fill",     42, "€2,520"],
                ["Pedicure",      31, "€1,395"],
                ["Acrylic set",   18, "€1,440"],
              ].map(r => (
                <tr key={r[0]}>
                  <td style={tdL}>{r[0]}</td>
                  <td style={tdR}>{r[1]}</td>
                  <td style={tdR}>{r[2]}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </section>

      {/* Helios summary callout — ink-tinted, not magenta */}
      <section style={{
        background: "var(--color-surface-muted)",
        border: "1px solid var(--color-border)",
        borderRadius: "var(--radius-lg)",
        padding: 16, display: "flex", gap: 12, alignItems: "flex-start",
      }}>
        <div style={{
          width: 26, height: 26, borderRadius: 9999, flexShrink: 0,
          background: "var(--color-ink-subtle)",
          display: "flex", alignItems: "center", justifyContent: "center",
          color: "var(--color-ink)",
        }}>
          <Icons.Sparkle size={13}/>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{
            fontSize: 11, fontWeight: 500,
            color: "var(--color-ink)",
            letterSpacing: 0,
            fontFamily: "var(--font-mono)",
            fontFeatureSettings: '"tnum" 1, "zero" 1',
          }}>helios · summary</div>
          <p className="prose-chat" style={{ margin: "4px 0 0", fontFamily: "var(--font-prose)", fontSize: "0.9375rem", lineHeight: "1.5rem", color: "var(--color-text)", maxWidth: "65ch" }}>
            Revenue is up <strong style={{ fontWeight: 500 }}>12.4%</strong> week-over-week, mostly driven by lash fills.
            Tuesday was unusually quiet — the only weekday below your 4-week average. Cancellation rate
            dropped to <strong style={{ fontWeight: 500 }}>4.8%</strong>, your best week since September.
          </p>
        </div>
      </section>
    </div>
  </div>
);

// Tiny sparkline for KPI cards.
const Spark = ({ values }) => {
  const W = 200, H = 28;
  const max = Math.max(...values), min = Math.min(...values);
  const sx = i => (i / (values.length - 1)) * W;
  const sy = v => H - 2 - ((v - min) / Math.max(1, max - min)) * (H - 4);
  const d = values.map((v, i) => `${i === 0 ? "M" : "L"} ${sx(i).toFixed(1)} ${sy(v).toFixed(1)}`).join(" ");
  const lastX = sx(values.length - 1), lastY = sy(values[values.length - 1]);
  return (
    <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none" style={{ display: "block", width: "100%", height: 28 }}>
      <path d={d} fill="none" stroke="var(--color-ink)" strokeWidth="1.25" strokeLinejoin="round"/>
      <circle cx={lastX} cy={lastY} r="2.25" fill="var(--color-ink)"/>
    </svg>
  );
};

// Line chart — ink primary, dashed neutral comparator. No legend pills, dots smaller.
const DashLineChart = () => {
  const cur =   [1100,  720, 1840, 2110, 2680, 3210, 1180];
  const prior = [1280, 1090, 1320, 1840, 2410, 2980, 1320];
  const W = 720, H = 220, P = 32, B = 28;
  const max = Math.max(...cur, ...prior) * 1.05;
  const sx = i => P + i * ((W - P - 16) / (cur.length - 1));
  const sy = v => H - B - (v / max) * (H - B - 12);
  const path = (arr) => arr.map((v, i) => `${i === 0 ? "M" : "L"} ${sx(i)} ${sy(v)}`).join(" ");
  const days = ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"];
  return (
    <svg viewBox={`0 0 ${W} ${H}`} width="100%" style={{ display: "block" }}>
      {/* Hairline baseline only — instrument feel, not boxed grid */}
      <line x1={P} x2={W - 8} y1={H - B} y2={H - B}
            stroke="var(--color-border-strong)" strokeWidth="1"/>
      <path d={path(prior)} fill="none" stroke="var(--color-border-strong)"
            strokeWidth="1.25" strokeDasharray="3 4"/>
      <path d={path(cur)} fill="none" stroke="var(--color-ink)" strokeWidth="1.75"/>
      {cur.map((v, i) => (
        <circle key={i} cx={sx(i)} cy={sy(v)} r="2.5"
                fill="var(--color-surface)" stroke="var(--color-ink)" strokeWidth="1.75"/>
      ))}
      {days.map((d, i) => (
        <text key={d} x={sx(i)} y={H - 8} textAnchor="middle" fontSize="10.5"
              fill="var(--color-text-muted)" style={{ fontFamily: "var(--font-mono)", letterSpacing: 0 }}>{d.toLowerCase()}</text>
      ))}
    </svg>
  );
};

// ── styles ────────────────────────────────────────────────
const card = {
  background: "var(--color-surface)",
  border: "1px solid var(--color-border)",
  borderRadius: "var(--radius-lg)",
  padding: 18, display: "flex", flexDirection: "column", gap: 14,
};
const cardHead = { display: "flex", alignItems: "flex-start", justifyContent: "space-between" };
const cardTitle = { fontSize: 13.5, fontWeight: 600, color: "var(--color-text)", letterSpacing: "-0.005em" };
const cardSub = { fontSize: 11, color: "var(--color-text-muted)", marginTop: 2, fontFamily: "var(--font-mono)", letterSpacing: 0 };
const kpiCard = {
  background: "var(--color-surface)",
  border: "1px solid var(--color-border)",
  borderRadius: "var(--radius-lg)",
  padding: 14, display: "flex", flexDirection: "column", gap: 8,
};
const kpiValue = { fontSize: 26, lineHeight: "32px", fontWeight: 600, fontFeatureSettings: '"tnum" 1', letterSpacing: "-0.015em" };

const tbl = { width: "100%", borderCollapse: "collapse", fontSize: 13, fontFeatureSettings: '"tnum" 1' };
// Table headers — mono natural case. Lowercased copy at the call site.
const thL = {
  textAlign: "left", fontSize: 11, fontWeight: 400,
  color: "var(--color-text-muted)",
  letterSpacing: 0, padding: "6px 0",
  borderBottom: "1px solid var(--color-border-strong)",
  fontFamily: "var(--font-mono)",
  fontFeatureSettings: '"tnum" 1, "zero" 1',
};
const thR = { ...thL, textAlign: "right" };
const tdL = { padding: "9px 0", color: "var(--color-text)", borderBottom: "1px solid var(--color-border)", letterSpacing: "-0.005em" };
const tdR = { ...tdL, textAlign: "right", color: "var(--color-text-secondary)", fontFamily: "var(--font-mono)" };

const linkSm = { fontSize: 12, color: "var(--color-text-muted)", display: "inline-flex", alignItems: "center", gap: 2, cursor: "pointer" };
const legendDot = (c) => ({
  display: "inline-block", width: 6, height: 6, borderRadius: 9999,
  background: c, marginRight: 5,
});

const selectBtn = {
  display: "inline-flex", alignItems: "center", gap: 6,
  border: "1px solid var(--color-border)", background: "var(--color-surface)",
  borderRadius: 8, padding: "7px 12px", fontSize: 13, color: "var(--color-text-secondary)",
  cursor: "pointer", fontFamily: "var(--font-sans)", letterSpacing: "-0.005em",
};
const ghostBtn2 = {
  display: "inline-flex", alignItems: "center", gap: 6,
  border: 0, background: "transparent", color: "var(--color-text-secondary)",
  borderRadius: 8, padding: "7px 12px", fontSize: 13,
  cursor: "pointer", fontFamily: "var(--font-sans)", letterSpacing: "-0.005em",
};
const primaryBtnSm = {
  display: "inline-flex", alignItems: "center", gap: 6,
  background: "var(--color-text)", color: "var(--color-bg)", border: 0,
  borderRadius: 10, padding: "7px 12px", fontSize: 13, fontWeight: 500,
  letterSpacing: "-0.005em",
  cursor: "pointer", fontFamily: "var(--font-sans)",
  boxShadow: "var(--shadow-btn)",
};

window.ReportsDashboardScreen = ReportsDashboardScreen;