// Dashboard page + modals for quick actions

const { useState: dsState } = React;

/* ── Appointment block (week mini-calendar) ── */
function ApptBlock({ appt }) {
  const c = APPT_COLORS[appt.status] || APPT_COLORS.aguardando;
  return (
    <div style={{
      background: c.bg, borderLeft: `3px solid ${c.border}`,
      borderRadius: 5, padding: '6px 8px', marginBottom: 6,
    }}>
      <div style={{ fontSize: 12, fontWeight: 700, color: c.text, marginBottom: 2 }}>{appt.patient}</div>
      <div style={{ fontSize: 11, color: c.text, opacity: 0.85, display:'flex', alignItems:'center', gap:3 }}>
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
        {appt.time}
      </div>
      {appt.unidade && (
        <div style={{ fontSize: 11, color: c.text, opacity: 0.75, display:'flex', alignItems:'center', gap:3, marginTop:2 }}>
          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>
          {appt.unidade}
        </div>
      )}
      {appt.sala && (
        <div style={{ fontSize: 11, color: c.text, opacity: 0.75, display:'flex', alignItems:'center', gap:3, marginTop:1 }}>
          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v18M3 9h6M3 15h6"/></svg>
          {appt.sala}
        </div>
      )}
      <div style={{ marginTop:4, display:'inline-block', fontSize:10, fontWeight:600, color: c.text, background: c.border + '22', padding:'1px 6px', borderRadius:10 }}>
        {c.label}
      </div>
    </div>
  );
}

/* ── Stat card ── */
function StatCard({ label, value, delta, deltaPos, color }) {
  return (
    <Card style={{ flex: '1 1 0', padding: '18px 20px', minWidth: 0 }}>
      <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: 1, color: color, textTransform: 'uppercase', marginBottom: 6 }}>{label}</div>
      <div style={{ fontSize: 28, fontWeight: 700, color: color, marginBottom: 6 }}>{value}</div>
      <div style={{ fontSize: 12, color: deltaPos ? C.green : C.red, display: 'flex', alignItems: 'center', gap: 3 }}>
        <span>{deltaPos ? '↑' : '↓'}</span>{delta}
      </div>
    </Card>
  );
}

/* ── Modal: Novo Paciente ── */
function ModalNovoPaciente({ onClose }) {
  const [form, setForm] = dsState({ nome:'', dob:'', cpf:'', email:'', telefone:'', cep:'', address:'' });
  const set = k => e => setForm(f => ({ ...f, [k]: e.target.value }));
  return (
    <Modal title="Novo paciente" onClose={onClose}>
      <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
        <FInput label="Nome" placeholder="Nome completo" value={form.nome} onChange={set('nome')} />
        <div style={{ display:'flex', gap:10 }}>
          <FInput label="Data de nascimento" placeholder="DD/MM/AAAA" value={form.dob} onChange={set('dob')} half />
          <FInput label="CPF" placeholder="000.000.000-00" value={form.cpf} onChange={set('cpf')} half />
        </div>
        <div style={{ display:'flex', gap:10 }}>
          <FInput label="Email" placeholder="email@email.com" value={form.email} onChange={set('email')} half />
          <FInput label="Telefone" placeholder="(00) 00000-0000" value={form.telefone} onChange={set('telefone')} half />
        </div>
        <div style={{ display:'flex', gap:10 }}>
          <FInput label="CEP" placeholder="00000-000" value={form.cep} onChange={set('cep')} style={{ flex:'0 0 120px' }} />
          <FInput label="Endereço Completo" placeholder="Rua, número, complemento, bairro, cidade - UF" value={form.address} onChange={set('address')} />
        </div>
      </div>
      <ModalActions onCancel={onClose} onConfirm={onClose} confirmLabel="Cadastrar" />
    </Modal>
  );
}

/* ── Modal: Agendar Consulta ── */
const VALOR_SESSAO_BASE = 120;
const UNIDADES_AG = ['Unidade Centro', 'Unidade Jardins'];
const SALAS_AG    = ['Sala 201', 'Sala 202', 'Sala 203'];
const FORMAS_PAG  = ['PIX', 'Cartão de crédito', 'Cartão de débito', 'Dinheiro', 'Transferência'];
const SESSAO_VAZIA = () => ({ data:'', hora:'', unidade:'', sala:'' });

