/* global React, Card, Badge, Button, Avatar, Icon, ICONS, sb */
const { useState, useEffect, useRef } = React;

function Stat({ label, value, delta, tone = 'success', onClick }) {
  const c = tone === 'success' ? 'var(--accent-success)' : tone === 'danger' ? 'var(--accent-danger)' : 'var(--fg-muted)';
  return (
    <Card padding={18} hoverable={!!onClick} onClick={onClick} style={{ cursor: onClick ? 'pointer' : 'default' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 11, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--fg-muted)' }}>{label}</div>
        {onClick && <Icon d={ICONS.arrowR} size={14} style={{ color: 'var(--fg-muted)' }}/>}
      </div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginTop: 8 }}>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 32, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1 }}>{value}</div>
        {delta && <div style={{ color: c, fontSize: 12, fontWeight: 600 }}>{delta}</div>}
      </div>
    </Card>
  );
}

function MiniKanban({ tasks, todayEvents = [], onNav }) {
  const todo  = tasks.filter(t => t.kanban_col === 'todo');
  const doing = tasks.filter(t => t.kanban_col === 'doing' || t.kanban_col === 'review');
  const done  = tasks.filter(t => t.kanban_col === 'done');
  const total = tasks.length;
  const TAG_COLORS = { DESIGN:'#36CFC9', DEV:'#789BFF', REVISÃO:'#FADB14', COPY:'#FA541C' };
  const cols = [
    { lab:'A fazer',     tone:'#597EF7', items: todo.slice(0,3)  },
    { lab:'Em andamento',tone:'#FADB14', items: doing.slice(0,3) },
    { lab:'Concluído',   tone:'#22C55E', items: done.slice(0,3)  },
  ];
  return (
    <Card padding={20}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: todayEvents.length > 0 ? 12 : 14 }}>
        <div>
          <div style={{ fontSize: 16, fontWeight: 700 }}>Quadro do dia</div>
          <div style={{ fontSize: 12, color: 'var(--fg-muted)', marginTop: 2 }}>Suas tarefas · {total} no total</div>
        </div>
        <Button variant="ghost" size="sm" onClick={()=>onNav && onNav('tasks')}>Ver tudo</Button>
      </div>

      {/* ── Agenda de hoje ── */}
      {todayEvents.length > 0 && (
        <div style={{ marginBottom: 16 }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--fg-muted)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 8 }}>Agenda de hoje</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            {todayEvents.map((ev, i) => (
              <div key={i} style={{ display: 'flex', gap: 0, borderRadius: 8, overflow: 'hidden', border: `1px solid ${ev.c}30`, background: `${ev.c}0d` }}>
                <span style={{ width: 3, flexShrink: 0, background: ev.c }}/>
                <div style={{ flex: 1, padding: '8px 12px', display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: ev.c, fontWeight: 700, flexShrink: 0 }}>{ev.t}</div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 12, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{ev.l}</div>
                    {ev.who && <div style={{ fontSize: 11, color: 'var(--fg-muted)', marginTop: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{ev.who}</div>}
                  </div>
                  {ev.meetLink && (
                    <a href={ev.meetLink} target="_blank" rel="noreferrer" style={{ flexShrink: 0, padding: '3px 8px', borderRadius: 5, background: 'rgba(0,137,123,0.12)', color: '#00897b', fontSize: 11, fontWeight: 600, textDecoration: 'none', border: '1px solid rgba(0,137,123,0.25)', whiteSpace: 'nowrap' }}>
                      Meet ↗
                    </a>
                  )}
                </div>
              </div>
            ))}
          </div>
          {total > 0 && <div style={{ height: 1, background: 'var(--border-subtle)', margin: '12px 0 0' }}/>}
        </div>
      )}

      {total === 0 && todayEvents.length === 0 ? (
        <div style={{ padding:'32px 0', textAlign:'center', color:'var(--fg-muted)', fontSize:13 }}>Nenhuma tarefa ou evento hoje.</div>
      ) : total === 0 ? null : (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
          {cols.map(col => (
            <div key={col.lab} style={{ background: 'var(--bg-elevated)', borderRadius: 10, padding: 12, display: 'flex', flexDirection: 'column', gap: 8, minHeight: 180 }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 4px' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontWeight: 700, fontSize: 12 }}>
                  <span style={{ width: 8, height: 8, borderRadius: '50%', background: col.tone }} />{col.lab}
                </div>
                <span style={{ fontSize: 10, color: 'var(--fg-muted)', fontFamily: 'var(--font-mono)' }}>{col.items.length}</span>
              </div>
              {col.items.length === 0 ? (
                <div style={{ flex:1, display:'flex', alignItems:'center', justifyContent:'center', color:'var(--fg-muted)', fontSize:11 }}>vazio</div>
              ) : col.items.map((it, i) => {
                const tc = TAG_COLORS[it.tg] || '#597EF7';
                return (
                  <div key={i} style={{ background: 'var(--bg-surface)', border: '1px solid var(--border-subtle)', borderRadius: 8, padding: 10, display: 'flex', flexDirection: 'column', gap: 6 }}>
                    {it.tg && <span style={{ display: 'inline-block', alignSelf: 'flex-start', fontFamily: 'var(--font-display)', fontSize: 9, fontWeight: 700, letterSpacing: '0.04em', padding: '2px 7px', borderRadius: 4, background: tc + '24', color: tc }}>{it.tg}</span>}
                    <div style={{ fontSize: 12, fontWeight: 600 }}>{it.t}</div>
                  </div>
                );
              })}
            </div>
          ))}
        </div>
      )}
    </Card>
  );
}

