// Dashboard executivo — dados reais da API

// ── Widget de To-do para o Dashboard ─────────────────────────
const DashTodo = () => {
  const [todos, setTodos] = React.useState([]);
  const [input, setInput] = React.useState('');
  const [loaded, setLoaded] = React.useState(false);

  React.useEffect(() => {
    window.OctaleApi.todos.list()
      .then(ts => { setTodos(ts || []); setLoaded(true); })
      .catch(() => setLoaded(true));
  }, []);

  const add = async () => {
    const t = input.trim();
    if (!t) return;
    setInput('');
    try { const todo = await window.OctaleApi.todos.create(t); setTodos(prev => [...prev, todo]); } catch {}
  };

  const toggle = async (id, done) => {
    try { const u = await window.OctaleApi.todos.update(id, { done: !done }); setTodos(prev => prev.map(t => t.id === id ? u : t)); } catch {}
  };

  const remove = async (id) => {
    try { await window.OctaleApi.todos.remove(id); setTodos(prev => prev.filter(t => t.id !== id)); } catch {}
  };

  const pending = todos.filter(t => !t.done);
  const done = todos.filter(t => t.done);

  return (
    <div className="panel" style={{ padding: 0, overflow: 'hidden' }}>
      <div className="panel-head" style={{ padding: '14px 16px 12px' }}>
        <h3>Meu To-do</h3>
        <span className="count">{pending.length}</span>
      </div>

      {/* Input rápido */}
      <div style={{ padding: '0 12px 10px', display: 'flex', gap: 6 }}>
        <input
          value={input} onChange={e => setInput(e.target.value)}
          onKeyDown={e => e.key === 'Enter' && add()}
          placeholder="Adicionar item rápido…"
          style={{ flex: 1, padding: '7px 10px', border: '1px solid var(--border)', borderRadius: 5, fontSize: 12, outline: 'none', background: 'var(--bg)' }}
        />
        <button onClick={add} disabled={!input.trim()} className="btn sm" style={{ flexShrink: 0, padding: '0 10px' }}>
          <Icon name="plus" size={12} />
        </button>
      </div>

      {/* Lista */}
      {!loaded ? (
        <div style={{ padding: '12px 16px', color: 'var(--fg-muted)', fontSize: 12 }}>Carregando…</div>
      ) : pending.length === 0 && done.length === 0 ? (
        <div style={{ padding: '12px 16px 16px', color: 'var(--fg-muted)', fontSize: 12, textAlign: 'center' }}>
          Nenhum item. Adicione acima.
        </div>
      ) : (
        <div style={{ maxHeight: 220, overflowY: 'auto' }}>
          {pending.concat(done).map(todo => (
            <div key={todo.id} style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '6px 14px', opacity: todo.done ? 0.45 : 1 }}>
              <button onClick={() => toggle(todo.id, todo.done)} style={{
                width: 16, height: 16, borderRadius: 3, border: `1.5px solid ${todo.done ? 'var(--octale-navy)' : 'var(--border)'}`,
                background: todo.done ? 'var(--octale-navy)' : 'transparent', cursor: 'pointer', flexShrink: 0,
                display: 'grid', placeItems: 'center',
              }}>
                {todo.done && <svg width="9" height="7" viewBox="0 0 9 7" fill="none"><path d="M1 3.5l2.5 2.5 4.5-5.5" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>}
              </button>
              <span style={{ flex: 1, fontSize: 12.5, color: 'var(--octale-black)', textDecoration: todo.done ? 'line-through' : 'none', lineHeight: 1.3 }}>
                {todo.title}
              </span>
              <button onClick={() => remove(todo.id)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--fg-muted)', padding: 2, opacity: 0.6 }}>
                <Icon name="x" size={11} />
              </button>
            </div>
          ))}
        </div>
      )}
      {(pending.length > 0 || done.length > 0) && (
        <div style={{ padding: '8px 14px', borderTop: '1px solid var(--border)', fontSize: 11, color: 'var(--fg-muted)' }}>
          {done.length} de {todos.length} concluído{todos.length !== 1 ? 's' : ''}
        </div>
      )}
    </div>
  );
};

// ─── Feed Global (painel em tempo real no Dashboard) ──────────────────────────
const POLL_INTERVAL_MS = 30000;