function SessionBlock({ index, sessao, onChange }) {
  const set = field => e => onChange(index, field, e.target.value);
  const sStyle = { padding:'9px 12px', border:'1px solid #d1d5db', borderRadius:6, fontSize:13, background:'white', outline:'none', color:'#111', width:'100%', boxSizing:'border-box' };
  const lStyle = { fontSize:12, fontWeight:500, color:'#374151' };
  return (
    <div style={{ background:'#f8fafc', border:'1px solid #e5e7eb', borderRadius:8, padding:'12px 14px' }}>
      <div style={{ fontSize:12, fontWeight:700, color:C.primary, marginBottom:10 }}>Sessão {index + 1}</div>
      <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
        <div style={{ display:'flex', gap:8 }}>
          <div style={{ flex:1, display:'flex', flexDirection:'column', gap:4 }}>
            <label style={lStyle}>Data</label>
            <input type="date" value={sessao.data} onChange={set('data')} style={sStyle} />
          </div>
          <div style={{ flex:'0 0 110px', display:'flex', flexDirection:'column', gap:4 }}>
            <label style={lStyle}>Hora</label>
            <input type="time" value={sessao.hora} onChange={set('hora')} style={sStyle} />
          </div>
        </div>
        <div style={{ display:'flex', gap:8 }}>
          <div style={{ flex:1, display:'flex', flexDirection:'column', gap:4 }}>
            <label style={lStyle}>Unidade</label>
            <select value={sessao.unidade} onChange={set('unidade')} style={sStyle}>
              <option value="">Selecione</option>
              {UNIDADES_AG.map(u => <option key={u}>{u}</option>)}
            </select>
          </div>
          <div style={{ flex:1, display:'flex', flexDirection:'column', gap:4 }}>
            <label style={lStyle}>Sala</label>
            <select value={sessao.sala} onChange={set('sala')} style={sStyle}>
              <option value="">Selecione</option>
              {SALAS_AG.map(s => <option key={s}>{s}</option>)}
            </select>
          </div>
        </div>
      </div>
    </div>
  );
}