function Activity({ onNav }) {
  const links = [
    { icon:'📁', label:'Projetos',   sub:'Gerencie seus projetos',    nav:'projects' },
    { icon:'✅', label:'Tarefas',    sub:'Veja o que está em aberto', nav:'tasks'    },
    { icon:'💰', label:'Financeiro', sub:'Receitas e despesas',        nav:'finance'  },
    { icon:'👥', label:'Clientes',   sub:'Seus clientes ativos',       nav:'clients'  },
  ];
  return (
    <Card padding={20}>
      <div style={{ fontSize:16, fontWeight:700, marginBottom:14 }}>Explorar</div>
      <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
        {links.map((item, i) => (
          <button key={i} onClick={() => onNav?.(item.nav)} style={{
            display:'flex', alignItems:'center', gap:12, padding:'10px 12px',
            borderRadius:9, border:'1px solid var(--border-subtle)', background:'var(--bg-elevated)',
            color:'var(--fg-primary)', cursor:'pointer', fontFamily:'inherit', textAlign:'left', width:'100%',
          }}>
            <span style={{ fontSize:18, lineHeight:1 }}>{item.icon}</span>
            <div style={{ flex:1 }}>
              <div style={{ fontSize:13, fontWeight:600 }}>{item.label}</div>
              <div style={{ fontSize:11, color:'var(--fg-muted)', marginTop:1 }}>{item.sub}</div>
            </div>
            <span style={{ color:'var(--fg-muted)', fontSize:14 }}>→</span>
          </button>
        ))}
      </div>
    </Card>
  );
}

const TIMER_KEY = 'inbrivvo.timer';

