// 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.PACApi.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.PACApi.todos.create(t); setTodos(prev => [...prev, todo]); } catch {}
  };

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

  const remove = async (id) => {
    try { await window.PACApi.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(--pac-navy)' : 'var(--border)'}`,
                background: todo.done ? 'var(--pac-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(--pac-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>
  );
};

const Dashboard = ({ user }) => {
  const TaskDetailDrawer = window.TaskDetailDrawer || 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 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.PACApi.cases.list(),
      window.PACApi.tasks.list(),
      window.PACApi.events.list({ from: todayStr, to: in7Str }),
      window.PACApi.clients.list(),
      window.PACApi.users.list(),
    ]).then(([cs, ts, ev, cl, us]) => {
      setCases(cs || []);
      setTasks(ts || []);
      setEvents(ev || []);
      setClients(cl || []);
      setUsers(us || []);
    }).catch(() => {}).finally(() => setLoading(false));

    // Busca eventos do Google Calendar em paralelo (sem bloquear o loading)
    window.PACApi.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');
  const dueTodayTasks = tasks.filter(t => t.due_date && t.due_date.slice(0, 10) === todayStr && t.kanban_column !== 'concluido');
  const todayEvents = events.filter(e => e.starts_at && e.starts_at.slice(0, 10) === todayStr);

  const fmtDate = (iso) => {
    if (!iso) return '';
    const d = new Date(iso);
    return d.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(--pac-navy)' }}>{myTasks.filter(t => t.kanban_column !== 'concluido').length} tarefas abertas</b>
                {' '}e a equipe cuida de <b style={{ color: 'var(--pac-navy)' }}>{activeCases.length} caso{activeCases.length !== 1 ? 's' : ''} ativo{activeCases.length !== 1 ? 's' : ''}</b>.</>
              : 'Boas-vindas ao PAC Sistema. 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">{myTasks.filter(t => t.kanban_column !== 'concluido').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">{events.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">{myTasks.filter(t => t.kanban_column !== 'concluido').length}</span>
            </div>
            {myTasks.filter(t => t.kanban_column !== 'concluido').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">
                {myTasks.filter(t => t.kanban_column !== 'concluido').slice(0, 8).map(t => (
                  <div key={t.id} className="task-item" onClick={() => setOpenTask(t)}
                    style={{ cursor: 'pointer' }}>
                    <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(--pac-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(--pac-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>
            )}
          </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(--pac-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">
                        <div style={{ width: 36, textAlign: 'center', flexShrink: 0 }}>
                          <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--pac-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(--pac-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>
                        {e._src === 'google' && (
                          <span style={{ fontSize: 10, color: '#4285F4', background: 'rgba(66,133,244,.08)', borderRadius: 4, padding: '1px 5px', fontWeight: 600, flexShrink: 0 }}>G</span>
                        )}
                      </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(--pac-navy)', opacity: 0.3, marginBottom: 12 }} />
              <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--pac-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 a usar o PAC Sistema.
              </div>
            </div>
          )}
        </div>
      </div>
    </div>

    {openTask && TaskDetailDrawer && (
      <TaskDetailDrawer
        task={openTask}
        clients={clients}
        cases={cases}
        users={users}
        clientMap={clientMap}
        userMap={userMap}
        onClose={() => setOpenTask(null)}
        onSaved={onTaskSaved}
        onDeleted={onTaskDeleted}
      />
    )}
    </>
  );
};

window.Dashboard = Dashboard;