// Right pane — assistant conversation. Per-day persistent thread, streaming
// responses, proposal cards with "Apply to draft" / "Dismiss".
// Chat only; media capture happens elsewhere (Telegram, Shortcuts).

function Assistant({ slug, date, inPostCount, totalCount, onApply }) {
  const [chat, setChat] = React.useState([]);
  const [composer, setComposer] = React.useState("");
  const [streaming, setStreaming] = React.useState(false);
  const [streamBuf, setStreamBuf] = React.useState("");
  const endRef = React.useRef();

  // Load prior turns when the day changes.
  React.useEffect(() => {
    if (!slug || !date) return;
    let cancelled = false;
    api.chatHistory(slug, date)
      .then((h) => { if (!cancelled) { setChat(h || []); setStreamBuf(""); } })
      .catch(() => { if (!cancelled) setChat([]); });
    return () => { cancelled = true; };
  }, [slug, date]);

  React.useEffect(() => {
    endRef.current && endRef.current.scrollIntoView({ block: "end" });
  }, [chat.length, streamBuf]);

  const send = async (text) => {
    const msg = (text || "").trim();
    if (!msg || streaming) return;
    setComposer("");
    setChat((h) => [...h, { role: "user", content: msg, id: "u-" + Date.now() }]);
    setStreaming(true);
    setStreamBuf("");
    try {
      await api.chatSend(slug, date, msg, {
        delta: (d) => setStreamBuf((b) => b + (d.text || "")),
        suggest: () => {},
        done: (final) => {
          setChat((h) => [...h, {
            id: final.id || ("a-" + Date.now()),
            role: "assistant",
            content: final.content,
            suggestion: final.suggestion,
            suggestion_scope: final.suggestion_scope,
            created_at: final.created_at,
          }]);
          setStreamBuf("");
          setStreaming(false);
        },
        error: (e) => {
          setChat((h) => [...h, { role: "assistant", content: "error: " + (e.message || "chat failed"), id: "err-" + Date.now() }]);
          setStreamBuf("");
          setStreaming(false);
        },
      });
    } catch {
      setStreaming(false);
      setStreamBuf("");
    }
  };

  const quickPrompts = [
    "draft the day",
    "shorter",
    "more concrete",
    "what did I skip from today?",
  ];

  const clearChat = async () => {
    if (streaming) return;
    if (chat.length === 0) return;
    if (!confirm("Clear the conversation for this day?")) return;
    try {
      await api.chatClear(slug, date);
      setChat([]);
      setStreamBuf("");
    } catch (e) {
      // noop — surfacing via inline msg would be overkill for this
    }
  };

  return (
    <aside className="assist">
      <div className="assist-head">
        <span className="label">Drafting · {prettyDate(date)}</span>
        <button
          type="button"
          className="assist-clear"
          onClick={clearChat}
          disabled={streaming || chat.length === 0}
          title="Clear this day's conversation">
          clear
        </button>
      </div>

      <div className="chat">
        {chat.length === 0 && !streaming && (
          <div style={{ color: "var(--ink-3)", fontSize: 12 }}>
            Ask Heron to draft, refine, or rework — plain language.
            "Shorter", "reorganise around the tram", "what did I skip?".
          </div>
        )}

        {chat.map((m) => m.role === "user" ? (
          <div key={m.id} className="msg user">
            <div className="role">you</div>
            <div className="bubble">{m.content}</div>
          </div>
        ) : (
          <BotMsg key={m.id} m={m} inPostCount={inPostCount} totalCount={totalCount}
            onApply={onApply}
            onDismiss={async () => {
              // Optimistic: strip the suggestion from local state now.
              setChat((h) => h.map((x) => x.id === m.id ? { ...x, suggestion: "", suggestion_scope: "" } : x));
              if (typeof m.id === "number") {
                try { await api.chatDismissSuggestion(slug, date, m.id); } catch {}
              }
            }}
          />
        ))}

        {streaming && (
          <div className="msg assistant">
            <div className="role">heron</div>
            <div className="bubble">
              {streamBuf}
              {!streamBuf && (
                <span className="typing-dots"><span></span><span></span><span></span></span>
              )}
            </div>
          </div>
        )}

        <div ref={endRef} />
      </div>

      <div className="suggestions">
        {quickPrompts.map((p, i) => (
          <button key={i} type="button" className="sugg" onClick={() => send(p)}>{p}</button>
        ))}
      </div>

      <div className="composer">
        <div className="composer-box">
          <textarea
            value={composer}
            placeholder='Ask in plain language — "shorter", "cut the dinner line", "what did I skip?"…'
            onChange={(e) => setComposer(e.target.value)}
            onKeyDown={(e) => {
              if (e.key === "Enter" && !e.shiftKey) {
                e.preventDefault();
                send(composer);
              }
            }} />
          <div className="composer-row">
            <span className="composer-hint">enter to send · shift+enter for newline</span>
            <button className="composer-send" disabled={!composer.trim() || streaming} onClick={() => send(composer)}>
              Send
            </button>
          </div>
        </div>
      </div>
    </aside>
  );
}

function BotMsg({ m, inPostCount, totalCount, onApply, onDismiss }) {
  const wc = m.suggestion ? m.suggestion.trim().split(/\s+/).filter(Boolean).length : 0;
  return (
    <div className="msg assistant">
      <div className="role">heron · read {inPostCount}/{totalCount}</div>
      {m.content && <div className="bubble">{m.content}</div>}
      {m.suggestion && (
        <div className="proposal">
          <div className="proposal-head">
            <span>proposed body · {wc} word{wc === 1 ? "" : "s"}</span>
            <span>{m.suggestion_scope || "full"}</span>
          </div>
          <div className="proposal-body">{m.suggestion}</div>
          <div className="proposal-actions">
            <button className="primary" onClick={() => onApply(m.suggestion)}>Apply to draft</button>
            <button onClick={() => navigator.clipboard && navigator.clipboard.writeText(m.suggestion)}>Copy</button>
            <button onClick={onDismiss} title="Remove this proposal from the chat">Dismiss</button>
          </div>
        </div>
      )}
    </div>
  );
}

function prettyDate(iso) {
  if (!iso) return "";
  const [y, m, d] = iso.split("-").map(Number);
  const dt = new Date(y, m - 1, d);
  const dow = dt.toLocaleDateString("en", { weekday: "short" });
  const mon = dt.toLocaleDateString("en", { month: "short" });
  return `${dow} ${d} ${mon}`;
}

Object.assign(window, { Assistant });