function TimeTracker({ projectNames }) {
  // ── Persist timer across navigation using localStorage ──────────────────
  // Storage shape: { running, startTimestamp, accumulated, project, task, logs }
  // "accumulated" = seconds counted before current run; "startTimestamp" = Date.now() when run started
  const restore = () => {
    try {
      const s = JSON.parse(localStorage.getItem(TIMER_KEY) || 'null');
      if (!s) return { running: false, elapsed: 0, project: '', task: '', logs: [] };
      const acc = s.accumulated || 0;
      const live = s.running && s.startTimestamp ? Math.floor((Date.now() - s.startTimestamp) / 1000) : 0;
      return { running: !!s.running, elapsed: acc + live, project: s.project || '', task: s.task || '', logs: s.logs || [] };
    } catch { return { running: false, elapsed: 0, project: '', task: '', logs: [] }; }
  };

  const init = restore();
  const [running,  setRunning]  = useState(init.running);
  const [elapsed,  setElapsed]  = useState(init.elapsed);
  const [project,  setProject]  = useState(init.project);
  const [task,     setTask]     = useState(init.task);
  const [logs,     setLogs]     = useState(init.logs);
  const intervalRef  = useRef(null);
  const startTsRef   = useRef(running ? Date.now() - init.elapsed * 1000 : null);
  const accRef       = useRef(running ? 0 : init.elapsed); // seconds before current run

  // Save to localStorage whenever relevant state changes
  function persist(overrides = {}) {
    const state = {
      running:        overrides.running   !== undefined ? overrides.running   : running,
      startTimestamp: overrides.startTs   !== undefined ? overrides.startTs   : startTsRef.current,
      accumulated:    overrides.acc       !== undefined ? overrides.acc       : accRef.current,
      project:        overrides.project   !== undefined ? overrides.project   : project,
      task:           overrides.task      !== undefined ? overrides.task      : task,
      logs:           overrides.logs      !== undefined ? overrides.logs      : logs,
    };
    localStorage.setItem(TIMER_KEY, JSON.stringify(state));
  }

  function fmt(s) {
    const h  = String(Math.floor(s / 3600)).padStart(2, '0');
    const m  = String(Math.floor((s % 3600) / 60)).padStart(2, '0');
    const ss = String(s % 60).padStart(2, '0');
    return `${h}:${m}:${ss}`;
  }

  useEffect(() => {
    if (running) {
      intervalRef.current = setInterval(() => {
        const live = Math.floor((Date.now() - startTsRef.current) / 1000);
        setElapsed(accRef.current + live);
      }, 1000);
    } else {
      clearInterval(intervalRef.current);
    }
    return () => clearInterval(intervalRef.current);
  }, [running]);

  function handleStart() {
    if (!project) { window.__toast?.('Selecione um projeto antes de iniciar'); return; }
    accRef.current   = elapsed; // carry forward any paused seconds
    startTsRef.current = Date.now();
    setRunning(true);
    persist({ running: true, startTs: startTsRef.current, acc: accRef.current });
  }

  function handlePause() {
    accRef.current = elapsed; // freeze current elapsed
    startTsRef.current = null;
    setRunning(false);
    persist({ running: false, startTs: null, acc: accRef.current });
  }

  function handleStop() {
    if (elapsed === 0) return;
    const newLogs = [{ project, task: task||'Sem descrição', duration: elapsed, time: new Date().toLocaleTimeString('pt-BR', {hour:'2-digit', minute:'2-digit'}) }, ...logs];
    setLogs(newLogs);
    setRunning(false);
    setElapsed(0);
    setTask('');
    accRef.current = 0;
    startTsRef.current = null;
    persist({ running: false, startTs: null, acc: 0, task: '', logs: newLogs });
    window.__toast?.(`${fmt(elapsed)} registradas em "${project}"`, {tone:'success'});
  }

  const totalHoje = logs.reduce((a, l) => a + l.duration, 0);
  const inpStyle = { width:'100%', padding:'8px 11px', borderRadius:8, border:'1px solid var(--border-subtle)', background:'var(--bg-elevated)', color:'var(--fg-primary)', fontFamily:'inherit', fontSize:13, outline:'none', boxSizing:'border-box' };

  return (
    <Card padding={20}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:16 }}>
        <div style={{ fontSize:16, fontWeight:700, display:'flex', alignItems:'center', gap:8 }}>
          <Icon d={ICONS.bolt} size={16} style={{ color:'var(--primary)' }}/>
          Cronômetro
        </div>
        {running && <Badge tone="success" dot>Registrando</Badge>}
        {!running && elapsed > 0 && <Badge tone="warning" dot>Pausado</Badge>}
      </div>

      <div style={{ fontFamily:'var(--font-mono)', fontSize:44, fontWeight:700, letterSpacing:'-0.02em', textAlign:'center', padding:'12px 0 16px', color: running ? 'var(--accent-success)' : elapsed > 0 ? 'var(--accent-warning, #FA8C16)' : 'var(--fg-muted)', transition:'color 300ms' }}>
        {fmt(elapsed)}
      </div>

      <div style={{ display:'flex', flexDirection:'column', gap:8, marginBottom:14 }}>
        <select value={project} onChange={e=>{ setProject(e.target.value); persist({ project: e.target.value }); }} disabled={running} style={{ ...inpStyle, cursor: running ? 'not-allowed' : 'pointer', opacity: running ? 0.6 : 1 }}>
          <option value="">Selecionar projeto…</option>
          {projectNames.map(p => <option key={p}>{p}</option>)}
        </select>
        <input value={task} onChange={e=>{ setTask(e.target.value); persist({ task: e.target.value }); }} placeholder="Descrição da tarefa (opcional)" disabled={running} style={{ ...inpStyle, opacity: running ? 0.6 : 1 }}/>
      </div>

      <div style={{ display:'flex', gap:8 }}>
        {!running ? (
          <button onClick={handleStart} style={{ flex:1, padding:'10px 0', borderRadius:9, background:'linear-gradient(135deg,var(--primary),#36CFC9)', border:'none', color:'#fff', cursor:'pointer', fontSize:13, fontWeight:700, fontFamily:'inherit', display:'flex', alignItems:'center', justifyContent:'center', gap:8 }}>
            <Icon d={ICONS.bolt} size={14}/> {elapsed > 0 ? 'Retomar' : 'Iniciar'}
          </button>
        ) : (
          <button onClick={handlePause} style={{ flex:1, padding:'10px 0', borderRadius:9, background:'var(--bg-elevated)', border:'1px solid var(--border-subtle)', color:'var(--fg-primary)', cursor:'pointer', fontSize:13, fontWeight:700, fontFamily:'inherit', display:'flex', alignItems:'center', justifyContent:'center', gap:8 }}>
            <Icon d={ICONS.more} size={14}/> Pausar
          </button>
        )}
        {elapsed > 0 && (
          <button onClick={handleStop} style={{ padding:'10px 16px', borderRadius:9, background:'rgba(34,197,94,0.12)', border:'1px solid rgba(34,197,94,0.3)', color:'#22C55E', cursor:'pointer', fontSize:13, fontWeight:700, fontFamily:'inherit', display:'flex', alignItems:'center', justifyContent:'center', gap:6 }}>
            <Icon d={ICONS.check} size={14}/> Finalizar
          </button>
        )}
      </div>

      {logs.length > 0 && (
        <div style={{ marginTop:18, borderTop:'1px solid var(--border-subtle)', paddingTop:14 }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:10 }}>
            <div style={{ fontSize:11, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--fg-muted)' }}>Hoje</div>
            <div style={{ fontFamily:'var(--font-mono)', fontSize:12, fontWeight:700, color:'var(--fg-primary)' }}>{fmt(totalHoje)} total</div>
          </div>
          <div style={{ display:'flex', flexDirection:'column', gap:6, maxHeight:160, overflow:'auto' }}>
            {logs.map((log,i)=>(
              <div key={i} style={{ display:'flex', alignItems:'center', gap:10, padding:'8px 10px', borderRadius:8, background:'var(--bg-elevated)' }}>
                <div style={{ flex:1, minWidth:0 }}>
                  <div style={{ fontSize:12, fontWeight:600, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{log.project}</div>
                  <div style={{ fontSize:11, color:'var(--fg-muted)', marginTop:1 }}>{log.task} · {log.time}</div>
                </div>
                <span style={{ fontFamily:'var(--font-mono)', fontSize:12, fontWeight:700, color:'var(--fg-muted)', flexShrink:0 }}>{fmt(log.duration)}</span>
              </div>
            ))}
          </div>
        </div>
      )}
    </Card>
  );
}

