// Helios — chat thread view.
// Recolor: chart highlight → ink (not magenta). Streaming dots → ink. Trend triangles → none.
// Density tightened. Composer uses AskComposer "follow" variant.

const UserMessage = ({ children }) => (
  <div style={{ display: "flex", justifyContent: "flex-end" }}>
    <div style={{
      background: "var(--color-surface-muted)",
      borderRadius: "var(--radius-lg)",
      padding: "10px 14px",
      maxWidth: "65%", fontSize: 14, lineHeight: "22px",
      color: "var(--color-text)",
      letterSpacing: "-0.005em",
    }}>{children}</div>
  </div>
);

const AssistantBlock = ({ children }) => (
  <div style={{ display: "flex", flexDirection: "column", gap: 12, maxWidth: "65ch" }}>
    {children}
  </div>
);

const ToolPill = ({ verb, subject, count, done = true }) => (
  <div style={{
    display: "inline-flex", alignItems: "center", gap: 8,
    padding: "5px 12px",
    background: "var(--color-surface-muted)",
    border: "1px solid var(--color-border)",
    borderRadius: 9999,
    fontSize: 11.5, color: "var(--color-text-secondary)",
    width: "fit-content",
    fontFamily: "var(--font-mono)",
    fontFeatureSettings: '"tnum" 1',
    letterSpacing: 0,
  }}>
    <span style={{
      width: 5, height: 5, borderRadius: 9999,
      background: done ? "var(--color-text-muted)" : "var(--color-ink)",
      animation: done ? "none" : "pulseDot 1.4s infinite",
    }}/>
    <span style={{ color: "var(--color-text)" }}>{verb}</span>
    <span style={{ color: "var(--color-text-muted)" }}>·</span>
    <span>{subject}</span>
    {count != null && <>
      <span style={{ color: "var(--color-text-muted)" }}>·</span>
      <span>{count}</span>
    </>}
  </div>
);

// Inline bar chart — single ink stroke at peak, neutral elsewhere. No magenta.
const InlineBarChart = () => {
  const data = [
    { d: "Mon", v: 1100 }, { d: "Tue", v:  720 }, { d: "Wed", v: 1840 },
    { d: "Thu", v: 2110 }, { d: "Fri", v: 2680 }, { d: "Sat", v: 3210 },
    { d: "Sun", v: 1180 },
  ];
  const max = Math.max(...data.map(d => d.v));
  const W = 560, H = 160, P = 32, BW = 36;
  const peak = data.findIndex(d => d.v === max);
  return (
    <div style={{
      background: "var(--color-surface-muted)",
      border: "1px solid var(--color-border)",
      borderRadius: "var(--radius-lg)",
      padding: 16, display: "flex", flexDirection: "column", gap: 8,
    }}>
      <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
        <span style={{ fontSize: 13, fontWeight: 500, color: "var(--color-text)" }}>Revenue by day</span>
        <span style={{ fontSize: 11, color: "var(--color-text-muted)", fontFamily: "var(--font-mono)" }}>last week · €</span>
      </div>
      <svg viewBox={`0 0 ${W} ${H}`} width="100%" style={{ display: "block" }}>
        {/* hairline baseline only — no full grid */}
        <line x1={P} x2={W - 8} y1={H - 24} y2={H - 24}
              stroke="var(--color-border-strong)" strokeWidth="1"/>
        {data.map((d, i) => {
          const x = P + i * ((W - P - 8) / data.length);
          const h = (d.v / max) * (H - 48);
          const y = H - 24 - h;
          const isPeak = i === peak;
          return (
            <g key={d.d}>
              <rect x={x} y={y} width={BW} height={h} rx="2"
                    fill={isPeak ? "var(--color-ink)" : "var(--color-border-strong)"}/>
              <text x={x + BW / 2} y={H - 8} fontSize="10" textAnchor="middle"
                    fill="var(--color-text-muted)"
                    style={{ fontFamily: "var(--font-mono)", letterSpacing: 0 }}>{d.d}</text>
            </g>
          );
        })}
      </svg>
    </div>
  );
};