function ModalAgendarConsulta({ onClose }) {
  const [form, setForm] = dsState({
    paciente:'', profissional:'', tipoCobranca:'avulso',
    data:'', hora:'', unidade:'', sala:'', formaPagamento:'',
    recibo: null, reciboNome:'',
    sessoes: [SESSAO_VAZIA(), SESSAO_VAZIA(), SESSAO_VAZIA(), SESSAO_VAZIA()],
    desconto:'', parceria:'',
  });

  const set = k => e => setForm(f => ({ ...f, [k]: e.target.value }));
  const isPacote = form.tipoCobranca === 'pacote';

  const setSessao = (idx, field, val) => setForm(f => {
    const sessoes = f.sessoes.map((s, i) => i === idx ? { ...s, [field]: val } : s);
    return { ...f, sessoes };
  });

  const handleRecibo = e => {
    const file = e.target.files[0];
    if (file) setForm(f => ({ ...f, recibo: URL.createObjectURL(file), reciboNome: file.name }));
  };

  const totalBase  = isPacote ? VALOR_SESSAO_BASE * 4 : VALOR_SESSAO_BASE;
  const desconto   = parseFloat(form.desconto) || 0;
  const valorFinal = Math.max(0, totalBase - desconto);
  const fmtBRL = v => v.toLocaleString('pt-BR', { style:'currency', currency:'BRL' });

  const selectStyle = { padding:'9px 12px', border:'1px solid #d1d5db', borderRadius:6, fontSize:14, background:'white', outline:'none', color:'#111', width:'100%', boxSizing:'border-box', cursor:'pointer' };
  const labelStyle  = { fontSize:13, fontWeight:500, color:'#374151' };
  const Field = ({ label, children }) => (
    <div style={{ display:'flex', flexDirection:'column', gap:5, flex:1 }}>
      {label && <label style={labelStyle}>{label}</label>}
      {children}
    </div>
  );

  return (
    <Modal title="Agendar consulta" onClose={onClose} width={560}>
      <div style={{ display:'flex', flexDirection:'column', gap:14 }}>

        {/* Paciente */}
        <Field label="Paciente">
          <select value={form.paciente} onChange={set('paciente')} style={selectStyle}>
            <option value="">Selecione o paciente</option>
            {PATIENTS.map(p => <option key={p.id} value={p.name}>{p.name}</option>)}
          </select>
        </Field>

        {/* Profissional */}
        <Field label="Profissional">
          <select value={form.profissional} onChange={set('profissional')} style={selectStyle}>
            <option value="">Selecione o profissional</option>
            <option>Dra. Ana Silva</option>
            <option>Dr. Carlos Mendes</option>
          </select>
        </Field>

        {/* Tipo de cobrança */}
        <Field label="Tipo de cobrança">
          <select value={form.tipoCobranca} onChange={set('tipoCobranca')} style={selectStyle}>
            <option value="avulso">Sessão avulsa</option>
            <option value="pacote">Pacote (4 sessões)</option>
          </select>
        </Field>

        {/* ── SESSÃO AVULSA ── */}
        {!isPacote && (
          <>
            <div style={{ display:'flex', gap:10 }}>
              <Field label="Data">
                <input type="date" value={form.data} onChange={set('data')}
                  style={{ ...selectStyle, cursor:'default' }} />
              </Field>
              <Field label="Hora">
                <input type="time" value={form.hora} onChange={set('hora')}
                  style={{ ...selectStyle, cursor:'default' }} />
              </Field>
            </div>
            <div style={{ display:'flex', gap:10 }}>
              <Field label="Unidade">
                <select value={form.unidade} onChange={set('unidade')} style={selectStyle}>
                  <option value="">Selecione</option>
                  {UNIDADES_AG.map(u => <option key={u}>{u}</option>)}
                </select>
              </Field>
              <Field label="Sala">
                <select value={form.sala} onChange={set('sala')} style={selectStyle}>
                  <option value="">Selecione</option>
                  {SALAS_AG.map(s => <option key={s}>{s}</option>)}
                </select>
              </Field>
            </div>
            <Field label="Forma de pagamento">
              <select value={form.formaPagamento} onChange={set('formaPagamento')} style={selectStyle}>
                <option value="">Selecione</option>
                {FORMAS_PAG.map(f => <option key={f}>{f}</option>)}
              </select>
            </Field>
          </>
        )}

        {/* ── PACOTE: 4 sessões ── */}
        {isPacote && (
          <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
            <label style={{ ...labelStyle, marginBottom:2 }}>Agendamento das 4 sessões</label>
            {form.sessoes.map((s, i) => (
              <SessionBlock key={i} index={i} sessao={s} onChange={setSessao} />
            ))}
          </div>
        )}

        {/* Recibo — comum aos dois modos */}
        <Field label="Recibo de pagamento">
          <label style={{ display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:6, padding:'14px', border:'2px dashed #d1d5db', borderRadius:8, cursor:'pointer', background: form.recibo ? '#f0fdf4' : '#fafafa', transition:'all .15s' }}>
            <input type="file" accept="image/*" onChange={handleRecibo} style={{ display:'none' }} />
            {form.recibo
              ? (<>
                  <img src={form.recibo} alt="Recibo" style={{ maxHeight:80, borderRadius:6, objectFit:'contain' }} />
                  <span style={{ fontSize:12, color:'#16a34a', fontWeight:500 }}>{form.reciboNome}</span>
                </>)
              : (<>
                  <Icon name="upload" size={20} color="#9ca3af" />
                  <span style={{ fontSize:13, color:'#6b7280' }}>Clique para enviar a imagem do recibo</span>
                  <span style={{ fontSize:11, color:'#9ca3af' }}>PNG, JPG, PDF</span>
                </>)
            }
          </label>
        </Field>

        {/* Separador */}
        <div style={{ borderTop:'1px solid #e5e7eb' }} />

        {/* Parceria */}
        <Field label="Parceria">
          <input placeholder="Ex: Convênio XYZ, Empresa ABC…" value={form.parceria} onChange={set('parceria')}
            style={{ ...selectStyle, cursor:'default' }} />
        </Field>

        {/* Desconto */}
        <Field label="Desconto (R$)">
          <div style={{ position:'relative' }}>
            <span style={{ position:'absolute', left:12, top:'50%', transform:'translateY(-50%)', fontSize:14, color:'#6b7280', pointerEvents:'none' }}>R$</span>
            <input type="number" min="0" placeholder="0,00" value={form.desconto} onChange={set('desconto')}
              style={{ ...selectStyle, cursor:'default', paddingLeft:36 }} />
          </div>
        </Field>

        {/* Valor final */}
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', padding:'12px 16px', background:'#eff6ff', borderRadius:8, border:'1px solid #bfdbfe' }}>
          <div>
            <div style={{ fontSize:12, color:'#6b7280' }}>
              {isPacote ? `4 sessões × ${fmtBRL(VALOR_SESSAO_BASE)}` : `1 sessão · ${fmtBRL(VALOR_SESSAO_BASE)}`}
              {desconto > 0 && <span style={{ color:'#dc2626', marginLeft:8 }}>− {fmtBRL(desconto)} desconto</span>}
            </div>
            <div style={{ fontSize:11, color:'#9ca3af', marginTop:2 }}>
              {form.parceria ? `Parceria: ${form.parceria}` : '\u00a0'}
            </div>
          </div>
          <div style={{ textAlign:'right' }}>
            <div style={{ fontSize:11, color:'#6b7280', marginBottom:1 }}>Valor final</div>
            <div style={{ fontSize:20, fontWeight:700, color:C.primary }}>{fmtBRL(valorFinal)}</div>
          </div>
        </div>

      </div>
      <ModalActions onCancel={onClose} onConfirm={onClose} confirmLabel="Agendar" />
    </Modal>
  );
}