function GoalCard({ currentRevenue }) {
  const KEY = 'inbrivvo.meta';
  const MONTHS = ['janeiro','fevereiro','março','abril','maio','junho','julho','agosto','setembro','outubro','novembro','dezembro'];
  const nowMonth = MONTHS[new Date().getMonth()];
  const [hasGoal] = useState(() => !!localStorage.getItem(KEY));
  const [goal, setGoal] = useState(() => {
    try { return JSON.parse(localStorage.getItem(KEY)) || { target: 10000, label: `Meta de receita · ${nowMonth}` }; }
    catch { return { target: 10000, label: `Meta de receita · ${nowMonth}` }; }
  });
  const [editing, setEditing] = useState(!hasGoal); // abre editando se nunca definiu meta
  const [draft, setDraft] = useState({ target: goal.target, label: goal.label });

  const save = () => {
    const next = { ...goal, target: Number(draft.target) || goal.target, label: draft.label || goal.label };
    setGoal(next);
    try { localStorage.setItem(KEY, JSON.stringify(next)); } catch {}
    setEditing(false);
  };

  const fmt = (n) => 'R$ ' + Number(n).toLocaleString('pt-BR');
  const current = currentRevenue ?? 0;
  const pct = Math.min(100, Math.round((current / goal.target) * 100));
  const remaining = Math.max(0, goal.target - current);
  const now = new Date();
  const daysInMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate();
  const dayPct = Math.round((now.getDate() / daysInMonth) * 100);
  const onPace = pct >= dayPct;

  return (
    <Card padding={20} style={{
      background: 'linear-gradient(135deg, rgba(34,197,94,0.10) 0%, rgba(54,207,201,0.06) 60%, transparent 100%), var(--bg-surface)',
      borderColor: onPace ? 'rgba(34,197,94,0.30)' : 'var(--border-subtle)',
      display: 'flex', flexDirection: 'column',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
        <Icon d={ICONS.trend} size={16} style={{ color: onPace ? '#22C55E' : 'var(--geek-blue-300)' }} />
        <div style={{ flex: 1 }}>
          {editing ? (
            <input value={draft.label} onChange={(e) => setDraft({ ...draft, label: e.target.value })}
              style={{ background: 'var(--bg-elevated)', border: '1px solid var(--border-subtle)', borderRadius: 6, padding: '4px 8px', color: 'var(--fg-primary)', fontFamily: 'inherit', fontSize: 14, fontWeight: 700, width: '100%', outline: 'none' }}/>
          ) : (
            <div style={{ fontSize: 14, fontWeight: 700 }}>{goal.label}</div>
          )}
          <div style={{ fontSize: 11, color: 'var(--fg-muted)', marginTop: 2 }}>
            <Badge tone={onPace ? 'success' : 'warning'} dot={false}>{onPace ? 'No ritmo' : 'Atrás do ritmo'}</Badge>
            <span style={{ marginLeft: 8 }}>dia {now.getDate()}/{daysInMonth}</span>
          </div>
        </div>
        {!editing ? (
          <Button variant="ghost" size="sm" onClick={() => setEditing(true)}>Editar meta</Button>
        ) : (
          <>
            <Button variant="ghost" size="sm" onClick={() => { setDraft({ target: goal.target, label: goal.label }); setEditing(false); }}>Cancelar</Button>
            <Button size="sm" onClick={save} icon="check">Salvar</Button>
          </>
        )}
      </div>

      <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 36, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1 }}>{fmt(current)}</div>
        <div style={{ color: 'var(--fg-muted)', fontSize: 13 }}>de {editing ? (
          <input type="number" value={draft.target} onChange={(e) => setDraft({ ...draft, target: e.target.value })}
            style={{ background: 'var(--bg-elevated)', border: '1px solid var(--border-subtle)', borderRadius: 6, padding: '2px 8px', color: 'var(--fg-primary)', fontFamily: 'var(--font-mono)', fontSize: 13, width: 110, outline: 'none' }}/>
        ) : <strong style={{ color: 'var(--fg-primary)', fontFamily: 'var(--font-mono)' }}>{fmt(goal.target)}</strong>}</div>
      </div>

      {/* ── Análise de ritmo ─────────────────────────────────────────── */}
      {(() => {
        const daysGone      = now.getDate();
        const daysLeft      = daysInMonth - daysGone;
        const dailyAvg      = daysGone > 0 ? current / daysGone : 0;
        const dailyNeeded   = daysLeft > 0 ? remaining / daysLeft : remaining;
        const projection    = dailyAvg * daysInMonth;
        const willHit       = projection >= goal.target;
        const fmtD = (n) => 'R$ ' + Math.round(n).toLocaleString('pt-BR') + '/dia';
        const fmtV = (n) => 'R$ ' + Math.round(n).toLocaleString('pt-BR');
        const kpi = (label, value, accent) => (
          <div style={{ background: 'var(--bg-elevated)', borderRadius: 10, padding: '10px 14px' }}>
            <div style={{ fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.07em', color: 'var(--fg-muted)', marginBottom: 4 }}>{label}</div>
            <div style={{ fontSize: 14, fontWeight: 700, fontFamily: 'var(--font-mono)', color: accent || 'var(--fg-primary)' }}>{value}</div>
          </div>
        );
        return (
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginTop: 18, flex: 1 }}>
            {kpi('Média diária', fmtD(dailyAvg), 'var(--fg-primary)')}
            {kpi('Necessário/dia', fmtD(dailyNeeded), remaining <= 0 ? '#22C55E' : dailyNeeded > dailyAvg ? '#FA8C16' : '#22C55E')}
            {kpi('Projeção do mês', fmtV(projection), willHit ? '#22C55E' : '#FA8C16')}
            {kpi('Dias restantes', daysLeft + (daysLeft === 1 ? ' dia' : ' dias'), 'var(--fg-secondary)')}
          </div>
        );
      })()}

      <div style={{ minHeight: 16 }} />

      <div style={{ position: 'relative', height: 12, background: 'var(--bg-elevated)', borderRadius: 999, overflow: 'visible' }}>
        <div style={{ position: 'absolute', inset: 0, borderRadius: 999, overflow: 'hidden' }}>
          <div style={{ width: pct + '%', height: '100%', background: 'linear-gradient(90deg,#22C55E,#36CFC9)', transition: 'width 600ms ease' }}/>
        </div>
        <div title={`Ritmo do mês: ${dayPct}%`} style={{
          position: 'absolute', left: dayPct + '%', top: -4, bottom: -4, width: 2,
          background: 'var(--fg-muted)', borderRadius: 2, opacity: 0.6,
        }}/>
      </div>

      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10, fontSize: 12 }}>
        <span style={{ color: 'var(--fg-muted)' }}>{pct}% concluído · ritmo {dayPct}%</span>
        <span style={{ color: 'var(--fg-muted)' }}>Faltam <strong style={{ color: 'var(--fg-primary)', fontFamily: 'var(--font-mono)' }}>{fmt(remaining)}</strong></span>
      </div>
    </Card>
  );
}

