/* CRM Tasks — chat with the Task Agent (Aris) */
const { useState: useTk, useEffect: useTke, useRef: useTkr, useMemo: useTkm } = React;

const AGENT_TAG = { high: "CLIENT", medium: "FINANCE", low: "PROCURE" };
function useTasks() {
  const [tasks, setTasks] = useTk([]);

  useTke(() => {
    fetch(window.API_BASE + "/api/tasks/")
      .then(r => r.json())
      .then(data => {
        setTasks(Array.isArray(data) ? data.slice(0, 8).map(t => ({
          check: t.status === "done",
          title: t.title,
          due:   t.due_date || (t.status === "in_progress" ? "In progress" : "Open"),
          agent: AGENT_TAG[t.priority] || "CLIENT",
        })) : []);
      })
      .catch(() => setTasks([]));
  }, []);

  return tasks;
}

function ChatBubble({ from, text, typing }) {
  const isAris = from === "ARIS";
  return (
    <div className="chat-turn">
      <div className={`chat-name ${isAris ? "left" : "right"}`}>{from}</div>
      <div className={`chat-row ${isAris ? "left" : "right"}`}>
        {typing ? (
          <div className="chat-bubble aris typing">
            <span></span><span></span><span></span>
          </div>
        ) : (
          <div className={`chat-bubble ${isAris ? "aris" : "user"}`}>{text}</div>
        )}
      </div>
    </div>
  );
}

function TaskChat() {
  const taskList = useTasks();
  const [messages, setMessages] = useTk([
    { from: "ARIS", text: "Hey — I'm your Task Agent. I can help you plan your day, follow up on deals, or kick something to one of the specialist agents. What's on your plate?" },
  ]);
  const [input, setInput] = useTk("");
  const [pending, setPending] = useTk(false);
  const scrollRef = useTkr(null);

  useTke(() => {
    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
  }, [messages, pending]);

  const send = async () => {
    const text = input.trim();
    if (!text || pending) return;
    setMessages(m => [...m, { from: "VISITOR", text }]);
    setInput("");
    setPending(true);

    try {
      const sys = "You are Aris, a friendly task assistant inside an operations CRM for a small business. Keep replies short (1-3 sentences), conversational, action-oriented. If the user mentions a task, suggest a concrete next step or offer to dispatch it to one of four specialist agents: Procurement (inventory/orders), Finance (invoices/burn), Production (crews/jobs), or Client (renewals/emails). Don't use markdown or lists.";
      const history = [...messages, { from: "VISITOR", text }].slice(-8);
      const convo = history.map(m => `${m.from === "ARIS" ? "Assistant" : "User"}: ${m.text}`).join("\n");
      const prompt = `${sys}\n\n${convo}\nAssistant:`;
      const reply = await window.claude.complete(prompt);
      setMessages(m => [...m, { from: "ARIS", text: (reply || "").trim() || "Got it — let me think about that." }]);
    } catch (e) {
      setMessages(m => [...m, { from: "ARIS", text: "Hmm, I couldn't reach my tools just now. Try again in a moment." }]);
    } finally {
      setPending(false);
    }
  };

  const onKey = (e) => {
    if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(); }
  };

  const quickPrompts = [
    "What should I focus on today?",
    "Draft a follow-up to Karen Liu about her renewal.",
    "We're low on #8 stainless screws — order more.",
    "Who hasn't paid their May invoice?",
  ];

  return (
    <div className="tasks-page">
      <div className="page-head">
        <div className="meta">
          <span className="coord">Tasks</span>
          <span className="coord" style={{opacity: 0.6}}>Live assistant</span>
        </div>
        <h1>What needs <em>doing today?</em></h1>
        <div className="actions">
          <button className="btn-sm">View task list</button>
          <button className="btn-sm solid">+ New task</button>
        </div>
      </div>

      <div className="tasks-grid">
        {/* Chat panel (dark console) */}
        <div className="chat-panel">
          <div className="chat-head">
            <span className="chat-head-left">
              <span className="stat-dot active" />
              Live · Aris Assistant
            </span>
            <span className="chat-head-right">CONV_8A7F</span>
          </div>

          <div className="chat-stream" ref={scrollRef}>
            {messages.map((m, i) => (
              <ChatBubble key={i} from={m.from} text={m.text} />
            ))}
            {pending && <ChatBubble from="ARIS" typing />}
          </div>

          <div className="chat-input">
            <input
              type="text"
              placeholder="Type a message…"
              value={input}
              onChange={e => setInput(e.target.value)}
              onKeyDown={onKey}
              disabled={pending}
            />
            <button className="chat-send" onClick={send} disabled={pending || !input.trim()}>→</button>
          </div>
        </div>

        {/* Right rail */}
        <div className="tasks-rail">
          <div className="card">
            <div className="card-head">
              <span className="title">Try a prompt</span>
              <span className="meta">{quickPrompts.length} samples</span>
            </div>
            <div className="card-body" style={{padding: 14, display: "flex", flexDirection: "column", gap: 8}}>
              {quickPrompts.map((p, i) => (
                <button key={i} className="quick-prompt" onClick={() => { setInput(p); }}>
                  {p}
                </button>
              ))}
            </div>
          </div>

          <div className="card">
            <div className="card-head">
              <span className="title">Today · {taskList.filter(t => !t.check).length} open</span>
              <span className="meta">Live</span>
            </div>
            <div className="card-body" style={{padding: 0}}>
              {taskList.length === 0 && (
                <div style={{padding:"28px 18px", color:"var(--fog)", fontFamily:"var(--font-mono)", fontSize:11, letterSpacing:"0.1em", textAlign:"center"}}>
                  NO TASKS YET · CHAT WITH ARIS TO CREATE ONE
                </div>
              )}
              {taskList.map((t, i) => (
                <div key={i} className="task-row">
                  <span className={`task-check ${t.check ? "done" : ""}`}>
                    {t.check && <svg width="11" height="11" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 7l3 3 5-6"/></svg>}
                  </span>
                  <div className="task-body">
                    <div className={`task-title ${t.check ? "done" : ""}`}>{t.title}</div>
                    <div className="task-meta">{t.due}</div>
                  </div>
                  <span className="task-agent">{t.agent}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { TaskChat });