/* ── Modal: Lançamento Financeiro ── */
function ModalLancamento({ onClose }) {
  const [form, setForm] = dsState({ tipo:'Receita', categoria:'', valor:'', data:'', descricao:'' });
  const set = k => e => setForm(f => ({ ...f, [k]: e.target.value }));
  const [drag, setDrag] = dsState(false);
  return (
    <Modal title="Lançamento financeiro" onClose={onClose}>
      <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
        <FSelect label="Tipo" value={form.tipo} onChange={set('tipo')}>
          <option>Receita</option>
          <option>Despesa</option>
        </FSelect>
        <FSelect label="Categoria" value={form.categoria} onChange={set('categoria')}>
          <option value="">Selecione a categoria</option>
          <option>Consulta</option>
          <option>Aluguel</option>
          <option>Salário</option>
          <option>Material</option>
          <option>Outros</option>
        </FSelect>
        <FInput label="Valor" placeholder="R$ 0,00" value={form.valor} onChange={set('valor')} />
        <FInput label="Data" type="date" value={form.data} onChange={set('data')} />
        <FSelect label="Descrição" value={form.descricao} onChange={set('descricao')}>
          <option value="">Selecione uma unidade</option>
          <option>Unidade Centro</option>
          <option>Unidade Jardins</option>
        </FSelect>
        <div>
          <label style={{ fontSize:13, fontWeight:500, color:'#374151', display:'block', marginBottom:5 }}>Anexo (Opcional)</label>
          <div
            onDragOver={e => { e.preventDefault(); setDrag(true); }}
            onDragLeave={() => setDrag(false)}
            onDrop={e => { e.preventDefault(); setDrag(false); }}
            style={{
              border: `2px dashed ${drag ? C.primary : '#c3cfe2'}`,
              borderRadius: 8, padding: '28px 20px', textAlign:'center',
              background: drag ? '#eff6ff' : '#f8faff', cursor:'pointer', transition:'all 0.15s'
            }}
          >
            <div style={{ marginBottom:8, color:'#6b7280' }}>
              <Icon name="upload" size={28} color="#9ca3af" />
            </div>
            <div style={{ fontSize:14, color:'#374151', marginBottom:4 }}>Arraste o arquivo ou clique para selecionar</div>
            <div style={{ fontSize:12, color:'#9ca3af' }}>PDF, PNG, JPG ou outros formatos</div>
          </div>
        </div>
      </div>
      <ModalActions onCancel={onClose} onConfirm={onClose} confirmLabel="Salvar" />
    </Modal>
  );
}