// ─── WelcomeFlow ─────────────────────────────────────────────────────────────
function WelcomeFlow({ userName, onOpenProject, onSkip }) {
  const [clientName,   setClientName]   = useState('');
  const [projectName,  setProjectName]  = useState('');
  const [saving,       setSaving]       = useState(false);
  const [error,        setError]        = useState('');

  const canCreate = clientName.trim().length > 1 && projectName.trim().length > 1;

  async function handleCreate() {
    if (!canCreate || saving) return;
    setError('');
    setSaving(true);
    try {
      const { data: { user: authUser } } = await sb.auth.getUser();
      if (!authUser) { setError('Erro de autenticação. Recarregue a página.'); setSaving(false); return; }

      await sb.from('clients').insert({ user_id: authUser.id, name: clientName.trim(), category: 'Standard' });

      const { data: proj, error: projErr } = await sb.from('projects').insert({
        user_id:     authUser.id,
        name:        projectName.trim(),
        client:      clientName.trim(),
        status:      'andamento',
        progress:    0,
        gradient:    'linear-gradient(135deg,#1D39C4,#36CFC9)',
        description: 'Projeto criado no onboarding',
      }).select().single();

      if (projErr) { setError(projErr.message); setSaving(false); return; }
      await sb.from('profiles').update({ onboarding_welcomed: true }).eq('id', authUser.id);
      track('onboarding_completed', { method: 'created_project' });
      onOpenProject({ id: proj.id, name: proj.name, client: proj.client || '' });
    } catch (e) {
      setError('Erro inesperado. Tente novamente.');
      setSaving(false);
    }
  }

  function handleKey(e) { if (e.key === 'Enter') handleCreate(); }
  const firstName = userName?.split(' ')[0] || '';

  const inpStyle = {
    width: '100%', padding: '12px 14px', borderRadius: 10,
    border: '1px solid var(--border-subtle)', background: 'var(--bg-elevated)',
    color: 'var(--fg-primary)', fontFamily: 'inherit', fontSize: 15, outline: 'none',
    boxSizing: 'border-box', transition: 'border-color 150ms',
  };

  return (
    <div style={{
      position: 'fixed', inset: 0, background: 'rgba(7,11,28,0.85)', backdropFilter: 'blur(10px)',
      display: 'grid', placeItems: 'center', zIndex: 9999, padding: 24,
    }}>
      <div style={{
        width: 'min(500px,100%)', background: 'var(--bg-surface)',
        border: '1px solid rgba(29,57,196,0.4)', borderRadius: 20, padding: '40px 40px 32px',
        display: 'flex', flexDirection: 'column',
      }}>
        <div style={{ fontSize:22, fontWeight:800, letterSpacing:'-0.02em', marginBottom:28, display:'flex', alignItems:'center', gap:8 }}>
          <span style={{ background:'#1D39C4', color:'#fff', borderRadius:8, padding:'4px 10px', fontSize:14 }}>in</span>Brivvo
        </div>

        <h2 style={{ margin:'0 0 8px', fontSize:22, fontWeight:800 }}>
          Bem-vinda{firstName ? `, ${firstName}` : ''}! 🎉
        </h2>
        <p style={{ margin:'0 0 28px', fontSize:14, color:'var(--fg-secondary)', lineHeight:1.6 }}>
          Vamos criar seu primeiro projeto em 2 minutos. Você pode editar tudo depois.
        </p>

        <div style={{ display:'flex', flexDirection:'column', gap:16, marginBottom:24 }}>
          <div>
            <label style={{ display:'block', fontSize:11, fontWeight:700, color:'var(--fg-muted)', textTransform:'uppercase', letterSpacing:'0.06em', marginBottom:8 }}>
              Qual é o nome do cliente?
            </label>
            <input value={clientName} onChange={e=>setClientName(e.target.value)} onKeyDown={handleKey}
              placeholder="Ex: Empresa ABC" style={inpStyle} autoFocus />
          </div>
          <div>
            <label style={{ display:'block', fontSize:11, fontWeight:700, color:'var(--fg-muted)', textTransform:'uppercase', letterSpacing:'0.06em', marginBottom:8 }}>
              E o nome do projeto?
            </label>
            <input value={projectName} onChange={e=>setProjectName(e.target.value)} onKeyDown={handleKey}
              placeholder="Ex: Identidade Visual 2026" style={inpStyle} />
          </div>
        </div>

        {error && (
          <div style={{ marginBottom:16, padding:'10px 14px', borderRadius:8, background:'rgba(239,68,68,0.1)', border:'1px solid rgba(239,68,68,0.3)', color:'#F87171', fontSize:13 }}>
            {error}
          </div>
        )}

        <button onClick={handleCreate} disabled={!canCreate || saving} style={{
          padding:'14px 0', borderRadius:12, border:'none', fontFamily:'inherit',
          background: canCreate ? 'linear-gradient(135deg,#1D39C4,#36CFC9)' : 'var(--bg-elevated)',
          color: canCreate ? '#fff' : 'var(--fg-muted)',
          fontSize:15, fontWeight:700, cursor: canCreate ? 'pointer' : 'not-allowed',
          transition:'background 200ms, color 200ms',
        }}>
          {saving ? 'Criando…' : 'Criar projeto →'}
        </button>

        <button onClick={onSkip} style={{
          marginTop:12, padding:'10px 0', background:'transparent', border:'none',
          color:'var(--fg-muted)', fontSize:13, cursor:'pointer', fontFamily:'inherit',
        }}>
          Pular por agora
        </button>
      </div>
    </div>
  );
}