const GlobalFeedPanel = ({ currentUser }) => {
  const [items, setItems]       = React.useState([]);
  const [loading, setLoading]   = React.useState(true);
  const [msg, setMsg]           = React.useState('');
  const [posting, setPosting]   = React.useState(false);
  const [newCount, setNewCount] = React.useState(0);
  const latestAtRef = React.useRef(null);
  const intervalRef = React.useRef(null);
  const textareaRef = React.useRef(null);

  // Carga inicial
  React.useEffect(() => {
    window.OctaleApi.dashboard.feed({ limit: 50 })
      .then(rows => {
        setItems(rows || []);
        if (rows && rows.length > 0) latestAtRef.current = rows[0].created_at;
      })
      .catch(() => {})
      .finally(() => setLoading(false));

    // Polling a cada 30s
    intervalRef.current = setInterval(async () => {
      try {
        const since = latestAtRef.current;
        if (!since) return;
        const fresh = await window.OctaleApi.dashboard.feed({ since, limit: 50 });
        if (fresh && fresh.length > 0) {
          latestAtRef.current = fresh[0].created_at;
          setItems(prev => {
            const existingIds = new Set(prev.map(i => i.id));
            const truly_new = fresh.filter(i => !existingIds.has(i.id));
            if (truly_new.length === 0) return prev;
            setNewCount(c => c + truly_new.length);
            return [...truly_new, ...prev].slice(0, 150);
          });
        }
      } catch {}
    }, POLL_INTERVAL_MS);

    return () => clearInterval(intervalRef.current);
  }, []);

  const publish = async () => {
    const text = msg.trim();
    if (!text || posting) return;
    setPosting(true);
    try {
      await window.OctaleApi.dashboard.postAnnouncement(text);
      setMsg('');
      // Força atualização imediata
      const fresh = await window.OctaleApi.dashboard.feed({ limit: 50 });
      if (fresh && fresh.length > 0) {
        latestAtRef.current = fresh[0].created_at;
        setItems(fresh);
      }
    } catch (e) {
      alert('Erro ao publicar: ' + (e.message || 'tente novamente.'));
    } finally {
      setPosting(false);
    }
  };

  const clearNew = () => setNewCount(0);

  const ActivityFeed = window.ActivityFeed;

  return (
    <div className="panel" style={{ padding: 0, overflow: 'hidden' }}>
      {/* Cabeçalho */}
      <div className="panel-head" style={{ padding: '14px 16px 12px', cursor: 'default' }} onClick={clearNew}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <h3>Feed · Atividade da equipe</h3>
          {newCount > 0 && (
            <span style={{
              background: 'var(--octale-neon)', color: '#1a1a2e',
              borderRadius: 999, fontSize: 10, fontWeight: 800,
              padding: '1px 7px', lineHeight: '16px',
              animation: 'pulse 1.5s ease-in-out infinite',
            }}>{newCount} novo{newCount > 1 ? 's' : ''}</span>
          )}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <span title="Atualização automática a cada 30s" style={{
            width: 7, height: 7, borderRadius: 999,
            background: '#059669', display: 'inline-block',
            boxShadow: '0 0 0 2px #d1fae5',
          }} />
          <span style={{ fontSize: 10.5, color: 'var(--fg-muted)' }}>ao vivo</span>
        </div>
      </div>

      {/* Caixa de comunicado */}
      <div style={{ padding: '0 14px 12px', borderBottom: '1px solid var(--border)' }}>
        <textarea
          ref={textareaRef}
          value={msg}
          onChange={e => setMsg(e.target.value)}
          onKeyDown={e => {
            if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) publish();
          }}
          placeholder="Escreva um comunicado para a equipe… (Ctrl+Enter para publicar)"
          rows={2}
          style={{
            width: '100%', resize: 'vertical',
            padding: '8px 10px', border: '1px solid var(--border)',
            borderRadius: 6, fontSize: 12.5, lineHeight: 1.45,
            fontFamily: 'inherit', outline: 'none',
            background: 'var(--bg)', color: 'var(--octale-black)',
            boxSizing: 'border-box',
          }}
        />
        <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 6 }}>
          <button
            onClick={publish}
            disabled={!msg.trim() || posting}
            className="btn sm"
            style={{ padding: '5px 16px', fontSize: 12 }}
          >
            {posting ? 'Publicando…' : 'Publicar'}
          </button>
        </div>
      </div>

      {/* Lista de atividades */}
      <div style={{ maxHeight: 360, overflowY: 'auto' }}>
        {ActivityFeed
          ? <ActivityFeed
              items={items}
              loading={loading}
              emptyMessage="Nenhuma atividade ainda. Faça alguma ação na plataforma."
              currentUserId={currentUser?.id}
              onDeleteItem={async (id) => {
                try {
                  await window.OctaleApi.dashboard.deleteAnnouncement(id);
                  setItems(prev => prev.filter(i => i.id !== id));
                } catch (e) {
                  alert('Erro ao excluir: ' + (e.message || 'tente novamente.'));
                }
              }}
            />
          : <div style={{ padding: 16, color: 'var(--fg-muted)', fontSize: 12 }}>Carregando…</div>
        }
      </div>
    </div>
  );
};