/* ── Dashboard page ── */
function Dashboard({ setPage, setModal, perfil='admin' }) {
  const [filtUnidade, setFiltUnidade] = dsState('Todas');
  const [filtSala,    setFiltSala]    = dsState('Todas');
  const [filtProf,    setFiltProf]    = dsState('Todos');
  const [dashView,    setDashView]    = dsState('Semana');
  const [checkedIn,   setCheckedIn]   = dsState(false);
  const [prontuarios, setProntuarios] = dsState([]);
  const [prontuModal, setProntuModal] = dsState(null);
  const [prontuTela,   setProntuTela]  = dsState(null);
  const [checkoutErro,setCheckoutErro]= dsState(false);
  const [dashModalT,  setDashModalT]  = dsState(null); // 'cancelar'|'reagendar'
  // Local appts state so status updates reflect immediately
  const [dashAppts, setDashAppts] = dsState(() => {
    const all = [];
    Object.entries(WEEK_APPTS).forEach(([day, list]) =>
      list.forEach((a, i) => all.push({ ...a, id: `dash-${day}-${i}`, day }))
    );
    return all;
  });
  const updateDashStatus = (id, status) =>
    setDashAppts(as => as.map(a => a.id === id ? { ...a, status } : a));

  const isTerapeuta = perfil === 'terapeuta';

  // Consultas do dia (mock: todas as da semana para demo)
  const consultasDoDia = Object.values(WEEK_APPTS).flat().filter(a =>
    ['confirmado','aguardando','reagendado'].includes(a.status)
  );

  const pendentes = consultasDoDia.filter(a => {
    const p = prontuarios.find(p => p.apptId === a.id);
    return !p || p.status !== 'finalizado';
  });

  // Expõe contagem no window para o Topbar
  React.useEffect(() => {
    window.__prontuariosPendentes = isTerapeuta && checkedIn ? pendentes.length : 0;
  }, [pendentes.length, isTerapeuta, checkedIn]);

  const handleCheckout = () => {
    if (pendentes.length > 0) { setCheckoutErro(true); return; }
    setCheckedIn(false); setCheckoutErro(false);
  };

  const handleSaveProntuario = (dados) => {
    setProntuarios(prev => {
      const exists = prev.findIndex(p => p.apptId === dados.apptId);
      if (exists >= 0) { const n=[...prev]; n[exists]=dados; return n; }
      return [...prev, dados];
    });
    setProntuTela(null);
  };

  const selStyle = { fontSize:13, border:'1px solid #e5e7eb', borderRadius:6, padding:'5px 10px', color:'#374151', background:'white', cursor:'pointer' };

  const filterAppts = appts => (appts || []).filter(a =>
    (filtUnidade === 'Todas' || a.unidade === filtUnidade) &&
    (filtSala    === 'Todas' || a.sala    === filtSala)
  );
  return (
    <div style={{ flex:1, display:'flex', flexDirection:'column', minHeight:0, background:C.pageBg }}>
      <Topbar title="Dashboard" />
      <div style={{ flex:1, overflowY:'auto', minHeight:0 }}>
      <div style={{ padding:'20px 24px', display:'flex', flexDirection:'column', gap:18, minHeight:'100%', boxSizing:'border-box' }}>

        {/* Stat cards */}
        <div style={{ display:'flex', gap:14 }}>
          {!isTerapeuta && <StatCard label="Receita do mês" value="R$ 45.280" delta="+12%" deltaPos color={C.red} />}
          <StatCard label="Consultas agendadas"   value="124" delta="+8%"  deltaPos color={C.primary} />
          <StatCard label="Consultas esta semana" value="32"  delta="+5%"  deltaPos color={C.primary} />
          {!isTerapeuta && <StatCard label="Comissões pendentes" value="R$ 8.450" delta="-3%" deltaPos={false} color={C.amber} />}
        </div>

        {/* Banner Check-in/out — só terapeuta */}
        {isTerapeuta && (
          <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'14px 20px', background: checkedIn ? '#f0fdf4' : '#eff6ff', border:`1px solid ${checkedIn ? '#86efac' : '#bfdbfe'}`, borderRadius:8 }}>
            <div>
              <div style={{ fontSize:14, fontWeight:700, color: checkedIn ? '#15803d' : C.primary }}>{checkedIn ? '✅ Check-in realizado' : '📍 Você ainda não fez check-in hoje'}</div>
              <div style={{ fontSize:12, color:'#6b7280', marginTop:2 }}>{checkedIn ? `${consultasDoDia.length} consultas no dia • ${pendentes.length} prontúrio(s) pendente(s)` : 'Registre sua entrada para iniciar os atendimentos.'}</div>
            </div>
            <div style={{ display:'flex', alignItems:'center', gap:10 }}>
              {checkedIn && checkoutErro && (
                <span style={{ fontSize:12, color:'#dc2626', fontWeight:500 }}>Finalize todos os prontúriós antes do checkout.</span>
              )}
              <button
                onClick={() => { if (checkedIn) { handleCheckout(); } else { setCheckedIn(true); setCheckoutErro(false); } }}
                style={{ padding:'9px 20px', background: checkedIn ? (checkoutErro ? '#fee2e2' : '#16a34a') : C.primary, color:'white', border:'none', borderRadius:6, fontSize:13, fontWeight:600, cursor:'pointer' }}>
                {checkedIn ? (checkoutErro ? '⚠️ Prontúriós pendentes' : 'Check-out') : 'Check-in'}
              </button>
            </div>
          </div>
        )}

        {/* Middle row */}
        <div style={{ display:'flex', gap:14, alignItems:'stretch', flex:1, minHeight:0 }}>

          {/* Week agenda */}
          <Card style={{ flex:1, padding:'18px 20px', display:'flex', flexDirection:'column', overflow:'hidden' }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:10 }}>
              <h2 style={{ margin:0, fontSize:15, fontWeight:600, color:'#111' }}>{dashView === 'Semana' ? 'Agenda da semana' : 'Agenda do mês'}</h2>
              <div style={{ display:'flex', alignItems:'center', gap:8 }}>
                {/* Toggle Semana/Mês */}
                <div style={{ display:'flex', border:'1px solid #e5e7eb', borderRadius:6, overflow:'hidden' }}>
                  {['Semana','Mês'].map(v => (
                    <button key={v} onClick={() => setDashView(v)}
                      style={{ padding:'4px 12px', border:'none', background: dashView===v ? C.primary : 'white', color: dashView===v ? 'white' : '#6b7280', fontSize:12, fontWeight: dashView===v ? 600 : 400, cursor:'pointer', transition:'all .15s' }}>
                      {v}
                    </button>
                  ))}
                </div>
                <button style={{ background:'none', border:'none', cursor:'pointer', color:'#6b7280', fontSize:16 }}>‹</button>
                <span style={{ fontSize:13, color:'#374151', fontWeight:500 }}>{dashView === 'Semana' ? 'Semana atual' : 'Junho 2026'}</span>
                <button style={{ background:'none', border:'none', cursor:'pointer', color:'#6b7280', fontSize:16 }}>›</button>
              </div>
            </div>

            {/* Filtros */}
            <div style={{ display:'flex', gap:8, marginBottom:12, flexWrap:'wrap' }}>
              <select value={filtProf} onChange={e => setFiltProf(e.target.value)} style={selStyle}>
                <option value="Todos">Todos os profissionais</option>
                <option>Dra. Ana Silva</option>
                <option>Dr. Carlos Mendes</option>
              </select>
              {dashView === 'Semana' && <>
              <select value={filtUnidade} onChange={e => { setFiltUnidade(e.target.value); setFiltSala('Todas'); }} style={selStyle}>
                <option value="Todas">Todas as unidades</option>
                <option>Unidade Centro</option>
                <option>Unidade Jardins</option>
              </select>
              <select value={filtSala} onChange={e => setFiltSala(e.target.value)} style={selStyle}>
                <option value="Todas">Todas as salas</option>
                {filtUnidade === 'Todas' || filtUnidade === 'Unidade Centro'
                  ? ['Sala 201','Sala 202','Sala 203'].map(s => <option key={s}>{s}</option>)
                  : ['Sala 201','Sala 202'].map(s => <option key={s}>{s}</option>)
                }
              </select>
              {(filtUnidade !== 'Todas' || filtSala !== 'Todas') && (
                <button onClick={() => { setFiltUnidade('Todas'); setFiltSala('Todas'); }}
                  style={{ fontSize:12, color:'#6b7280', background:'#f3f4f6', border:'none', borderRadius:6, padding:'5px 10px', cursor:'pointer' }}>
                  ✕ Limpar filtros
                </button>
              )}
              </> }
            </div>

            {/* Vista Mensal */}
            {dashView === 'Mês' && (
              <div style={{ flex:1, overflowY:'auto' }}>
                <MonthView appts={Object.values(WEEK_APPTS).flat()} month="Junho" onApptClick={() => {}} />
              </div>
            )}

            {/* Vista Semanal */}
            {dashView === 'Semana' && (
            <div style={{ display:'grid', gridTemplateColumns:'repeat(6,1fr)', gap:0, flex:1, overflowY:'auto', borderTop:'1px solid #e5e7eb' }}>
              {WEEK_DAYS.map((d, i) => (
                <div key={d.key} style={{ borderRight: i < WEEK_DAYS.length-1 ? '1px solid #e5e7eb' : 'none', padding:'0 10px 10px' }}>
                  <div style={{ textAlign:'center', marginBottom:8, padding:'8px 0', borderBottom:'1px solid #e5e7eb', marginLeft:-10, marginRight:-10, paddingLeft:10, paddingRight:10 }}>
                    <div style={{ fontSize:11, color:'#9ca3af', fontWeight:500 }}>{d.label}</div>
                    <div style={{ fontSize:18, fontWeight:600, color:'#111' }}>{d.num}</div>
                  </div>
                  {filterAppts(dashAppts.filter(a => a.day === d.key)).map((a,i) => (
                    <div key={i} onClick={() => {
                      if (isTerapeuta && !checkedIn) return;
                      if (isTerapeuta && a.status !== 'confirmado') return;
                      setProntuModal({...a, terapeuta: a.terapeuta || 'Dra. Ana Silva'});
                    }}
                      style={{ cursor: (!isTerapeuta || (checkedIn && a.status === 'confirmado')) ? 'pointer' : 'default',
                               opacity: isTerapeuta && checkedIn && a.status !== 'confirmado' ? 0.6 : 1 }}>
                      <ApptBlock appt={a} />
                    </div>
                  ))}
                </div>
              ))}
            </div>)}

            {/* Legenda de status */}
            <div style={{ display:'flex', gap:16, paddingTop:10, marginTop:6, borderTop:'1px solid #f0f2f5', flexWrap:'wrap' }}>
              {STATUS_LEGEND_ITEMS.map(s => (
                <div key={s.key} style={{ display:'flex', alignItems:'center', gap:5 }}>
                  <div style={{ width:10, height:10, borderRadius:3, background:s.border, flexShrink:0 }} />
                  <span style={{ fontSize:11, color:'#6b7280' }}>{s.label}</span>
                </div>
              ))}
            </div>
          </Card>

          {/* Right sidebar */}
          <div style={{ width:290, display:'flex', flexDirection:'column', gap:14, flexShrink:0 }}>
            {/* Bills — só admin/secretaria */}
            {!isTerapeuta && <Card style={{ padding:'16px 18px' }}>
              <h3 style={{ margin:'0 0 14px', fontSize:14, fontWeight:600, color:'#111' }}>Contas a vencer</h3>
              <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
                {BILLS.map(b => (
                  <div key={b.id} style={{ padding:'10px 12px', border:'1px solid #e5e7eb', borderRadius:7 }}>
                    <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:4 }}>
                      <span style={{ fontSize:13, fontWeight:500, color:'#111' }}>{b.title}</span>
                      <Badge variant="pendente">{b.status}</Badge>
                    </div>
                    <div style={{ fontSize:11, color:'#9ca3af', marginBottom:2 }}>{b.date}</div>
                    <div style={{ fontSize:13, fontWeight:600, color:'#111' }}>{b.amount}</div>
                  </div>
                ))}
              </div>
            </Card>}
            {/* Birthdays */}
            <Card style={{ padding:'16px 18px' }}>
              <h3 style={{ margin:'0 0 14px', fontSize:14, fontWeight:600, color:'#111' }}>Aniversariantes do mês</h3>
              <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
                {BIRTHDAYS.map((b,i) => (
                  <div key={i} style={{ display:'flex', justifyContent:'space-between', alignItems:'center', padding:'7px 10px', background:'#f9fafb', borderRadius:6 }}>
                    <span style={{ fontSize:13, fontWeight:500, color:'#111' }}>{b.name}</span>
                    <span style={{ fontSize:11, color:'#9ca3af' }}>{b.day} · {b.date}</span>
                  </div>
                ))}
              </div>
            </Card>
          </div>
        </div>

        {/* Quick actions */}
        <Card style={{ padding:'18px 20px' }}>
          <h3 style={{ margin:'0 0 14px', fontSize:14, fontWeight:600, color:'#111' }}>Ações Rápidas</h3>
          <div style={{ display:'flex', gap:14 }}>
            {[
              { label:'Novo Paciente',        icon:'pacientes', action:() => setModal('novoPaciente') },
              { label:'Agendar Consulta',     icon:'agenda',    action:() => setModal('agendarConsulta') },
              { label:'Lançamento Financeiro',icon:'financeiro',action:() => setModal('lancamento') },
            ].map(a => (
              <button key={a.label} onClick={a.action}
                style={{ flex:1, padding:'22px 10px', background:'white', border:'1px solid #e5e7eb', borderRadius:8, cursor:'pointer', display:'flex', flexDirection:'column', alignItems:'center', gap:8, transition:'background 0.15s' }}
                onMouseEnter={e => e.currentTarget.style.background='#f9fafb'}
                onMouseLeave={e => e.currentTarget.style.background='white'}
              >
                <Icon name={a.icon} size={22} color={C.primary} />
                <span style={{ fontSize:13, color:'#374151', fontWeight:500 }}>{a.label}</span>
              </button>
            ))}
          </div>
        </Card>
      </div>
      </div>

      {/* Modal info consulta */}
      {prontuModal && dashModalT === null && (
        <ModalConsultaInfo
          appt={prontuModal}
          perfil={perfil}
          onClose={() => setProntuModal(null)}
          onIniciar={() => { setProntuTela(prontuModal); setProntuModal(null); }}
          onCancelar={() => setDashModalT('cancelar')}
          onConfirmar={() => { updateDashStatus(prontuModal.id, 'confirmado'); setProntuModal(null); }}
          onReagendar={() => setDashModalT('reagendar')}
        />
      )}
      {prontuModal && dashModalT === 'cancelar' && (
        <ModalCancelar appt={prontuModal} onClose={() => setDashModalT(null)} onConfirm={() => { updateDashStatus(prontuModal.id, 'cancelado'); setDashModalT(null); setProntuModal(null); }} />
      )}
      {prontuModal && dashModalT === 'reagendar' && (
        <ModalReagendar appt={prontuModal} onClose={() => setDashModalT(null)} onConfirm={({novaData,novaHora}) => { updateDashStatus(prontuModal.id, 'reagendado'); setDashModalT(null); setProntuModal(null); }} />
      )}

      {/* Tela cheia prontuário */}
      {prontuTela && (
        <div style={{ position:'fixed', inset:0, zIndex:1000, display:'flex' }}>
          <TelaProntuario
            appt={prontuTela}
            existente={prontuarios.find(p => p.apptId === prontuTela.id)}
            prontuarios={prontuarios}
            onSave={handleSaveProntuario}
            onVoltar={() => setProntuTela(null)}
          />
        </div>
      )}
    </div>
  );
}

Object.assign(window, { Dashboard, ModalNovoPaciente, ModalAgendarConsulta, ModalLancamento });