/* App screens for Kairos Odonto SPA — main routes */
const D = window.AppData;

const fmtMoney = (v) => v === 0 ? 'Gratuito' : `R$ ${v.toFixed(2).replace('.', ',')}`;
const fmtMoneyShort = (v) => v >= 1000 ? `R$ ${(v/1000).toFixed(1)}k` : `R$ ${v.toFixed(0)}`;
const dayLabels = ['DOM','SEG','TER','QUA','QUI','SEX','SÁB'];
const dayLabelsLong = ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado'];

const findClient = (id) => D.clients.find(c => c.id === id);
const findPro = (id) => D.pros.find(p => p.id === id);
const findService = (id) => D.services.find(s => s.id === id);

// =============================================================
// DASHBOARD
// =============================================================
const DashboardScreen = ({ role = 'owner', onNav }) => {
  const todayApts = D.appointments.filter(a => a.date === D.isoDay(D.today));
  const todayRevenue = todayApts.filter(a => a.status === 'done').reduce((s, a) => s + a.price, 0);
  const monthRevenue = D.transactions.filter(t => t.status === 'paid').reduce((s, t) => s + t.amount, 0);
  const pendingPay = D.transactions.filter(t => t.status === 'pending').reduce((s, t) => s + t.amount, 0);

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">Olá, Dra. Ana 👋</h1>
          <p className="page-sub">{D.today.toLocaleDateString('pt-BR', { weekday: 'long', day: 'numeric', month: 'long' })}</p>
        </div>
        <div className="page-actions">
          <Btn kind="outline" icon="download">Exportar</Btn>
          <Btn icon="plus" onClick={() => onNav?.('schedule')}>Novo agendamento</Btn>
        </div>
      </div>

      <div className="kpi-grid" style={{ marginBottom: 24 }}>
        <StatTile label="Agendamentos hoje" value={todayApts.length} icon="cal" delta={12} accent="#0EA5E9" />
        <StatTile label="Receita do dia" value={fmtMoneyShort(todayRevenue)} icon="money" delta={8} accent="#10B981" />
        <StatTile label="Receita do mês" value={fmtMoneyShort(monthRevenue)} icon="chart" delta={15} accent="#7C3AED" />
        <StatTile label="A receber" value={fmtMoneyShort(pendingPay)} icon="alert" delta={-3} accent="#F59E0B" />
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 24 }}>
        <Card padding="0">
          <div className="card-head">
            <div><h4>Próximos atendimentos</h4><span className="sub">Hoje · {todayApts.length} agendados</span></div>
            <button className="btn btn-ghost btn-sm" onClick={() => onNav?.('schedule')}>Ver agenda <Icon name="chevR" size={14} /></button>
          </div>
          {todayApts.length === 0 ? (
            <EmptyState icon="cal" title="Sem agendamentos hoje" body="Aproveite para colocar a papelada em dia." />
          ) : (
            <table className="tbl">
              <thead><tr><th>Horário</th><th>Cliente</th><th>Serviço</th><th>Profissional</th><th>Status</th></tr></thead>
              <tbody>
                {todayApts.slice(0, 6).map(a => {
                  const c = findClient(a.clientId), s = findService(a.serviceId), p = findPro(a.proId);
                  const st = D.STATUS[a.status];
                  return (
                    <tr key={a.id}>
                      <td className="mono">{a.start}</td>
                      <td><div className="row-name"><Avatar initials={c.initials} color={c.color} size={32} /><div><div className="nm">{c.name}</div><div className="sub">{c.phone}</div></div></div></td>
                      <td>{s.name}</td>
                      <td>{p.name.replace('Dra. ','').replace('Dr. ','')}</td>
                      <td><Badge color={st.color}>{st.label}</Badge></td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          )}
        </Card>

        <div className="vstack">
          <Card>
            <div className="between" style={{ marginBottom: 12 }}>
              <h4 style={{ margin: 0, fontSize: 15 }}>Receita — últimos 7 dias</h4>
            </div>
            <Sparkline data={[3200, 4100, 3800, 5200, 4900, 6100, 5800]} color="#10B981" />
            <div className="hstack" style={{ marginTop: 8, justifyContent: 'space-between' }}>
              <span className="muted" style={{ fontSize: 12 }}>seg</span>
              <span className="muted" style={{ fontSize: 12 }}>dom</span>
            </div>
          </Card>
          <Card>
            <h4 style={{ margin: '0 0 12px', fontSize: 15 }}>Cancelamentos</h4>
            <div className="stat-value" style={{ fontSize: 22 }}>3,2%</div>
            <div className="stat-delta stat-delta-up"><Icon name="chevD" size={12} />2pp menor que mês passado</div>
          </Card>
          <Card>
            <h4 style={{ margin: '0 0 12px', fontSize: 15 }}>Avaliação Google</h4>
            <div className="hstack" style={{ alignItems: 'baseline' }}>
              <div className="stat-value" style={{ fontSize: 28 }}>4.9</div>
              <span style={{ color: '#F59E0B' }}>★★★★★</span>
            </div>
            <div className="muted" style={{ fontSize: 12, marginTop: 4 }}>412 avaliações · +18 esta semana</div>
          </Card>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginTop: 24 }}>
        <Card>
          <h4 style={{ margin: '0 0 16px' }}>Mensagens não lidas</h4>
          <div className="vstack-tight">
            {D.conversations.filter(c => c.unread > 0).slice(0, 4).map(cv => {
              const c = findClient(cv.clientId);
              return (
                <div key={cv.id} className="hstack" style={{ padding: 10, borderRadius: 8, background: 'var(--text-bg)' }}>
                  <Avatar initials={c.initials} color={c.color} size={36} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div className="between"><strong style={{ fontSize: 14 }}>{c.name}</strong><span className="muted" style={{ fontSize: 11 }}>{cv.lastTs}</span></div>
                    <div className="muted" style={{ fontSize: 13, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{cv.last}</div>
                  </div>
                  <Badge color="#0EA5E9" kind="solid">{cv.unread}</Badge>
                </div>
              );
            })}
          </div>
        </Card>
        <Card>
          <h4 style={{ margin: '0 0 16px' }}>Lembretes do dia</h4>
          <div className="vstack-tight">
            <ReminderRow ic="bell" tone="#F59E0B" txt="3 confirmações pendentes para amanhã" />
            <ReminderRow ic="alert" tone="#EF4444" txt="2 boletos vencendo hoje" />
            <ReminderRow ic="gift" tone="#7C3AED" txt="Mariana Souza faz aniversário hoje" />
            <ReminderRow ic="star" tone="#10B981" txt="5 clientes prontos para pedir review" />
          </div>
        </Card>
      </div>
    </div>
  );
};

const ReminderRow = ({ ic, tone, txt }) => (
  <div className="hstack" style={{ padding: 10, borderRadius: 8, background: 'var(--text-bg)' }}>
    <div style={{ width: 32, height: 32, borderRadius: 8, background: `color-mix(in oklab, ${tone} 15%, white)`, color: tone, display: 'grid', placeItems: 'center' }}>
      <Icon name={ic} size={16} />
    </div>
    <span style={{ flex: 1, fontSize: 13 }}>{txt}</span>
    <button className="btn btn-ghost btn-sm">Ver</button>
  </div>
);

// Simple sparkline
const Sparkline = ({ data, color = '#0EA5E9', height = 50 }) => {
  const w = 280, h = height, p = 4;
  const max = Math.max(...data), min = Math.min(...data);
  const x = (i) => p + (i * (w - p*2)) / (data.length - 1);
  const y = (v) => h - p - ((v - min) / (max - min || 1)) * (h - p*2);
  const pts = data.map((v, i) => `${x(i)},${y(v)}`).join(' ');
  const area = `${p},${h} ` + pts + ` ${w-p},${h}`;
  return (
    <svg viewBox={`0 0 ${w} ${h}`} className="spark">
      <polygon points={area} fill={color} opacity="0.12" />
      <polyline points={pts} fill="none" stroke={color} strokeWidth="2.5" strokeLinejoin="round" strokeLinecap="round" />
      {data.map((v, i) => i === data.length - 1 && <circle key={i} cx={x(i)} cy={y(v)} r="3.5" fill={color} stroke="white" strokeWidth="2" />)}
    </svg>
  );
};

// =============================================================
// SCHEDULE — week view with drag/click
// =============================================================
const ScheduleScreen = () => {
  const [view, setView] = React.useState('week');
  const [anchor, setAnchor] = React.useState(D.today);
  const [openAppt, setOpenAppt] = React.useState(null);
  const [openNew, setOpenNew] = React.useState(false);
  const [filterPro, setFilterPro] = React.useState('all');

  const startOfWeek = (d) => { const r = new Date(d); r.setDate(d.getDate() - d.getDay() + 1); return r; };
  const days = view === 'week'
    ? Array.from({length: 6}, (_, i) => { const x = new Date(startOfWeek(anchor)); x.setDate(x.getDate()+i); return x; })
    : [anchor];
  const hours = Array.from({length: 12}, (_, i) => i + 8); // 8..19

  const apts = D.appointments.filter(a => {
    if (filterPro !== 'all' && a.proId !== filterPro) return false;
    const ad = new Date(a.date + 'T00:00:00');
    return days.some(d => D.isoDay(d) === a.date);
  });

  const todayY = (() => {
    const now = new Date();
    if (now.getHours() < 8 || now.getHours() >= 20) return null;
    return ((now.getHours() - 8) + now.getMinutes()/60) * 60;
  })();

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">Agenda</h1>
          <p className="page-sub">Visualize e gerencie seus atendimentos</p>
        </div>
        <div className="page-actions">
          <Btn kind="outline" icon="filter">Filtros</Btn>
          <Btn icon="plus" onClick={() => setOpenNew(true)}>Novo agendamento</Btn>
        </div>
      </div>

      <div className="calendar-toolbar">
        <div className="calendar-nav">
          <IconBtn name="chevL" size={16} onClick={() => { const d = new Date(anchor); d.setDate(d.getDate() - (view==='week'?7:1)); setAnchor(d); }} />
          <button className="btn btn-ghost btn-sm" onClick={() => setAnchor(D.today)}>Hoje</button>
          <IconBtn name="chevR" size={16} onClick={() => { const d = new Date(anchor); d.setDate(d.getDate() + (view==='week'?7:1)); setAnchor(d); }} />
        </div>
        <strong style={{ fontSize: 16 }}>
          {view === 'week'
            ? `${days[0].toLocaleDateString('pt-BR',{day:'numeric',month:'short'})} – ${days[days.length-1].toLocaleDateString('pt-BR',{day:'numeric',month:'short',year:'numeric'})}`
            : days[0].toLocaleDateString('pt-BR', {weekday:'long', day:'numeric', month:'long'})}
        </strong>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
          <Select value={filterPro} onChange={(e) => setFilterPro(e.target.value)} style={{ width: 180 }}>
            <option value="all">Todos profissionais</option>
            {D.pros.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
          </Select>
          <div className="calendar-nav">
            <button className={`btn btn-ghost btn-sm ${view==='day'?'btn-secondary':''}`} onClick={() => setView('day')}>Dia</button>
            <button className={`btn btn-ghost btn-sm ${view==='week'?'btn-secondary':''}`} onClick={() => setView('week')}>Semana</button>
          </div>
        </div>
      </div>

      <div className="cal-grid" style={{ '--days': days.length }}>
        <div className="cal-header-cell"></div>
        {days.map((d) => {
          const isToday = D.isoDay(d) === D.isoDay(D.today);
          return (
            <div key={d.toISOString()} className={`cal-header-cell ${isToday ? 'is-today' : ''}`}>
              <div>{dayLabels[d.getDay()]}</div>
              <div className="num">{d.getDate()}</div>
            </div>
          );
        })}
        {hours.map(h => (
          <React.Fragment key={h}>
            <div className="cal-time-cell">{h}:00</div>
            {days.map((d, di) => {
              const dayApts = apts.filter(a => a.date === D.isoDay(d) && parseInt(a.start.split(':')[0]) === h);
              const isToday = D.isoDay(d) === D.isoDay(D.today);
              return (
                <div key={di+'-'+h} className="cal-day-cell" onClick={() => setOpenNew(true)}>
                  {h === 8 && isToday && todayY != null && <div className="now-line" style={{ top: todayY - 8*60 }}></div>}
                  {dayApts.map(a => {
                    const c = findClient(a.clientId), s = findService(a.serviceId);
                    const min = parseInt(a.start.split(':')[1]);
                    const top = (min/60)*60;
                    const height = (a.dur / 60) * 60 - 2;
                    return (
                      <div key={a.id}
                        className={`cal-event cal-event-status-${a.status}`}
                        style={{ '--ec': s.color, top, height }}
                        onClick={(e) => { e.stopPropagation(); setOpenAppt(a); }}>
                        <div className="nm">{a.start} · {c.name.split(' ')[0]} {c.name.split(' ').slice(-1)[0]}</div>
                        <div className="meta">{s.name}</div>
                      </div>
                    );
                  })}
                </div>
              );
            })}
          </React.Fragment>
        ))}
      </div>

      {openAppt && <AppointmentModal appt={openAppt} onClose={() => setOpenAppt(null)} />}
      {openNew && <ManualBookingModal onClose={() => setOpenNew(false)} />}
    </div>
  );
};

const AppointmentModal = ({ appt, onClose }) => {
  const c = findClient(appt.clientId), s = findService(appt.serviceId), p = findPro(appt.proId);
  const st = D.STATUS[appt.status];
  const t = useToast();
  return (
    <Modal open onClose={onClose} title="Detalhes do agendamento" size="lg"
      footer={<>
        <Btn kind="ghost" icon="trash">Cancelar atendimento</Btn>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
          <Btn kind="outline" icon="whats" onClick={() => t.push({kind:'success', title:'Mensagem enviada', body: c.name + ' recebeu o lembrete.'})}>Enviar lembrete</Btn>
          <Btn icon="check" onClick={() => { t.push({kind:'success', title:'Confirmado!', body:'Cliente foi notificado.'}); onClose(); }}>Confirmar presença</Btn>
        </div>
      </>}>
      <div className="hstack" style={{ marginBottom: 20, gap: 16 }}>
        <Avatar initials={c.initials} color={c.color} size={56} />
        <div style={{ flex: 1 }}>
          <h3 style={{ margin: 0, fontSize: 18 }}>{c.name}</h3>
          <div className="hstack-tight muted" style={{ fontSize: 13, marginTop: 4 }}>
            <Icon name="phone" size={14} /> {c.phone}
            <span>·</span>
            <Icon name="mail" size={14} /> {c.email}
          </div>
        </div>
        <Badge color={st.color}>{st.label}</Badge>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16, marginBottom: 16 }}>
        <InfoRow label="Serviço" value={s.name} accent={s.color} />
        <InfoRow label="Duração" value={`${s.dur} min`} />
        <InfoRow label="Profissional" value={p.name} />
        <InfoRow label="Sala / Box" value="Box 02" />
        <InfoRow label="Data / Hora" value={`${appt.date} · ${appt.start}`} />
        <InfoRow label="Valor" value={fmtMoney(appt.price)} />
        <InfoRow label="Convênio" value={D.insurances.find(i=>i.id===c.insurance)?.name} />
        <InfoRow label="Pagamento" value={appt.status === 'done' ? 'Pago · PIX' : 'A definir'} />
      </div>

      {c.notes && (
        <div style={{ padding: 12, background: '#FEF3C7', borderRadius: 8, marginBottom: 12 }}>
          <strong style={{ fontSize: 12, color: '#92400E' }}>⚠ ALERTA CLÍNICO</strong>
          <div style={{ fontSize: 13, marginTop: 4 }}>{c.notes}</div>
        </div>
      )}
    </Modal>
  );
};