const ChatThreadScreen = () => (
  <div style={{ flex: 1, display: "flex", flexDirection: "column", minHeight: 0 }}>
    {/* Top bar */}
    <header style={{
      display: "flex", alignItems: "center", justifyContent: "space-between",
      padding: "12px 24px",
      borderBottom: "1px solid var(--color-border)",
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <span style={{ fontSize: 14, fontWeight: 500, color: "var(--color-text)", letterSpacing: "-0.005em" }}>
          Why did Tuesday revenue dip?
        </span>
        <span style={{
          fontSize: 11, color: "var(--color-text-muted)",
          fontFamily: "var(--font-mono)", letterSpacing: 0,
        }}>14m ago</span>
      </div>
      <div style={{ display: "flex", gap: 4 }}>
        <button style={iconBtn}><Icons.Pin size={15}/></button>
        <button style={iconBtn}><Icons.Copy size={15}/></button>
        <button style={iconBtn}><Icons.X size={15}/></button>
      </div>
    </header>

    {/* Scrollable thread */}
    <div style={{ flex: 1, overflow: "auto", padding: "20px 32px", display: "flex", flexDirection: "column", gap: 20 }}>
      <UserMessage>Why did Tuesday revenue dip last week?</UserMessage>

      <AssistantBlock>
        <ToolPill verb="queried Square" subject="transactions Mon–Sun" count="312 rows"/>

        <p className="prose-chat" style={{ margin: 0, fontFamily: "var(--font-prose)", fontSize: "0.9375rem", lineHeight: "1.5rem", color: "var(--color-text)" }}>
          Tuesday came in at <strong style={{ fontWeight: 500 }}>€720</strong>, which is about 35% below your weekday average. Two things stand out.
        </p>

        <InlineBarChart />

        <p className="prose-chat" style={{ margin: 0, fontFamily: "var(--font-prose)", fontSize: "0.9375rem", lineHeight: "1.5rem", color: "var(--color-text)" }}>
          First, you had four cancellations between 2&nbsp;PM and 5&nbsp;PM — none rebooked the same day.
          Second, the noon slot was unbooked entirely, which is unusual for a Tuesday. Your other days
          looked normal, with Saturday hitting a weekly high of <strong style={{ fontWeight: 500 }}>€3,210</strong>.
        </p>

        <ToolPill verb="compared" subject="prior 4 Tuesdays" count="avg €1,108"/>

        <p className="prose-chat" style={{ margin: 0, fontFamily: "var(--font-prose)", fontSize: "0.9375rem", lineHeight: "1.5rem", color: "var(--color-text)" }}>
          The dip is real, not a quiet seasonal Tuesday. If you want, I can pull the cancellation reasons
          and check whether any of those clients have rebooked for next week.
        </p>

        {/* follow-up actions */}
        <div style={{ display: "flex", gap: 8, marginTop: 4, flexWrap: "wrap" }}>
          <button style={chipBtn}>Pull cancellation reasons</button>
          <button style={chipBtn}>Check rebookings</button>
          <button style={chipBtn}>Pin this answer</button>
        </div>
      </AssistantBlock>

      {/* Streaming next answer — ink dots, not magenta */}
      <AssistantBlock>
        <div style={{
          display: "inline-flex", alignItems: "center", gap: 8,
          color: "var(--color-text-muted)", fontSize: 13,
          fontFamily: "var(--font-mono)", letterSpacing: 0,
        }}>
          <span style={{ display: "inline-flex", gap: 3 }}>
            <span style={dot(0)}/><span style={dot(0.2)}/><span style={dot(0.4)}/>
          </span>
          helios is working
        </div>
      </AssistantBlock>
    </div>

    {/* Compose bar — uses shared AskComposer in "follow" variant */}
    <div style={{ padding: "10px 32px 16px" }}>
      <AskComposer variant="follow" streaming attachments={["Square"]} />
      <p style={{
        margin: "8px 0 0", textAlign: "center",
        fontSize: 11, color: "var(--color-text-muted)",
        fontFamily: "var(--font-mono)", letterSpacing: 0,
      }}>helios can make mistakes · verify important data</p>
    </div>
  </div>
);

const iconBtn = {
  width: 28, height: 28, border: 0, borderRadius: 6,
  background: "transparent", color: "var(--color-text-muted)",
  display: "inline-flex", alignItems: "center", justifyContent: "center",
  cursor: "pointer",
};
const chipBtn = {
  border: "1px solid var(--color-border)",
  background: "var(--color-surface)", borderRadius: 9999,
  padding: "6px 12px", fontSize: 12.5, color: "var(--color-text-secondary)",
  cursor: "pointer", fontFamily: "var(--font-sans)",
  letterSpacing: "-0.005em",
};
const dot = (delay) => ({
  width: 4, height: 4, borderRadius: 9999,
  background: "var(--color-ink)",
  animation: "pulseDot 1.2s infinite",
  animationDelay: `${delay}s`, display: "inline-block",
});

window.ChatThreadScreen = ChatThreadScreen;