vibn-frontend/components/layout/coo-chat.tsx

"use client";

import { useState, useEffect, useRef } from "react";

interface CooMessage {
  id: string;
  role: "user" | "assistant";
  content: string;
  source?: "atlas" | "coo";  // atlas = discovery history, coo = orchestrator response
  streaming?: boolean;
}

export function CooChat({ projectId }: { projectId: string }) {
  const [messages, setMessages] = useState<CooMessage[]>([]);
  const [input, setInput] = useState("");
  const [loading, setLoading] = useState(false);
  const [historyLoaded, setHistoryLoaded] = useState(false);
  const bottomRef = useRef<HTMLDivElement>(null);
  const textareaRef = useRef<HTMLTextAreaElement>(null);

  // Scroll to bottom whenever messages change
  useEffect(() => {
    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [messages]);

  // Pre-load Atlas discovery history on mount
  useEffect(() => {
    fetch(`/api/projects/${projectId}/atlas-chat`)
      .then(r => r.json())
      .then((data: { messages?: Array<{ role: "user" | "assistant"; content: string }> }) => {
        const atlasMessages: CooMessage[] = (data.messages ?? [])
          .filter(m => m.content?.trim())
          .map((m, i) => ({
            id: `atlas_${i}`,
            role: m.role,
            content: m.content,
            source: "atlas" as const,
          }));

        if (atlasMessages.length > 0) {
          // Add a small divider message at the bottom of Atlas history
          setMessages([
            ...atlasMessages,
            {
              id: "coo_divider",
              role: "assistant",
              content: "Discovery complete. I'm your product COO — I have the full context above. What do you need?",
              source: "coo" as const,
            },
          ]);
        } else {
          // No Atlas history — show default COO welcome
          setMessages([{
            id: "welcome",
            role: "assistant",
            content: "Hi. I'm your product COO — I know your codebase, your goals, and what's been built. What do you need?",
            source: "coo" as const,
          }]);
        }
        setHistoryLoaded(true);
      })
      .catch(() => {
        setMessages([{
          id: "welcome",
          role: "assistant",
          content: "Hi. I'm your product COO — I know your codebase, your goals, and what's been built. What do you need?",
          source: "coo" as const,
        }]);
        setHistoryLoaded(true);
      });
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [projectId]);

  const send = async () => {
    const text = input.trim();
    if (!text || loading) return;
    setInput("");

    const userMsg: CooMessage = { id: Date.now().toString(), role: "user", content: text, source: "coo" };
    const assistantId = (Date.now() + 1).toString();
    const assistantMsg: CooMessage = { id: assistantId, role: "assistant", content: "", source: "coo", streaming: true };

    setMessages(prev => [...prev, userMsg, assistantMsg]);
    setLoading(true);

    // Build history from COO messages only (skip atlas history for context to orchestrator)
    const history = messages
      .filter(m => m.source === "coo" && m.id !== "coo_divider" && m.content)
      .map(m => ({ role: m.role === "assistant" ? "model" as const : "user" as const, content: m.content }));

    try {
      const res = await fetch(`/api/projects/${projectId}/advisor`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ message: text, history }),
      });

      if (!res.ok || !res.body) {
        setMessages(prev => prev.map(m => m.id === assistantId
          ? { ...m, content: "Something went wrong. Please try again.", streaming: false }
          : m));
        return;
      }

      const reader = res.body.getReader();
      const decoder = new TextDecoder();

      while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        const chunk = decoder.decode(value, { stream: true });
        setMessages(prev => prev.map(m => m.id === assistantId
          ? { ...m, content: m.content + chunk }
          : m));
      }

      setMessages(prev => prev.map(m => m.id === assistantId ? { ...m, streaming: false } : m));
    } catch {
      setMessages(prev => prev.map(m => m.id === assistantId
        ? { ...m, content: "Connection error. Please try again.", streaming: false }
        : m));
    } finally {
      setLoading(false);
      textareaRef.current?.focus();
    }
  };

  if (!historyLoaded) {
    return (
      <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }}>
        <div style={{ display: "flex", gap: 4 }}>
          {[0, 1, 2].map(i => (
            <span key={i} style={{
              width: 4, height: 4, borderRadius: "50%",
              background: "#d4cfc6", display: "inline-block",
              animation: `cooBounce 1.2s ${i * 0.2}s ease-in-out infinite`,
            }} />
          ))}
        </div>
      </div>
    );
  }

  return (
    <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
      {/* Messages */}
      <div style={{ flex: 1, overflow: "auto", padding: "12px 14px 8px", display: "flex", flexDirection: "column", gap: 10 }}>
        {messages.map((msg, idx) => {
          const isAtlas = msg.source === "atlas";
          const isUser = msg.role === "user";
          const isCoo = !isUser && !isAtlas;

          // Separator before the divider message
          const prevMsg = messages[idx - 1];
          const showSeparator = msg.id === "coo_divider" && prevMsg?.source === "atlas";

          return (
            <div key={msg.id}>
              {showSeparator && (
                <div style={{
                  display: "flex", alignItems: "center", gap: 8,
                  margin: "8px 0 4px", opacity: 0.5,
                }}>
                  <div style={{ flex: 1, height: 1, background: "#e8e4dc" }} />
                  <span style={{ fontSize: "0.58rem", color: "#b5b0a6", fontFamily: "Outfit, sans-serif", whiteSpace: "nowrap" }}>
                    Discovery · COO
                  </span>
                  <div style={{ flex: 1, height: 1, background: "#e8e4dc" }} />
                </div>
              )}

              <div style={{
                display: "flex",
                flexDirection: isUser ? "row-reverse" : "row",
                alignItems: "flex-end",
                gap: 6,
              }}>
                {/* Avatar */}
                {!isUser && (
                  <span style={{
                    width: 18, height: 18, borderRadius: 5,
                    background: isAtlas ? "#4a6fa5" : "#1a1a1a",
                    display: "flex", alignItems: "center", justifyContent: "center",
                    fontSize: isAtlas ? "0.48rem" : "0.48rem",
                    color: "#fff", flexShrink: 0,
                    fontFamily: isAtlas ? "Newsreader, serif" : "inherit",
                    fontWeight: isAtlas ? 700 : 400,
                  }}>
                    {isAtlas ? "A" : "◈"}
                  </span>
                )}

                <div style={{
                  maxWidth: "88%",
                  padding: isUser ? "7px 10px" : "0",
                  background: isUser ? "#f0ece4" : "transparent",
                  borderRadius: isUser ? 10 : 0,
                  fontSize: isAtlas ? "0.75rem" : "0.79rem",
                  color: isAtlas ? "#4a4540" : "#1a1a1a",
                  fontFamily: "Outfit, sans-serif",
                  lineHeight: 1.6,
                  whiteSpace: "pre-wrap",
                  wordBreak: "break-word",
                  opacity: isAtlas ? 0.85 : 1,
                }}>
                  {msg.content}
                  {msg.streaming && msg.content === "" && (
                    <span style={{ display: "inline-flex", gap: 3, alignItems: "center", height: "1em" }}>
                      {[0, 1, 2].map(i => (
                        <span key={i} style={{
                          width: 4, height: 4, borderRadius: "50%",
                          background: "#b5b0a6", display: "inline-block",
                          animation: `cooBounce 1.2s ${i * 0.2}s ease-in-out infinite`,
                        }} />
                      ))}
                    </span>
                  )}
                  {msg.streaming && msg.content !== "" && (
                    <span style={{
                      display: "inline-block", width: 2, height: "0.85em",
                      background: "#1a1a1a", marginLeft: 1,
                      verticalAlign: "text-bottom",
                      animation: "cooBlink 1s step-end infinite",
                    }} />
                  )}
                </div>
              </div>
            </div>
          );
        })}
        <div ref={bottomRef} />
      </div>

      {/* Input */}
      <div style={{ flexShrink: 0, borderTop: "1px solid #e8e4dc", padding: "10px 12px 10px", background: "#fff" }}>
        <div style={{ display: "flex", gap: 7, alignItems: "flex-end" }}>
          <textarea
            ref={textareaRef}
            value={input}
            onChange={e => setInput(e.target.value)}
            onKeyDown={e => {
              if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(); }
            }}
            placeholder={loading ? "Thinking…" : "Ask anything…"}
            disabled={loading}
            rows={2}
            style={{
              flex: 1, resize: "none",
              border: "1px solid #e8e4dc", borderRadius: 10,
              padding: "8px 10px", fontSize: "0.79rem",
              fontFamily: "Outfit, sans-serif",
              color: "#1a1a1a", outline: "none",
              background: "#faf8f5", lineHeight: 1.5,
            }}
          />
          <button
            onClick={send}
            disabled={!input.trim() || loading}
            style={{
              width: 32, height: 32, flexShrink: 0,
              border: "none", borderRadius: 8,
              background: input.trim() && !loading ? "#1a1a1a" : "#e8e4dc",
              color: input.trim() && !loading ? "#fff" : "#b5b0a6",
              cursor: input.trim() && !loading ? "pointer" : "default",
              display: "flex", alignItems: "center", justifyContent: "center",
              fontSize: "0.85rem",
            }}
          >↑</button>
        </div>
        <div style={{ fontSize: "0.6rem", color: "#c5c0b8", marginTop: 5, fontFamily: "Outfit, sans-serif" }}>
          ↵ send · Shift+↵ newline
        </div>
      </div>

      <style>{`
        @keyframes cooBounce {
          0%, 60%, 100% { transform: translateY(0); }
          30% { transform: translateY(-4px); }
        }
        @keyframes cooBlink {
          0%, 100% { opacity: 1; }
          50% { opacity: 0; }
        }
      `}</style>
    </div>
  );
}