// ─── OnboardingChecklist ──────────────────────────────────────────────────────
function OnboardingChecklist({ projectsDone, tasksDone, financeDone, onNav, onDismiss }) {
  const steps = [
    { label:'Conta criada e acesso ativo',                       done:true,         cta:null },
    { label:'Criar primeiro projeto com cliente',                done:projectsDone, cta:'+ Criar projeto',  action:()=>onNav?.('projects') },
    { label:'Adicionar a primeira tarefa ao projeto',            done:tasksDone,    cta:'+ Adicionar tarefa', action:()=>onNav?.('tasks')    },
    { label:'Lançar primeira receita ou despesa no Financeiro',  done:financeDone,  cta:'Ir ao Financeiro', action:()=>onNav?.('finance')   },
  ];
  const doneCount = steps.filter(s => s.done).length;
  const pct = Math.round((doneCount / steps.length) * 100);

  return (
    <div style={{
      padding:'20px 22px', borderRadius:14,
      background:'linear-gradient(135deg,rgba(29,57,196,0.08),transparent)',
      border:'1px solid rgba(29,57,196,0.25)',
    }}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:14 }}>
        <div>
          <div style={{ fontSize:15, fontWeight:700 }}>Primeiros passos</div>
          <div style={{ fontSize:12, color:'var(--fg-muted)', marginTop:2 }}>{doneCount} de {steps.length} concluídos</div>
        </div>
        <button onClick={onDismiss} style={{ background:'transparent', border:'none', color:'var(--fg-muted)', fontSize:12, cursor:'pointer', fontFamily:'inherit', padding:'4px 8px', borderRadius:6 }}>
          Dispensar
        </button>
      </div>

      <div style={{ height:6, background:'var(--bg-elevated)', borderRadius:999, overflow:'hidden', marginBottom:16 }}>
        <div style={{ width:pct+'%', height:'100%', background:'linear-gradient(90deg,#1D39C4,#36CFC9)', borderRadius:999, transition:'width 600ms ease' }}/>
      </div>

      <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
        {steps.map((s, i) => (
          <div key={i} style={{
            display:'flex', alignItems:'center', gap:12, padding:'10px 14px', borderRadius:10,
            background: s.done ? 'rgba(34,197,94,0.06)' : 'var(--bg-elevated)',
            border:`1px solid ${s.done ? 'rgba(34,197,94,0.2)' : 'var(--border-subtle)'}`,
          }}>
            <div style={{
              width:20, height:20, borderRadius:'50%', flexShrink:0,
              background: s.done ? '#22C55E' : 'var(--bg-surface)',
              border:`2px solid ${s.done ? '#22C55E' : 'var(--border-subtle)'}`,
              display:'flex', alignItems:'center', justifyContent:'center',
            }}>
              {s.done && <span style={{ color:'#fff', fontSize:10, fontWeight:900 }}>✓</span>}
            </div>
            <div style={{
              flex:1, fontSize:13, fontWeight: s.done ? 400 : 600,
              color: s.done ? 'var(--fg-muted)' : 'var(--fg-primary)',
              textDecoration: s.done ? 'line-through' : 'none',
            }}>
              {s.label}
            </div>
            {!s.done && s.cta && (
              <button onClick={s.action} style={{
                padding:'6px 12px', borderRadius:8, background:'#1D39C4',
                border:'none', color:'#fff', fontSize:12, fontWeight:700,
                cursor:'pointer', fontFamily:'inherit', whiteSpace:'nowrap',
              }}>
                {s.cta}
              </button>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

const PROJ_STATUS_TONE  = { andamento:'brand', ativo:'brand', planejamento:'neutral', pausa:'cyan', concluido:'success' };
const PROJ_STATUS_LABEL = { andamento:'Em andamento', ativo:'Em andamento', planejamento:'Planejamento', pausa:'Em pausa', concluido:'Concluído' };

function Dashboard({ onOpenProject, onAddTask, onNav, user }) {
  const now = new Date();
  const hour = now.getHours();
  const greeting = hour < 12 ? 'Bom dia' : hour < 18 ? 'Boa tarde' : 'Boa noite';
  const firstName = user?.name?.split(' ')[0] || '';
  const WEEKDAYS = ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado'];
  const MONTHS = ['janeiro','fevereiro','março','abril','maio','junho','julho','agosto','setembro','outubro','novembro','dezembro'];
  const dateLabel = `${WEEKDAYS[now.getDay()]} · ${now.getDate()} de ${MONTHS[now.getMonth()]}`;

  const [stats, setStats] = useState({ projects: '…', tasks: '…', revFmt: '…', revenue: 0, clients: '…' });
  const [recentProjects, setRecentProjects] = useState([]);
  const [tasks, setTasks] = useState([]);
  const [projectNames, setProjectNames] = useState([]);
  const [todayEvents, setTodayEvents] = useState([]);
  const [showWelcome, setShowWelcome] = useState(false);
  const [onboardingWelcomed, setOnboardingWelcomed] = useState(() => user?.onboardingWelcomed ?? false);
  const [checklistDismissed, setChecklistDismissed] = useState(() => user?.checklistDismissed ?? false);

  const todayStr = `${now.getFullYear()}-${String(now.getMonth()+1).padStart(2,'0')}-${String(now.getDate()).padStart(2,'0')}`;

  useEffect(() => {
    (async () => {
      const monthStart = `${now.getFullYear()}-${String(now.getMonth()+1).padStart(2,'0')}-01`;
      const [r0, r1, r2, r3, r4, r5, r6, r7] = await Promise.all([
        sb.from('projects').select('*', { count:'exact', head:true }).in('status', ['andamento','ativo','planejamento']),
        sb.from('tasks').select('*', { count:'exact', head:true }).neq('kanban_col', 'done'),
        sb.from('clients').select('*', { count:'exact', head:true }),
        sb.from('finances').select('amount').eq('type', 'receita').gte('date', monthStart),
        sb.from('projects').select('id,name,client,status').order('created_at', { ascending:false }).limit(3),
        sb.from('tasks').select('id,title,kanban_col,tag_label').order('created_at', { ascending:false }).limit(20),
        sb.from('calendar_events').select('*').eq('date', todayStr).order('time'),
        sb.from('finances').select('*', { count:'exact', head:true }),
      ]);
      const revenue = (r3.data||[]).reduce((s, f) => s + (parseFloat(f.amount)||0), 0);
      const revFmt = revenue === 0 ? 'R$ 0' : 'R$ ' + revenue.toLocaleString('pt-BR', { minimumFractionDigits:0, maximumFractionDigits:0 });
      const projCount = r0.count ?? 0;
      const finCount  = r7.count ?? 0;
      setStats({ projects: projCount, tasks: r1.count ?? 0, clients: r2.count ?? 0, revenue, revFmt, finCount });
      // Mostrar WelcomeFlow se não tiver projetos e nunca tiver passado pelo onboarding
      if (projCount === 0 && !onboardingWelcomed) {
        setShowWelcome(true);
        track('onboarding_welcome_shown');
      }
      setRecentProjects(r4.data || []);
      setTasks((r5.data||[]).map(row => ({ id: row.id, t: row.title || '', tg: row.tag_label || '', kanban_col: row.kanban_col || 'todo' })));
      setProjectNames((r4.data||[]).map(p => p.name || 'Projeto'));

      // Today's events: Supabase calendar_events + localStorage meetings
      const dbEvs = (r6.data || []).map(row => ({
        id:  row.id,
        l:   row.title,
        t:   row.time ? row.time.slice(0, 5) : '09:00',
        who: row.who || '',
        c:   row.color || '#1D39C4',
        meetLink: '',
      }));
      let meetEvs = [];
      try {
        meetEvs = JSON.parse(localStorage.getItem('inbrivvo_meetings') || '[]')
          .filter(m => m.date === todayStr)
          .map(m => ({
            id: 'meet-' + m.id,
            l:  '📹 ' + m.title,
            t:  m.hInicio || '10:00',
            who: m.clientName || '',
            c:  '#00897b',
            meetLink: m.meetLink || '',
          }));
      } catch {}
      setTodayEvents([...dbEvs, ...meetEvs].sort((a, b) => a.t.localeCompare(b.t)));
    })();
  }, []);

  const activeTasks = tasks.filter(t => t.kanban_col !== 'done').length;

  async function handleDismissChecklist() {
    const doneCount = [projectsDone, tasksDone, financeDone].filter(Boolean).length + 1; // +1 = conta criada
    track('checklist_dismissed', { steps_completed: doneCount, total_steps: 4 });
    setChecklistDismissed(true);
    try {
      const { data: { user: authUser } } = await sb.auth.getUser();
      if (authUser) await sb.from('profiles').update({ checklist_dismissed: true }).eq('id', authUser.id);
    } catch {}
  }

  async function handleWelcomeSkip() {
    track('onboarding_skipped');
    setOnboardingWelcomed(true);
    setShowWelcome(false);
    try {
      const { data: { user: authUser } } = await sb.auth.getUser();
      if (authUser) await sb.from('profiles').update({ onboarding_welcomed: true }).eq('id', authUser.id);
    } catch {}
  }

  const showChecklist = !checklistDismissed && onboardingWelcomed;
  const projectsDone  = typeof stats.projects === 'number' && stats.projects > 0;
  const tasksDone     = typeof stats.tasks    === 'number' && stats.tasks    > 0;
  const financeDone   = typeof stats.finCount === 'number' && stats.finCount > 0;

  return (
    <div style={{ padding: '24px 28px', display: 'flex', flexDirection: 'column', gap: 20 }}>
      {showWelcome && (
        <WelcomeFlow
          userName={user?.name}
          onOpenProject={(proj) => { setShowWelcome(false); onOpenProject(proj); }}
          onSkip={handleWelcomeSkip}
        />
      )}

      {showChecklist && !(projectsDone && tasksDone && financeDone) && (
        <OnboardingChecklist
          projectsDone={projectsDone}
          tasksDone={tasksDone}
          financeDone={financeDone}
          onNav={onNav}
          onDismiss={handleDismissChecklist}
        />
      )}

      <Card padding={22} style={{
        background: 'linear-gradient(135deg, rgba(29,57,196,0.22) 0%, rgba(54,207,201,0.10) 60%, transparent 100%), var(--bg-surface)',
        borderColor: 'var(--geek-blue-a40)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 11, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--geek-blue-300)' }}>{dateLabel}</div>
            <h2 style={{ margin: '6px 0 0', fontSize: 24, fontWeight: 700 }}>{greeting}{firstName ? `, ${firstName}` : ''} 👋</h2>
            <p style={{ margin: '6px 0 0', color: 'var(--fg-secondary)', fontSize: 14 }}>
              {stats.tasks === '…'
                ? 'Carregando…'
                : activeTasks > 0
                  ? <>Você tem <strong style={{ color:'var(--fg-primary)' }}>{activeTasks} {activeTasks === 1 ? 'tarefa aberta' : 'tarefas abertas'}</strong>.</>
                  : 'Nenhuma tarefa aberta — tudo em dia!'
              }
            </p>
          </div>
          <Button icon="plus" onClick={onAddTask}>Adicionar tarefa</Button>
          <Button variant="secondary" icon="cal" onClick={() => onNav?.('calendar')}>Ver agenda</Button>
        </div>
      </Card>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
        <Stat label="Projetos ativos"    value={String(stats.projects)} tone="success" onClick={() => onNav?.('projects')} />
        <Stat label="Tarefas em aberto"  value={String(stats.tasks)}   tone="neutral"  onClick={() => onNav?.('tasks')}    />
        <Stat label="Receita · este mês" value={stats.revFmt}          tone="success" onClick={() => onNav?.('finance')}  />
        <Stat label="Clientes ativos"    value={String(stats.clients)} tone="neutral"  onClick={() => onNav?.('clients')}  />
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 20 }}>
        <GoalCard currentRevenue={stats.revenue} />
        <TimeTracker projectNames={projectNames} />
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 20 }}>
        <MiniKanban tasks={tasks} todayEvents={todayEvents} onNav={onNav} />
        <Activity onNav={onNav} />
      </div>

      <div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 12 }}>
          <h3 style={{ margin: 0, fontSize: 18, fontWeight: 700 }}>Projetos em destaque</h3>
          <Button variant="ghost" size="sm" onClick={() => onNav?.('projects')}>Ver todos</Button>
        </div>
        {recentProjects.length === 0 ? (
          <div style={{ padding:'32px 0', textAlign:'center', color:'var(--fg-muted)', fontSize:13 }}>
            Nenhum projeto ainda. Clique em "Novo projeto" para começar.
          </div>
        ) : (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
            {recentProjects.map((p, i) => {
              const tone  = PROJ_STATUS_TONE[p.status]  || 'neutral';
              const label = PROJ_STATUS_LABEL[p.status] || 'Ativo';
              return (
                <Card key={p.id || i} hoverable padding={18} onClick={() => onOpenProject({ id:p.id, name:p.name, client:p.client })}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                    <Badge tone={tone}>{label}</Badge>
                    <Icon d={ICONS.more} size={16} style={{ color: 'var(--fg-muted)' }} />
                  </div>
                  <div style={{ marginTop: 12, fontSize: 16, fontWeight: 700 }}>{p.name}</div>
                  <div style={{ fontSize: 12, color: 'var(--fg-muted)', marginTop: 2 }}>{p.client || '—'}</div>
                  <div style={{ marginTop: 14, height: 6, background: 'var(--bg-elevated)', borderRadius: 999, overflow: 'hidden' }}>
                    <div style={{ width: '0%', height: '100%', background: 'linear-gradient(90deg,#1D39C4,#36CFC9)' }}/>
                  </div>
                  <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 10 }}>
                    <div style={{ fontSize: 11, color: 'var(--fg-muted)', fontFamily: 'var(--font-mono)' }}>0%</div>
                  </div>
                </Card>
              );
            })}
          </div>
        )}
      </div>
    </div>
  );
}
window.Dashboard = Dashboard;