// Helios — AskComposer component.
// The textarea + chips + send button. Used on NewConversation (large) and
// ChatThread (small follow-up). Variant prop controls the size and emphasis.
//
// Variants:
//   "primary"  — large, hero composer on the empty-state landing screen.
//                Send button is magenta (the one accent moment per screen).
//   "follow"   — compact, sits at the bottom of an active thread.
//                Send is replaced by Stop while streaming; charcoal, no magenta.

const AskComposer = ({
  variant = "primary",
  placeholder,
  attachments = ["Square"],
  streaming = false,
}) => {
  const isPrimary = variant === "primary";
  const ph = placeholder ?? (isPrimary
    ? "Ask Helios about your Square sales, Stripe payments, or Shopify orders…"
    : "Ask a follow-up…");

  return (
    <div style={{
      width: "100%", background: "var(--color-surface-strong)",
      border: "1px solid var(--color-border)",
      borderRadius: isPrimary ? "var(--radius-xl)" : "var(--radius-lg)",
      boxShadow: isPrimary ? "var(--shadow-card)" : "var(--shadow-subtle)",
      padding: isPrimary ? "16px 16px 12px" : "10px 10px 8px",
      display: "flex", flexDirection: "column",
      gap: isPrimary ? 12 : 8,
    }}>
      <div style={{
        minHeight: isPrimary ? 60 : 22,
        color: "var(--color-text-muted)",
        fontSize: isPrimary ? 15 : 13.5,
        lineHeight: isPrimary ? "24px" : "20px",
        fontFamily: "var(--font-prose)",
      }}>{ph}</div>

      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <div style={{ display: "flex", gap: 4 }}>
          {attachments.map(a => (
            <button key={a} style={composerGhost}>
              <Icons.Database size={isPrimary ? 14 : 12}/>{a}
            </button>
          ))}
          {isPrimary && (
            <button style={composerGhost}><Icons.Plus size={14}/>Add data</button>
          )}
        </div>

        {streaming
          ? <button aria-label="Stop" style={{
              ...sendBtn(isPrimary),
              background: "var(--color-text)",
              color: "var(--color-bg)",
            }}>
              <Icons.Stop size={isPrimary ? 14 : 11}/>
            </button>
          : <button aria-label="Send" style={{
              ...sendBtn(isPrimary),
              // Magenta on primary (the one accent moment), charcoal on follow.
              background: isPrimary ? "var(--color-helios)" : "var(--color-text)",
              color: isPrimary ? "#fff" : "var(--color-bg)",
              boxShadow: "var(--shadow-btn)",
            }}>
              <svg width={isPrimary ? 16 : 13} height={isPrimary ? 16 : 13} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M5 12h14M12 5l7 7-7 7"/>
              </svg>
            </button>}
      </div>
    </div>
  );
};

const sendBtn = (isPrimary) => ({
  width: isPrimary ? 36 : 30,
  height: isPrimary ? 36 : 30,
  borderRadius: 9999, border: 0,
  display: "flex", alignItems: "center", justifyContent: "center",
  cursor: "pointer",
});

const composerGhost = {
  display: "inline-flex", alignItems: "center", gap: 5,
  padding: "5px 9px", borderRadius: 6, border: 0,
  background: "transparent", color: "var(--color-text-secondary)",
  fontSize: 12.5, cursor: "pointer", fontFamily: "var(--font-sans)",
};

window.AskComposer = AskComposer;