const InfoRow = ({ label, value, accent }) => (
  <div>
    <div className="muted" style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.04em', fontWeight: 600 }}>{label}</div>
    <div style={{ fontSize: 14, fontWeight: 600, marginTop: 2, display: 'flex', alignItems: 'center', gap: 6 }}>
      {accent && <span style={{ width: 8, height: 8, borderRadius: 2, background: accent }}></span>}
      {value || '—'}
    </div>
  </div>
);

const ManualBookingModal = ({ onClose }) => {
  const [step, setStep] = React.useState(1);
  const [client, setClient] = React.useState(null);
  const [svc, setSvc] = React.useState(null);
  const [pro, setPro] = React.useState(null);
  const [day, setDay] = React.useState(0);
  const [time, setTime] = React.useState(null);
  const t = useToast();

  const days = Array.from({length: 14}, (_, i) => D.dayOffset(i));
  const times = ['09:00','09:30','10:00','10:30','11:00','11:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00','17:30','18:00'];

  return (
    <Modal open onClose={onClose} title="Agendamento manual" size="lg"
      footer={<>
        <Btn kind="ghost" onClick={() => step > 1 ? setStep(step-1) : onClose()}>{step > 1 ? 'Voltar' : 'Cancelar'}</Btn>
        <div style={{ marginLeft: 'auto' }}>
          {step < 4 ? (
            <Btn onClick={() => setStep(step+1)} disabled={(step===1 && !client) || (step===2 && (!svc||!pro)) || (step===3 && time==null)}>Próximo</Btn>
          ) : (
            <Btn icon="check" onClick={() => { t.push({kind:'success', title:'Agendamento criado', body: client?.name + ' · ' + svc?.name}); onClose(); }}>Confirmar agendamento</Btn>
          )}
        </div>
      </>}>
      <div className="hstack" style={{ marginBottom: 20, gap: 6 }}>
        {[1,2,3,4].map(n => (
          <React.Fragment key={n}>
            <div className={`booking-step-dot ${step===n?'is-active':step>n?'is-done':''}`}>{step>n ? <Icon name="check" size={14}/> : n}</div>
            {n<4 && <div className={`booking-step-line ${step>n?'is-done':''}`}></div>}
          </React.Fragment>
        ))}
        <span className="muted" style={{ marginLeft: 'auto', fontSize: 13 }}>
          {['Cliente','Serviço e profissional','Data e horário','Confirmação'][step-1]}
        </span>
      </div>

      {step === 1 && (
        <div className="vstack">
          <Field label="Buscar cliente">
            <Input placeholder="Digite nome, telefone ou CPF" />
          </Field>
          <div style={{ maxHeight: 280, overflowY: 'auto' }} className="vstack-tight">
            {D.clients.slice(0, 8).map(c => (
              <div key={c.id} className={`hstack ${client?.id===c.id?'choice-tile is-selected':'choice-tile'}`} style={{ padding: 12 }} onClick={() => setClient(c)}>
                <Avatar initials={c.initials} color={c.color} size={36} />
                <div style={{ flex: 1 }}>
                  <strong>{c.name}</strong>
                  <div className="muted" style={{ fontSize: 12 }}>{c.phone}</div>
                </div>
                {c.tags[0] && <Badge color="#7C3AED">{c.tags[0]}</Badge>}
              </div>
            ))}
          </div>
          <button className="btn btn-outline" style={{ alignSelf: 'flex-start' }}><Icon name="plus" /> Cadastrar novo cliente</button>
        </div>
      )}

      {step === 2 && (
        <div className="vstack" style={{ gap: 20 }}>
          <div>
            <div className="field-label" style={{ marginBottom: 8 }}>Serviço</div>
            <div className="service-list" style={{ maxHeight: 220, overflowY: 'auto' }}>
              {D.services.slice(0, 6).map(s => (
                <div key={s.id} className={`service-tile ${svc?.id===s.id?'is-selected':''}`} onClick={() => setSvc(s)}>
                  <div style={{ width: 8, height: 40, borderRadius: 4, background: s.color }}></div>
                  <div className="service-tile-info">
                    <div className="service-tile-name">{s.name}</div>
                    <div className="service-tile-meta">{s.dur} min · {s.cat}</div>
                  </div>
                  <div className="service-tile-price">{fmtMoney(s.price)}</div>
                </div>
              ))}
            </div>
          </div>
          <div>
            <div className="field-label" style={{ marginBottom: 8 }}>Profissional</div>
            <div className="pro-list">
              {D.pros.map(p => (
                <div key={p.id} className={`pro-tile ${pro?.id===p.id?'is-selected':''}`} onClick={() => setPro(p)}>
                  <Avatar initials={p.initials} color={p.color} size={48} />
                  <div className="name">{p.name.replace('Dra. ','').replace('Dr. ','')}</div>
                  <div className="role">{p.role.split('·')[0]}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

      {step === 3 && (
        <div className="vstack" style={{ gap: 20 }}>
          <div>
            <div className="field-label" style={{ marginBottom: 8 }}>Data</div>
            <div className="day-pills">
              {days.map((d, i) => (
                <div key={i} className={`day-pill ${day===i?'is-selected':''}`} onClick={() => setDay(i)}>
                  <div className="dow">{dayLabels[d.getDay()]}</div>
                  <div className="num">{d.getDate()}</div>
                </div>
              ))}
            </div>
          </div>
          <div>
            <div className="field-label" style={{ marginBottom: 8 }}>Horário</div>
            <div className="time-grid">
              {times.map(tm => (
                <button key={tm} className={`time-pill ${time===tm?'is-selected':''}`} onClick={() => setTime(tm)} disabled={tm === '14:30'}>{tm}</button>
              ))}
            </div>
          </div>
        </div>
      )}

      {step === 4 && (
        <div className="vstack" style={{ gap: 12 }}>
          <Card padding="16px">
            <h4 style={{ margin: '0 0 12px' }}>Resumo</h4>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              <InfoRow label="Cliente" value={client?.name} />
              <InfoRow label="Profissional" value={pro?.name} />
              <InfoRow label="Serviço" value={svc?.name} accent={svc?.color} />
              <InfoRow label="Duração" value={`${svc?.dur} min`} />
              <InfoRow label="Data" value={days[day].toLocaleDateString('pt-BR', {weekday:'long', day:'numeric', month:'short'})} />
              <InfoRow label="Horário" value={time} />
              <InfoRow label="Valor" value={fmtMoney(svc?.price || 0)} />
              <InfoRow label="Convênio" value={D.insurances.find(i=>i.id===client?.insurance)?.name} />
            </div>
          </Card>
          <Field>
            <label className="checkbox"><input type="checkbox" defaultChecked /><span style={{ fontSize: 14 }}>Enviar confirmação por WhatsApp para o cliente</span></label>
            <label className="checkbox"><input type="checkbox" defaultChecked /><span style={{ fontSize: 14 }}>Programar lembrete 24h antes</span></label>
          </Field>
        </div>
      )}
    </Modal>
  );
};

Object.assign(window, { DashboardScreen, ScheduleScreen, AppointmentModal, ManualBookingModal, Sparkline, fmtMoney, fmtMoneyShort, findClient, findPro, findService, dayLabels, dayLabelsLong, ReminderRow, InfoRow });


const statusColor = (s) => ({ confirmed:'#10B981', pending:'#F59E0B', completed:'#64748B', cancelled:'#EF4444', noshow:'#EF4444' })[s] || '#64748B';
const statusLabel = (s) => ({ confirmed:'Confirmado', pending:'Pendente', completed:'Concluído', cancelled:'Cancelado', noshow:'Faltou' })[s] || s;

Object.assign(window, { fmtMoney, fmtMoneyShort, findClient, findPro, findService, dayLabels, dayLabelsLong, InfoRow, statusColor, statusLabel });