const Dashboard = ({ user }) => {
  const TaskDetailDrawer = window.TaskDetailDrawer || null;
  const EventToTaskModal = window.EventToTaskModal || null;
  const [cases, setCases] = React.useState([]);
  const [tasks, setTasks] = React.useState([]);
  const [events, setEvents] = React.useState([]);
  const [clients, setClients] = React.useState([]);
  const [users, setUsers] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [googleEvents, setGoogleEvents] = React.useState([]);
  const [openTask, setOpenTask] = React.useState(null);
  const [taskFromEvent, setTaskFromEvent] = React.useState(null);
  const [mySubtasks, setMySubtasks] = React.useState([]);

  const today = new Date();
  const todayStr = today.toISOString().slice(0, 10);
  const in7Days = new Date(today); in7Days.setDate(today.getDate() + 7);
  const in7Str = in7Days.toISOString().slice(0, 10);

  React.useEffect(() => {
    Promise.all([
      window.OctaleApi.cases.list(),
      window.OctaleApi.tasks.list(),
      window.OctaleApi.events.list({ from: todayStr, to: in7Str }),
      window.OctaleApi.clients.list(),
      window.OctaleApi.users.list(),
    ]).then(([cs, ts, ev, cl, us]) => {
      setCases(cs || []);
      setTasks(ts || []);
      setEvents(ev || []);
      setClients(cl || []);
      setUsers(us || []);
    }).catch(() => {}).finally(() => setLoading(false));

    // Subtarefas atribuídas a mim (com contexto do card pai)
    if (user?.id) {
      window.OctaleApi.tasks.subtasksFeed({ owner: user.id })
        .then(ss => setMySubtasks(ss || []))
        .catch(() => {});
    }

    // Busca eventos do Google Calendar em paralelo (sem bloquear o loading)
    window.OctaleApi.calendar.getGoogleEvents()
      .then(evs => {
        if (!evs?.length) return;
        const now = new Date();
        const limit = new Date(now); limit.setDate(now.getDate() + 7);
        const filtered = evs.filter(e => {
          if (!e.starts_at) return false;
          const d = new Date(e.starts_at);
          return d >= now && d <= limit;
        });
        setGoogleEvents(filtered);
      })
      .catch(() => {});
  }, []);

  const firstName = user?.name?.split(' ')[0] || 'você';
  const hour = today.getHours();
  const greeting = hour < 12 ? 'Bom dia' : hour < 18 ? 'Boa tarde' : 'Boa noite';

  const activeCases = cases.filter(c => !['Encerrado', 'Arquivado'].includes(c.status));
  const myTasks = tasks.filter(t => t.owner_user_id === user?.id || t.reviewer_user_id === user?.id);
  const openTasks = tasks.filter(t => t.kanban_column !== 'concluido');

  // ── Minhas tarefas abertas: ordem cronológica + drag-to-reorder ──
  const myOpenTasks = myTasks.filter(t => t.kanban_column !== 'concluido');
  // Subtarefas atribuídas a mim e ainda não concluídas
  const myOpenSubtasks = mySubtasks.filter(s => !s.done);
  const openParentTask = (subtask) => {
    const parent = tasks.find(t => t.id === subtask.task_id);
    if (parent) setOpenTask(parent);
  };
  const [taskOrder, setTaskOrder] = React.useState(null);
  const [draggingIdx, setDraggingIdx] = React.useState(null);

  const myOpenIdsKey = myOpenTasks.map(t => t.id).sort().join(',');
  React.useEffect(() => {
    const sorted = [...myOpenTasks].sort((a, b) => {
      if (!a.due_date && !b.due_date) return 0;
      if (!a.due_date) return 1;
      if (!b.due_date) return -1;
      return new Date(a.due_date) - new Date(b.due_date);
    });
    setTaskOrder(prev => {
      if (!prev) return sorted.map(t => t.id);
      const existingSet = new Set(sorted.map(t => t.id));
      const kept = prev.filter(id => existingSet.has(id));
      const added = sorted.filter(t => !prev.includes(t.id)).map(t => t.id);
      return [...kept, ...added];
    });
  }, [myOpenIdsKey]);

  const orderedMyOpenTasks = React.useMemo(() => {
    if (!taskOrder) return myOpenTasks;
    const byId = Object.fromEntries(myOpenTasks.map(t => [t.id, t]));
    return taskOrder.map(id => byId[id]).filter(Boolean);
  }, [taskOrder, myOpenTasks]);

  const onTaskDragStart = (idx) => setDraggingIdx(idx);
  const onTaskDragOver = (e, idx) => {
    e.preventDefault();
    if (draggingIdx === null || draggingIdx === idx) return;
    setTaskOrder(prev => {
      const next = [...prev];
      const [moved] = next.splice(draggingIdx, 1);
      next.splice(idx, 0, moved);
      setDraggingIdx(idx);
      return next;
    });
  };
  const onTaskDragEnd = () => setDraggingIdx(null);
  const dueTodayTasks = tasks.filter(t => t.due_date && t.due_date.slice(0, 10) === todayStr && t.kanban_column !== 'concluido');
  const todayEvents = [...events, ...googleEvents].filter(e => e.starts_at && e.starts_at.slice(0, 10) === todayStr);
  const allWeekEvents = [...events, ...googleEvents];

  const fmtDate = (iso) => {
    if (!iso) return '';
    const s = String(iso);
    // Colunas DATE do Postgres chegam como 'YYYY-MM-DD' (sem horário). new Date()
    // interpreta como UTC midnight → toLocaleDateString em BRT (UTC−3) volta um dia.
    // Formatar manualmente nesses casos preserva o dia salvo.
    if (!s.includes('T') && /^\d{4}-\d{2}-\d{2}/.test(s)) {
      const [, m, d] = s.slice(0, 10).split('-');
      return `${d}/${m}`;
    }
    return new Date(iso).toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit' });
  };

  const fmtTime = (iso) => {
    if (!iso) return '';
    const d = new Date(iso);
    return d.toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' });
  };

  const colLabel = {
    novo: 'Novo', analise: 'Em análise', cliente: 'Aguardando cliente',
    redacao: 'Em redação', revisao: 'Em revisão', externos: 'Aguardando externos', concluido: 'Concluído',
  };

  const clientMap = React.useMemo(() => Object.fromEntries(clients.map(c => [c.id, c])), [clients]);
  const userMap   = React.useMemo(() => Object.fromEntries(users.map(u => [u.id, u])), [users]);

  const onTaskSaved = (updated) => {
    setTasks(prev => prev.map(t => t.id === updated.id ? updated : t));
    setOpenTask(updated);
  };
  const onTaskDeleted = (id) => {
    setTasks(prev => prev.filter(t => t.id !== id));
    setOpenTask(null);
  };

  if (loading) return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: 300, gap: 12, color: 'var(--fg-muted)', fontSize: 13 }}>
      <div className="spinner" /> Carregando dashboard…
    </div>
  );

  return (
    <>
    <div className="dash">
      <div className="dash-head">
        <div>
          <div className="eyebrow muted">
            {today.toLocaleDateString('pt-BR', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' })}
          </div>
          <h1>{greeting}, {firstName}.</h1>
          <div className="sub">
            {activeCases.length > 0
              ? <>Você tem <b style={{ color: 'var(--octale-navy)' }}>{myOpenTasks.length + myOpenSubtasks.length} tarefas abertas</b>
                {' '}e a equipe cuida de <b style={{ color: 'var(--octale-navy)' }}>{activeCases.length} caso{activeCases.length !== 1 ? 's' : ''} ativo{activeCases.length !== 1 ? 's' : ''}</b>.</>
              : 'Boas-vindas à plataforma. Comece cadastrando um cliente.'}
          </div>
        </div>
      </div>

      {/* KPIs */}
      <div className="kpi-row" style={{ marginBottom: 20 }}>
        <div className="kpi">
          <div className="lbl">Casos ativos</div>
          <div className="val">{activeCases.length}</div>
          <div className="delta">{clients.length} cliente{clients.length !== 1 ? 's' : ''} cadastrado{clients.length !== 1 ? 's' : ''}</div>
        </div>
        <div className="kpi">
          <div className="lbl">Tarefas abertas</div>
          <div className="val">{openTasks.length}</div>
          <div className="delta">{myOpenTasks.length + myOpenSubtasks.length} sob minha responsabilidade</div>
        </div>
        <div className="kpi">
          <div className="lbl">Vencendo hoje</div>
          <div className="val" style={{ color: dueTodayTasks.length > 0 ? '#C2253E' : undefined }}>{dueTodayTasks.length}</div>
          <div className="delta">{dueTodayTasks.length > 0 ? 'Atenção requerida' : 'Sem urgências hoje'}</div>
        </div>
        <div className="kpi">
          <div className="lbl">Eventos esta semana</div>
          <div className="val">{allWeekEvents.length}</div>
          <div className="delta">{todayEvents.length} hoje</div>
        </div>
      </div>

      <div className="dash-grid">
        {/* Coluna esquerda */}
        <div className="dash-col">

          {/* Minhas tarefas abertas */}
          <div className="panel">
            <div className="panel-head">
              <h3>Minhas tarefas abertas</h3>
              <span className="count">{myOpenTasks.length + myOpenSubtasks.length}</span>
            </div>
            {orderedMyOpenTasks.length === 0 && myOpenSubtasks.length === 0 ? (
              <div style={{ padding: '20px 0', textAlign: 'center', color: 'var(--fg-muted)', fontSize: 12 }}>
                Nenhuma tarefa aberta atribuída a você.
              </div>
            ) : (
              <div className="task-list">
                {orderedMyOpenTasks.slice(0, 8).map((t, idx) => (
                  <div key={t.id} className="task-item"
                    draggable
                    onDragStart={() => onTaskDragStart(idx)}
                    onDragOver={e => onTaskDragOver(e, idx)}
                    onDragEnd={onTaskDragEnd}
                    onClick={() => setOpenTask(t)}
                    style={{ cursor: 'grab', opacity: draggingIdx === idx ? 0.5 : 1 }}>
                    <span style={{ color: 'var(--fg-muted)', fontSize: 11, flexShrink: 0, cursor: 'grab', paddingRight: 2 }}>⠿</span>
                    <span className={`dot ${(t.priority || 'Média').toLowerCase().replace('é', 'e')}`} />
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--octale-black)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                        {t.title}
                      </div>
                      <div style={{ fontSize: 11, color: 'var(--fg-muted)', marginTop: 2, display: 'flex', gap: 8 }}>
                        <span>{colLabel[t.kanban_column] || t.kanban_column}</span>
                        {t.reviewer_user_id && t.reviewer_user_id !== t.owner_user_id && (
                          <span style={{ color: 'var(--octale-navy)' }}>· revisor</span>
                        )}
                      </div>
                    </div>
                    {t.due_date && (
                      <span style={{ fontSize: 11, color: t.due_date.slice(0,10) === todayStr ? '#C2253E' : 'var(--fg-muted)', fontWeight: 600, whiteSpace: 'nowrap' }}>
                        {fmtDate(t.due_date)}
                      </span>
                    )}
                  </div>
                ))}
              </div>
            )}

            {/* Subtarefas atribuídas a mim */}
            {myOpenSubtasks.length > 0 && (
              <div style={{ borderTop: '1px solid var(--border)', marginTop: 4, paddingTop: 8 }}>
                <div style={{ fontSize: 10.5, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.05em', color: 'var(--fg-muted)', padding: '0 2px 6px' }}>
                  Subtarefas atribuídas a mim
                </div>
                <div className="task-list">
                  {myOpenSubtasks.slice(0, 8).map(s => (
                    <div key={s.id} className="task-item" onClick={() => openParentTask(s)} style={{ cursor: 'pointer' }}>
                      <span style={{ color: 'var(--fg-muted)', fontSize: 11, flexShrink: 0, paddingRight: 2 }}>↳</span>
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--octale-black)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                          {s.title}
                        </div>
                        <div style={{ fontSize: 11, color: 'var(--fg-muted)', marginTop: 2 }}>
                          {s.parent_title ? `subtarefa · ${s.parent_title}` : 'subtarefa'}
                        </div>
                      </div>
                      {s.due_date && (
                        <span style={{ fontSize: 11, color: s.due_date.slice(0,10) === todayStr ? '#C2253E' : 'var(--fg-muted)', fontWeight: 600, whiteSpace: 'nowrap' }}>
                          {fmtDate(s.due_date)}
                        </span>
                      )}
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>

          {/* Casos ativos */}
          {activeCases.length > 0 && (
            <div className="panel">
              <div className="panel-head">
                <h3>Casos ativos</h3>
                <span className="count">{activeCases.length}</span>
              </div>
              <div className="task-list">
                {activeCases.slice(0, 6).map(c => (
                  <div key={c.id} className="task-item">
                    <span className={`dot ${(c.priority || 'Média').toLowerCase().replace('é', 'e')}`} />
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--octale-black)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                        {c.number} · {c.title}
                      </div>
                      <div style={{ fontSize: 11, color: 'var(--fg-muted)', marginTop: 2 }}>
                        {c.area} · {c.status}
                      </div>
                    </div>
                    {c.deadline && (
                      <span style={{ fontSize: 11, color: 'var(--fg-muted)', whiteSpace: 'nowrap' }}>
                        até {fmtDate(c.deadline)}
                      </span>
                    )}
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>

        {/* Coluna direita */}
        <div className="dash-col">

          {/* Agenda da semana */}
          {(() => {
            const allAgenda = [
              ...events.map(e => ({ ...e, _src: 'pac' })),
              ...googleEvents.map(e => ({ ...e, _src: 'google' })),
            ].sort((a, b) => new Date(a.starts_at) - new Date(b.starts_at));
            return (
              <div className="panel">
                <div className="panel-head">
                  <h3>Agenda · próximos 7 dias</h3>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                    {googleEvents.length > 0 && (
                      <span title="Inclui Google Calendar" style={{ fontSize: 10, background: 'rgba(66,133,244,.1)', color: '#4285F4', borderRadius: 4, padding: '1px 6px', fontWeight: 600 }}>G</span>
                    )}
                    <span className="count">{allAgenda.length}</span>
                  </div>
                </div>
                {allAgenda.length === 0 ? (
                  <div style={{ padding: '20px 0', textAlign: 'center', color: 'var(--fg-muted)', fontSize: 12 }}>
                    Nenhum evento agendado para esta semana.
                  </div>
                ) : (
                  <div className="task-list">
                    {allAgenda.slice(0, 10).map(e => (
                      <div key={e.id} className="task-item" style={{ cursor: 'pointer' }} onClick={() => setTaskFromEvent(e)}>
                        <div style={{ width: 36, textAlign: 'center', flexShrink: 0 }}>
                          <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--octale-navy)', lineHeight: 1 }}>{fmtDate(e.starts_at)}</div>
                          <div style={{ fontSize: 10, color: 'var(--fg-muted)' }}>{fmtTime(e.starts_at)}</div>
                        </div>
                        <div style={{ flex: 1, minWidth: 0 }}>
                          <div style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--octale-black)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                            {e.title}
                          </div>
                          {e.description && (
                            <div style={{ fontSize: 11, color: 'var(--fg-muted)', marginTop: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{e.description.slice(0, 60)}</div>
                          )}
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexShrink: 0 }}>
                          {e._src === 'google' && (
                            <span style={{ fontSize: 10, color: '#4285F4', background: 'rgba(66,133,244,.08)', borderRadius: 4, padding: '1px 5px', fontWeight: 600 }}>G</span>
                          )}
                          <span title="Transformar em tarefa" style={{ fontSize: 10, color: 'var(--fg-muted)', background: 'var(--surface)', borderRadius: 4, padding: '2px 6px', border: '1px solid var(--border)', fontWeight: 600 }}>
                            + tarefa
                          </span>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            );
          })()}

          {/* To-do pessoal */}
          <DashTodo />

          {/* Estado vazio — boas-vindas */}
          {activeCases.length === 0 && openTasks.length === 0 && (
            <div className="panel" style={{ textAlign: 'center', padding: '32px 24px' }}>
              <Icon name="sparkles" size={32} style={{ color: 'var(--octale-navy)', opacity: 0.3, marginBottom: 12 }} />
              <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--octale-navy)', marginBottom: 6 }}>Sistema pronto para uso</div>
              <div style={{ fontSize: 12, color: 'var(--fg-muted)', lineHeight: 1.6 }}>
                Cadastre o primeiro cliente, crie um caso e adicione tarefas para começar.
              </div>
            </div>
          )}
        </div>
      </div>

      {/* Feed global — faixa full-width */}
      <div style={{ marginTop: 20 }}>
        <GlobalFeedPanel currentUser={user} />
      </div>

      {/* Atividade da equipe (etapa 13) */}
      {window.TeamActivityBlock && <window.TeamActivityBlock />}
    </div>

    {openTask && TaskDetailDrawer && (
      <TaskDetailDrawer
        task={openTask}
        clients={clients}
        cases={cases}
        users={users}
        clientMap={clientMap}
        userMap={userMap}
        onClose={() => setOpenTask(null)}
        onSaved={onTaskSaved}
        onDeleted={onTaskDeleted}
      />
    )}
    {taskFromEvent && EventToTaskModal && (
      <EventToTaskModal
        event={taskFromEvent}
        clients={clients}
        cases={cases}
        users={users}
        onClose={() => setTaskFromEvent(null)}
        onCreated={(t) => { setTasks(prev => [...prev, t]); }}
      />
    )}
    </>
  );
};

// ─── Atividade da Equipe (bloco no Dashboard) ─────────────────────────
const TeamActivityBlock = () => {
  const [period, setPeriod] = React.useState('30d');
  const [users, setUsers] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [sortKey, setSortKey] = React.useState('total');
  const [sortDir, setSortDir] = React.useState('desc');

  React.useEffect(() => {
    setLoading(true);
    window.OctaleApi.dashboard.userActivity(period)
      .then(d => setUsers(d.users || []))
      .catch(() => setUsers([]))
      .finally(() => setLoading(false));
  }, [period]);

  const cols = [
    { k: 'tasks_created',         label: 'Tarefas criadas',     short: 'Criou' },
    { k: 'tasks_concluded',       label: 'Tarefas finalizadas', short: 'Finalizou' },
    { k: 'cases_created',         label: 'Casos cadastrados',   short: 'Casos' },
    { k: 'clients_created',       label: 'Clientes cadastrados', short: 'Clientes' },
    { k: 'documents_uploaded',    label: 'Documentos enviados', short: 'Docs' },
    { k: 'propostas_created',     label: 'Propostas criadas',   short: 'Propostas' },
    { k: 'comments_made',         label: 'Comentários',         short: 'Coment.' },
    { k: 'levantamentos_created', label: 'MLE peticionados',    short: 'MLE pet.' },
    { k: 'levantamentos_received', label: 'MLE recebidos',      short: 'MLE rec.' },
    { k: 'total',                 label: 'Total de ações',      short: 'Total' },
  ];

  const sorted = React.useMemo(() => {
    const arr = [...users];
    arr.sort((a, b) => {
      const av = a[sortKey] ?? 0, bv = b[sortKey] ?? 0;
      if (typeof av === 'string') {
        return sortDir === 'desc' ? bv.localeCompare(av) : av.localeCompare(bv);
      }
      return sortDir === 'desc' ? bv - av : av - bv;
    });
    return arr;
  }, [users, sortKey, sortDir]);

  const totals = React.useMemo(() => {
    const t = { name: 'Total da equipe' };
    cols.forEach(c => t[c.k] = users.reduce((s, u) => s + (u[c.k] || 0), 0));
    return t;
  }, [users]);

  const sortBy = (k) => {
    if (sortKey === k) setSortDir(d => d === 'desc' ? 'asc' : 'desc');
    else { setSortKey(k); setSortDir('desc'); }
  };

  const periodLabel = { '7d':'Últimos 7 dias', '30d':'Últimos 30 dias', '90d':'Últimos 90 dias', 'all':'Tudo' };

  return (
    <div className="panel" style={{ padding: 0, overflow: 'hidden', marginTop: 20 }}>
      <div className="panel-head" style={{ padding: '14px 16px 12px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <h3 style={{ margin: 0 }}>Atividade da equipe</h3>
          <span style={{ fontSize: 11, color: 'var(--fg-muted)' }}>{periodLabel[period]}</span>
        </div>
        <div style={{ display: 'flex', gap: 4 }}>
          {['7d','30d','90d','all'].map(p => (
            <button key={p} onClick={() => setPeriod(p)} style={{
              padding: '4px 10px', borderRadius: 6, fontSize: 11.5, fontWeight: 600, cursor: 'pointer',
              border: period === p ? '1px solid var(--octale-navy)' : '1px solid var(--border)',
              background: period === p ? 'var(--octale-navy)' : '#fff',
              color: period === p ? '#fff' : 'var(--fg-muted)',
            }}>{p === 'all' ? 'Tudo' : p.toUpperCase()}</button>
          ))}
        </div>
      </div>

      <div style={{ overflowX: 'auto' }}>
        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12 }}>
          <thead>
            <tr style={{ background: 'var(--bg-secondary)' }}>
              <th style={{ textAlign: 'left', padding: '8px 12px', fontWeight: 700, color: 'var(--fg-muted)', textTransform: 'uppercase', letterSpacing: '.05em', fontSize: 10.5, borderBottom: '1px solid var(--border)' }}>Usuário</th>
              {cols.map(c => (
                <th key={c.k} onClick={() => sortBy(c.k)} title={c.label}
                  style={{
                    textAlign: 'center', padding: '8px 8px', fontWeight: 700,
                    color: sortKey === c.k ? 'var(--octale-navy)' : 'var(--fg-muted)',
                    textTransform: 'uppercase', letterSpacing: '.05em', fontSize: 10.5,
                    borderBottom: '1px solid var(--border)', cursor: 'pointer',
                    background: sortKey === c.k ? 'rgba(23,23,15,.05)' : undefined,
                    whiteSpace: 'nowrap',
                  }}>
                  {c.short} {sortKey === c.k && (sortDir === 'desc' ? '↓' : '↑')}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {loading ? (
              <tr><td colSpan={cols.length + 1} style={{ padding: 20, textAlign: 'center', color: 'var(--fg-muted)' }}>
                <span className="spinner" style={{ width: 12, height: 12, marginRight: 6, verticalAlign: 'middle' }} /> Carregando…
              </td></tr>
            ) : sorted.length === 0 ? (
              <tr><td colSpan={cols.length + 1} style={{ padding: 20, textAlign: 'center', color: 'var(--fg-muted)' }}>Sem atividade no período.</td></tr>
            ) : sorted.map(u => (
              <tr key={u.user_id} style={{ borderBottom: '1px solid var(--border)' }}>
                <td style={{ padding: '8px 12px' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <UserAvatar user={u} size={22} style={{ borderRadius: 4, fontSize: 9.5 }} />
                    <div style={{ minWidth: 0 }}>
                      <div style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--octale-black)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: 180 }}>{u.name}</div>
                    </div>
                  </div>
                </td>
                {cols.map(c => {
                  const v = u[c.k] || 0;
                  return (
                    <td key={c.k} style={{
                      textAlign: 'center', padding: '8px 8px',
                      fontWeight: c.k === 'total' ? 700 : 500,
                      color: v === 0 ? 'var(--fg-muted)' : (c.k === 'total' ? 'var(--octale-navy)' : 'var(--octale-black)'),
                      opacity: v === 0 ? 0.4 : 1,
                      background: sortKey === c.k ? 'rgba(23,23,15,.02)' : undefined,
                    }}>{v}</td>
                  );
                })}
              </tr>
            ))}
            {/* Totalizador */}
            {!loading && sorted.length > 0 && (
              <tr style={{ background: 'var(--bg-secondary)', fontWeight: 700 }}>
                <td style={{ padding: '8px 12px', color: 'var(--octale-navy)', fontSize: 12 }}>Total da equipe</td>
                {cols.map(c => (
                  <td key={c.k} style={{ textAlign: 'center', padding: '8px 8px', color: 'var(--octale-navy)', fontWeight: 700 }}>
                    {totals[c.k] || 0}
                  </td>
                ))}
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
};

// Injeta o bloco de atividade no final da página do Dashboard.
// Convenção do projeto: wrap externo do return do Dashboard tem className="dash" ou similar;
// para não mexer no render existente, expomos o componente via window e o Dashboard
// será editado para renderizá-lo na seção apropriada.
window.TeamActivityBlock = TeamActivityBlock;
window.Dashboard = Dashboard;
// Reutilizados pelo Meu Painel (views/painel.jsx)
window.DashTodo = DashTodo;
window.GlobalFeedPanel = GlobalFeedPanel;