/* global React */
const { useState: useStateHosp, useEffect: useEffectHosp, useRef: useRefHosp } = React;

// =====================================================================
// HOSPITAIS — tela de cadastro completa (CRUD)
// =====================================================================
function HospitaisView({ hospitais, onSalvar, onRemover, onAdicionar, blocos, casa, onSalvarCasa }) {
  const [editandoId, setEditandoId] = useStateHosp(null);
  const [adicionando, setAdicionando] = useStateHosp(false);
  const [editandoCasa, setEditandoCasa] = useStateHosp(false);
  // Auto-foco vindo do onboarding ("Configurar agora →" do FazerEscalaView)
  const [focoId, setFocoId] = useStateHosp(null);
  useEffectHosp(() => {
    if (window.__hospitalFocoId) {
      const id = window.__hospitalFocoId;
      window.__hospitalFocoId = null;
      setFocoId(id);
      setEditandoId(id); // já abre em modo edição
      // remove o highlight depois de 3s
      setTimeout(() => setFocoId(null), 3000);
    }
  }, []);

  // Para cada hospital, contar quantos plantões já têm na agenda
  const usoDe = (id) => blocos.filter(b => (b.tipo === 'plantao' && b.hospitalId === id) || (b.tipo === 'deslocamento' && b.hospitalDestinoId === id)).length;

  return (
    <div style={{display: 'grid', gap: 'var(--s-5)'}}>
      <div style={{
        background: 'var(--bg)', borderRadius: 'var(--r-lg)',
        boxShadow: 'var(--shadow-sm)', padding: 'var(--s-6)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
        gap: 'var(--s-5)', flexWrap: 'wrap',
      }}>
        <div>
          <div className="eyebrow">Cadastro</div>
          <h2 className="h2" style={{marginTop: 4, fontSize: 32}}>Seus hospitais</h2>
          <p className="small" style={{marginTop: 4, maxWidth: 480}}>
            Os hospitais que aparecem nas suas escalas. Cada um vira uma cor própria
            na grade, na lista e nos relatórios.
          </p>
        </div>
        <button
          type="button"
          onClick={() => setAdicionando(true)}
          className="btn"
          style={{background:'var(--ink)', color:'var(--bg)'}}
        >
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
          Adicionar hospital
        </button>
      </div>

      {/* Grid de cards */}
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))',
        gap: 'var(--s-4)',
      }}>
        {casa && (
          <CasaCard
            casa={casa}
            hospitais={hospitais}
            editando={editandoCasa}
            onEditar={() => setEditandoCasa(true)}
            onCancelar={() => setEditandoCasa(false)}
            onSalvar={(dados) => { onSalvarCasa(dados); setEditandoCasa(false); }}
          />
        )}
        {hospitais.map(h => (
          <div key={h.id} style={{
            outline: focoId === h.id ? `3px solid ${h.corDeep}` : 'none',
            outlineOffset: 4,
            borderRadius: 'var(--r-lg)',
            transition: 'outline 0.3s ease',
          }}>
            <HospitalCard
              hospital={h}
              uso={usoDe(h.id)}
              editando={editandoId === h.id}
              onEditar={() => setEditandoId(h.id)}
              onCancelar={() => setEditandoId(null)}
              onSalvar={(dados) => { onSalvar(h.id, dados); setEditandoId(null); }}
              onRemover={() => { if (confirm(`Remover ${h.nome}? Plantões existentes deste hospital ficarão órfãos.`)) onRemover(h.id); }}
            />
          </div>
        ))}
        {hospitais.length === 0 && (
          <div style={{
            gridColumn: '1 / -1',
            padding: 'var(--s-7)',
            border: '2px dashed var(--line-2)',
            borderRadius: 'var(--r-lg)',
            textAlign: 'center', color: 'var(--ink-2)',
          }}>
            Nenhum hospital cadastrado ainda. Clique em "Adicionar hospital" para começar.
          </div>
        )}
      </div>

      {adicionando && (
        <HospitalDialog
          onClose={() => setAdicionando(false)}
          onSalvar={(dados) => { onAdicionar(dados); setAdicionando(false); }}
          titulo="Novo hospital"
          jaUsadas={hospitais.map(h => h.family)}
        />
      )}
    </div>
  );
}

function HospitalCard({ hospital, uso, editando, onEditar, onCancelar, onSalvar, onRemover }) {
  return (
    <>
      {editando && (
        <HospitalEditModal
          inicial={hospital}
          onCancelar={onCancelar}
          onSalvar={onSalvar}/>
      )}
      <article style={{
      background: 'var(--bg)',
      borderRadius: 'var(--r-lg)',
      boxShadow: 'var(--shadow-sm)',
      border: '1px solid var(--line)',
      borderTop: `6px solid ${hospital.cor}`,
      padding: 'var(--s-5)',
      display: 'flex', flexDirection: 'column', gap: 'var(--s-3)',
    }}>
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start', gap: 'var(--s-3)'}}>
        <div>
          <div style={{
            fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 700,
            color: hospital.corDeep, letterSpacing: '0.06em',
            textTransform: 'uppercase',
          }}>{hospital.abrev}</div>
          <h3 style={{
            fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500,
            color: 'var(--ink)', margin: 0, marginTop: 4,
            letterSpacing: '-0.01em',
          }}>{hospital.nome}</h3>
        </div>
        <div style={{
          fontSize: 11, color: 'var(--ink-2)',
          padding: '4px 8px', borderRadius: 'var(--r-pill)',
          background: hospital.corWash, fontFamily: 'var(--font-body)', fontWeight: 600,
        }}>{uso} plantõe{uso === 1 ? '' : 's'}</div>
      </div>

      {hospital.endereco && (
        <Linha label="Endereço" value={hospital.endereco}/>
      )}
      {hospital.deslocCasa != null && (
        <Linha label="De casa" value={`${hospital.deslocCasa} min`}/>
      )}
      {hospital.telefone && (
        <Linha label="Plantão" value={hospital.telefone} mono/>
      )}
      {hospital.notas && (
        <Linha label="Notas" value={hospital.notas} multiline/>
      )}

      <TurnosResumo turnos={hospital.turnos}/>

      <div style={{display: 'flex', gap: 8, marginTop: 'var(--s-3)'}}>
        <button type="button" className="btn btn--ghost" onClick={onEditar} style={{flex:1, justifyContent:'center'}}>
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
          Editar
        </button>
        <button type="button" onClick={onRemover} style={{
          padding: '8px 12px', background: 'transparent', border: '1px solid var(--line)',
          color: 'var(--err)', borderRadius: 'var(--r-pill)',
          fontFamily: 'var(--font-body)', fontSize: 13, fontWeight: 600,
          cursor: 'pointer',
        }}>
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
        </button>
      </div>
    </article>
    </>
  );
}

// Modal full-screen pra editar hospital — resolve problema de foco/scroll quando
// o card cresce muito (turnos + regras + remuneração + chatbot).
function HospitalEditModal({ inicial, onCancelar, onSalvar }) {
  return (
    <div onClick={onCancelar} style={{
      position:'fixed', inset: 0, zIndex: 80,
      background: 'rgba(58,46,42,0.55)',
      display:'flex', alignItems:'center', justifyContent:'center',
      padding: 'var(--s-4)', overflow:'auto',
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        background:'var(--bg)', borderRadius:'var(--r-lg)',
        maxWidth: 720, width:'100%', maxHeight:'90vh', overflow:'auto',
        padding:'var(--s-5)',
        boxShadow: 'var(--shadow-lg)',
      }}>
        <HospitalForm inicial={inicial} onCancelar={onCancelar} onSalvar={onSalvar} embed/>
      </div>
    </div>
  );
}

function Linha({ label, value, mono, multiline }) {
  return (
    <div>
      <div className="eyebrow" style={{fontSize: 9}}>{label}</div>
      <div style={{
        fontFamily: mono ? 'ui-monospace, monospace' : 'var(--font-body)',
        fontSize: 13, color: 'var(--ink)', marginTop: 2,
        lineHeight: multiline ? 1.4 : 1.2,
        whiteSpace: multiline ? 'pre-wrap' : 'normal',
      }}>{value}</div>
    </div>
  );
}

function HospitalForm({ inicial, onCancelar, onSalvar, embed }) {
  const [form, setForm] = useStateHosp(() => ({
    nome: inicial?.nome || '',
    abrev: inicial?.abrev || '',
    endereco: inicial?.endereco || '',
    tipo: inicial?.tipo || 'publico',  // 'publico' | 'particular'
    family: inicial?.family || 'sand',
    deslocCasa: inicial?.deslocCasa ?? 30,
    telefone: inicial?.telefone || '',
    notas: inicial?.notas || '',
    turnos: inicial?.turnos || {},
    regrasEscala: inicial?.regrasEscala || null,
    remuneracao: inicial?.remuneracao || null,
  }));

  const set = (k, v) => setForm(prev => ({...prev, [k]: v}));
  const familia = window.FAMILIAS_HOSPITAL.find(f => f.family === form.family) || window.FAMILIAS_HOSPITAL[0];

  const submit = () => {
    if (!form.nome.trim()) return;
    const abrev = form.abrev.trim() || form.nome.trim().split(/\s+/).map(p => p[0]).join('').slice(0,4).toUpperCase();
    const turnosLimpos = {};
    for (const k of ['manha', 'tarde', 'noitinha', 'noite']) {
      if (form.turnos[k]) turnosLimpos[k] = form.turnos[k];
    }
    onSalvar({
      ...form,
      nome: form.nome.trim(), abrev,
      cor: familia.cor, corDeep: familia.corDeep, corWash: familia.corWash,
      deslocCasa: parseInt(form.deslocCasa) || 0,
      turnos: turnosLimpos,
      regrasEscala: form.regrasEscala || undefined,
      remuneracao: form.remuneracao || undefined,
    });
  };

  const wrapStyle = embed ? {
    background: 'var(--bg)',
    borderRadius: 'var(--r-lg)',
    boxShadow: 'var(--shadow-sm)',
    border: `1px solid ${familia.cor}66`,
    borderTop: `4px solid ${familia.cor}`,
    padding: 'var(--s-5)',
    display: 'grid', gap: 'var(--s-3)',
  } : {};

  return (
    <div style={wrapStyle} className={embed ? 'hosp-form-wrap' : ''}>
      <div className="eyebrow">{inicial ? 'Editar hospital' : 'Novo hospital'}</div>

      <div className="form-2col" style={{display: 'grid', gridTemplateColumns: '1fr auto', gap: 'var(--s-3)', alignItems: 'end'}}>
        <Field label="Nome completo">
          <input className="input" value={form.nome}
            onChange={e => set('nome', e.target.value)}
            placeholder="Hospital Santa Lúcia"
            autoFocus/>
        </Field>
        <Field label="Apelido">
          <input className="input" value={form.abrev}
            maxLength={6}
            onChange={e => set('abrev', e.target.value.toUpperCase())}
            placeholder="HSL"
            style={{width: 90, textAlign: 'center', fontWeight: 700}}/>
        </Field>
      </div>

      <Field label="Endereço">
        <input className="input" value={form.endereco}
          onChange={e => set('endereco', e.target.value)}
          placeholder="Asa Sul, Brasília"/>
      </Field>

      <Field label="Tipo" sub="Define o modelo de remuneração: público tem valor mais fixo, particular varia bastante.">
        <div style={{display:'flex', gap: 6}}>
          {[
            { id: 'publico', label: 'Público', sub: 'valor base + adicional noturno' },
            { id: 'particular', label: 'Particular', sub: 'totalmente variável (FDS, feriado, etc)' },
          ].map(t => {
            const sel = form.tipo === t.id;
            return (
              <button key={t.id} type="button" onClick={() => set('tipo', t.id)}
                style={{
                  flex: 1, padding: '8px 12px', textAlign:'left',
                  border: `2px solid ${sel ? familia.corDeep : 'var(--line)'}`,
                  background: sel ? familia.corWash : 'var(--bg)',
                  borderRadius: 'var(--r-md)', cursor:'pointer',
                  fontFamily: 'var(--font-body)',
                }}>
                <div style={{fontWeight: 700, fontSize: 13, color: sel ? familia.corDeep : 'var(--ink)'}}>
                  {t.label}
                </div>
                <div className="small" style={{fontSize: 11, color:'var(--ink-3)', marginTop: 2}}>
                  {t.sub}
                </div>
              </button>
            );
          })}
        </div>
      </Field>

      <Field label="Cor da família" sub="Define a cor do hospital nas escalas">
        <div style={{display: 'flex', gap: 6, flexWrap: 'wrap', marginTop: 4}}>
          {window.FAMILIAS_HOSPITAL.map(f => (
            <button key={f.family}
              type="button"
              onClick={() => set('family', f.family)}
              style={{
                width: 36, height: 36, borderRadius: 999,
                background: f.cor, cursor: 'pointer',
                border: form.family === f.family ? `3px solid ${f.corDeep}` : '2px solid var(--line)',
                outline: form.family === f.family ? `2px solid ${f.corDeep}33` : 'none',
                outlineOffset: 2,
                transition: 'all var(--dur-1) var(--ease)',
              }}
              title={f.family}/>
          ))}
        </div>
      </Field>

      <div className="form-2col" style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--s-3)'}}>
        <Field label="Tempo de casa (min)">
          <input className="input" type="number" min="0" max="180"
            value={form.deslocCasa}
            onChange={e => set('deslocCasa', e.target.value)}/>
        </Field>
        <Field label="Telefone do plantão">
          <input className="input" value={form.telefone}
            onChange={e => set('telefone', e.target.value)}
            placeholder="(61) 0000-0000"/>
        </Field>
      </div>

      <Field label="Notas livres">
        <textarea className="input" value={form.notas}
          onChange={e => set('notas', e.target.value)}
          rows={3}
          placeholder="Senha do estacionamento, contato do supervisor, observações..."
          style={{resize: 'vertical', fontFamily: 'inherit'}}/>
      </Field>

      <EditorTurnos turnos={form.turnos} onChange={(novosTurnos) => set('turnos', novosTurnos)}/>

      <EditorRegrasEscala
        regras={form.regrasEscala}
        turnos={form.turnos}
        familia={familia}
        hospital={{ abrev: form.abrev, nome: form.nome, tipo: form.tipo, turnos: form.turnos }}
        onChange={(r) => set('regrasEscala', r)}/>

      <EditorRemuneracao
        remuneracao={form.remuneracao}
        familia={familia}
        tipo={form.tipo}
        onChange={(r) => set('remuneracao', r)}/>

      <div style={{display: 'flex', gap: 8, marginTop: 'var(--s-3)'}}>
        <button type="button" className="btn btn--ghost" onClick={onCancelar} style={{flex:1, justifyContent:'center'}}>
          Cancelar
        </button>
        <button type="button" className="btn"
          onClick={submit}
          disabled={!form.nome.trim()}
          style={{
            flex: 1, justifyContent: 'center',
            background: 'var(--ink)', color: 'var(--bg)',
            opacity: form.nome.trim() ? 1 : 0.5,
          }}>
          Salvar
        </button>
      </div>
    </div>
  );
}

function HospitalDialog({ onClose, onSalvar, titulo }) {
  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, zIndex: 50,
      background: 'rgba(58, 46, 42, 0.3)',
      backdropFilter: 'blur(2px)',
      display: 'grid', placeItems: 'center',
      padding: 20,
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        background: 'var(--bg)',
        borderRadius: 'var(--r-lg)',
        padding: 'var(--s-6)',
        width: '100%', maxWidth: 520,
        boxShadow: 'var(--shadow-lg)',
        maxHeight: '90vh', overflowY: 'auto',
      }}>
        <h2 className="h2" style={{fontSize: 26, marginBottom: 'var(--s-5)'}}>{titulo}</h2>
        <HospitalForm onCancelar={onClose} onSalvar={onSalvar}/>
      </div>
    </div>
  );
}

function Field({ label, sub, children }) {
  return (
    <label style={{display: 'block'}}>
      <div className="eyebrow" style={{display:'block', marginBottom: 4, fontSize: 10}}>{label}</div>
      {sub && <div className="small" style={{marginBottom: 4, fontSize: 11}}>{sub}</div>}
      {children}
    </label>
  );
}

// =====================================================================
// EditorRegrasEscala — regras pra feature "Fazer escala"
// Opt-in: quando ativado, hospital participa do solver de simulação mensal.
// Snapshot dessas regras é gravado em cada proposta gerada.
// =====================================================================
function EditorRegrasEscala({ regras, turnos, familia, onChange, hospital }) {
  const ativo = !!regras?.ativo;
  const turnosDisponiveis = Object.keys(turnos || {});
  const semTurnos = turnosDisponiveis.length === 0;
  const [chatAberto, setChatAberto] = useStateHosp(false);

  const ativar = () => {
    if (semTurnos) {
      alert('Cadastre pelo menos 1 turno padrão antes de ligar a simulação. (Seção "Turnos padrão deste hospital" acima.)');
      return;
    }
    // Defaults razoáveis quando Mariana liga pela primeira vez
    onChange({
      ativo: true,
      plantoesMin: 6, plantoesMax: 10,
      fdsMin: 1, fdsMax: 3,
      horasMin: 36, horasMax: 72,
      turnosPermitidos: turnosDisponiveis,
      diasIndisponiveis: [],
      intervaloMinH: 12,
      ...(regras || {}),
      ativo: true,
    });
  };
  const desligar = () => onChange({ ...(regras || {}), ativo: false });
  const set = (k, v) => onChange({ ...(regras || {}), [k]: v });

  const DIAS = ['Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom'];
  const toggleDia = (i) => {
    const arr = regras?.diasIndisponiveis || [];
    set('diasIndisponiveis', arr.includes(i) ? arr.filter(x => x !== i) : [...arr, i].sort((a,b)=>a-b));
  };
  const toggleTurno = (t) => {
    const arr = regras?.turnosPermitidos || [];
    set('turnosPermitidos', arr.includes(t) ? arr.filter(x => x !== t) : [...arr, t]);
  };

  return (
    <div style={{
      padding: 'var(--s-3) var(--s-4)',
      background: ativo ? `${familia?.corWash || 'var(--bg-alt)'}` : 'var(--bg-alt)',
      borderRadius: 'var(--r-md)',
      border: ativo ? `1px solid ${familia?.corDeep || 'var(--line)'}33` : '1px solid var(--line)',
    }}>
      <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', gap:'var(--s-3)'}}>
        <div>
          <div className="eyebrow" style={{marginBottom: 4, fontSize: 10}}>Regras pra "Fazer escala"</div>
          <p className="small" style={{fontSize: 11, margin: 0, maxWidth: 460}}>
            Quando você usar o simulador mensal, o app monta propostas que respeitam essas regras.
            Deixe desligado se este hospital só recebe escala pronta.
          </p>
        </div>
        <div style={{display:'flex', gap: 6, flexShrink: 0}}>
          <button type="button" onClick={() => setChatAberto(true)}
            className="btn"
            disabled={semTurnos}
            title={semTurnos ? 'Cadastre turnos padrão acima primeiro.' : 'Conversar com IA pra estruturar regras complexas'}
            style={{
              background: 'var(--colo-blue-50, #EAF2F9)',
              color: 'var(--colo-blue-tag, #3F6E9C)',
              border: '1px solid var(--colo-blue-tag, #3F6E9C)33',
              padding: '6px 12px', fontSize: 12, fontWeight: 600,
              whiteSpace: 'nowrap',
              opacity: semTurnos ? 0.5 : 1,
              cursor: semTurnos ? 'not-allowed' : 'pointer',
            }}>
            🗨 Conversar
          </button>
          <button type="button" onClick={ativo ? desligar : ativar}
            className="btn"
            title={semTurnos && !ativo ? 'Cadastre turnos padrão acima primeiro.' : ''}
            style={{
              background: ativo ? (familia?.corDeep || 'var(--ink)') : 'var(--bg)',
              color: ativo ? 'var(--bg)' : 'var(--ink)',
              border: ativo ? 'none' : '1px solid var(--line)',
              padding: '6px 14px', fontSize: 12,
              whiteSpace: 'nowrap',
              opacity: (semTurnos && !ativo) ? 0.5 : 1,
              cursor: (semTurnos && !ativo) ? 'not-allowed' : 'pointer',
            }}>
            {ativo ? 'Desligar' : 'Ligar simulação'}
          </button>
        </div>
      </div>

      {chatAberto && (
        <ChatRegras
          hospital={hospital}
          regraAtual={regras}
          familia={familia}
          onAplicar={(novaRegra) => { onChange(novaRegra); setChatAberto(false); }}
          onClose={() => setChatAberto(false)}
        />
      )}
      {semTurnos && !ativo && (
        <div className="small" style={{
          marginTop: 'var(--s-2)', fontSize: 11,
          color: 'var(--err, #B25A4D)',
        }}>
          ⚠ Esse hospital ainda não tem turnos cadastrados. Marque pelo menos 1 turno na seção acima.
        </div>
      )}

      {ativo && (
        <div style={{display:'grid', gap:'var(--s-3)', marginTop:'var(--s-3)'}}>
          {/* Plantões / FDS / Horas em min–max */}
          <div className="form-2col" style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:'var(--s-3)'}}>
            <RangeMinMax label="Plantões / mês"
              min={regras.plantoesMin} max={regras.plantoesMax}
              onMin={v => set('plantoesMin', v)} onMax={v => set('plantoesMax', v)}
              hint="min – max"/>
            <RangeMinMax label="Fins-de-semana"
              min={regras.fdsMin} max={regras.fdsMax}
              onMin={v => set('fdsMin', v)} onMax={v => set('fdsMax', v)}
              hint="sáb/dom"/>
            <RangeMinMax label="Horas / mês"
              min={regras.horasMin} max={regras.horasMax}
              onMin={v => set('horasMin', v)} onMax={v => set('horasMax', v)}
              hint="alvo"/>
          </div>

          {/* Turnos permitidos */}
          {turnosDisponiveis.length > 0 && (
            <div>
              <div className="eyebrow" style={{fontSize: 10, marginBottom: 4}}>Turnos que ela cobre aqui</div>
              <div style={{display:'flex', gap:6, flexWrap:'wrap'}}>
                {turnosDisponiveis.map(t => {
                  const sel = (regras.turnosPermitidos || []).includes(t);
                  return (
                    <button key={t} type="button" onClick={() => toggleTurno(t)}
                      style={{
                        padding: '4px 12px', fontSize: 12, fontWeight: 600,
                        border: `1px solid ${sel ? (familia?.corDeep || 'var(--ink)') : 'var(--line)'}`,
                        background: sel ? (familia?.cor || 'var(--ink)') : 'var(--bg)',
                        color: sel ? (familia?.corDeep || 'var(--bg)') : 'var(--ink-2)',
                        borderRadius: 'var(--r-pill)', cursor: 'pointer',
                        textTransform: 'capitalize',
                      }}>
                      {t}
                    </button>
                  );
                })}
              </div>
            </div>
          )}

          {/* Dias da semana indisponíveis */}
          <div>
            <div className="eyebrow" style={{fontSize: 10, marginBottom: 4}}>Dias da semana que NUNCA pega aqui</div>
            <div style={{display:'flex', gap:4}}>
              {DIAS.map((d, i) => {
                const sel = (regras.diasIndisponiveis || []).includes(i);
                return (
                  <button key={i} type="button" onClick={() => toggleDia(i)}
                    style={{
                      width: 40, padding: '6px 0', fontSize: 12, fontWeight: 600,
                      border: `1px solid ${sel ? 'var(--err)' : 'var(--line)'}`,
                      background: sel ? 'var(--err-bg, #FBE9E5)' : 'var(--bg)',
                      color: sel ? 'var(--err, #B25A4D)' : 'var(--ink-2)',
                      borderRadius: 'var(--r-sm)', cursor: 'pointer',
                    }}>
                    {d}
                  </button>
                );
              })}
            </div>
          </div>

          {/* Intervalo mínimo */}
          <div style={{display:'flex', gap:'var(--s-3)', alignItems:'center'}}>
            <span className="small" style={{fontSize: 12, fontWeight: 600}}>
              Descanso mínimo entre dois plantões:
            </span>
            <input type="number" min="0" max="48"
              value={regras.intervaloMinH ?? 12}
              onChange={e => set('intervaloMinH', parseInt(e.target.value) || 0)}
              style={{
                width: 60, padding: '4px 8px',
                border: '1px solid var(--line)', borderRadius: 'var(--r-sm)',
                fontFamily: 'var(--font-body)', fontSize: 12,
              }}/>
            <span className="small" style={{fontSize: 12}}>horas</span>
          </div>
        </div>
      )}
    </div>
  );
}

// =====================================================================
// ChatRegras — modal pra Mariana descrever regras em texto livre, IA
// estrutura em regrasEscala JSON. Suporta múltiplos turnos de conversa.
// =====================================================================
function ChatRegras({ hospital, regraAtual, familia, onAplicar, onClose }) {
  const [mensagens, setMensagens] = useStateHosp([]); // [{role, content}]
  const [input, setInput] = useStateHosp('');
  const [carregando, setCarregando] = useStateHosp(false);
  const [erro, setErro] = useStateHosp(null);
  const [propostaAtual, setPropostaAtual] = useStateHosp(null);

  const enviar = async () => {
    const txt = input.trim();
    if (!txt || carregando) return;
    setErro(null);
    setMensagens(prev => [...prev, { role: 'user', content: txt }]);
    setInput('');
    setCarregando(true);
    try {
      const r = await fetch('/api/interpretar-regras', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
          hospital,
          regraAtual,
          mensagens,
          novaMensagem: txt,
        }),
      });
      const data = await r.json();
      if (!data.ok) {
        setErro(data.erro || 'Falhou em interpretar');
        setCarregando(false);
        return;
      }
      const respConteudo = {
        mensagem: data.mensagem,
        perguntas: data.perguntas || [],
        regraProposta: data.regraProposta,
        resumo: data.resumoMudancas || [],
      };
      setMensagens(prev => [...prev, { role: 'assistant', content: data.mensagem, ...respConteudo }]);
      if (data.regraProposta) setPropostaAtual(data.regraProposta);
    } catch (e) {
      setErro('Erro de rede: ' + e.message);
    } finally {
      setCarregando(false);
    }
  };

  return (
    <div onClick={onClose} style={{
      position:'fixed', inset: 0, zIndex: 100,
      background:'rgba(58,46,42,0.55)',
      display:'flex', alignItems:'center', justifyContent:'center',
      padding:'var(--s-4)',
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        background:'var(--bg)', borderRadius:'var(--r-lg)',
        maxWidth: 640, width:'100%', maxHeight:'85vh',
        display:'flex', flexDirection:'column',
        padding:'var(--s-5)', gap:'var(--s-3)',
        boxShadow:'var(--shadow-lg)',
      }}>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline'}}>
          <div>
            <div className="eyebrow" style={{fontSize: 10}}>🗨 Configurar via chat · {hospital.abrev}</div>
            <h3 className="h3" style={{margin: 0, fontSize: 18}}>Conta como é a escala</h3>
          </div>
          <button type="button" onClick={onClose}
            style={{border:'none', background:'transparent', fontSize: 18, cursor:'pointer', color:'var(--ink-3)'}}>×</button>
        </div>

        {mensagens.length === 0 && (
          <div style={{
            padding: 'var(--s-3) var(--s-4)',
            background: 'var(--colo-blue-50, #EAF2F9)',
            border: '1px solid var(--colo-blue-tag, #3F6E9C)33',
            borderRadius: 'var(--r-md)', fontSize: 12,
          }}>
            <strong>Exemplos:</strong>
            <ul style={{margin: '4px 0 0', paddingLeft: 18}}>
              <li>"Faço 4 plantões no HCB com 1 fim-de-semana obrigatório"</li>
              <li>"Máximo 36 horas semanais, intervalo mínimo de 12h"</li>
              <li>"Não pego segunda nem terça. Só turnos de manhã e tarde."</li>
            </ul>
          </div>
        )}

        {/* Histórico */}
        <div style={{
          flex: 1, overflowY: 'auto', minHeight: 200, maxHeight: 400,
          display:'grid', gap: 8, padding: '4px 0',
        }}>
          {mensagens.map((m, i) => (
            <div key={i} style={{
              alignSelf: m.role === 'user' ? 'flex-end' : 'flex-start',
              maxWidth: '85%',
              padding: '8px 12px',
              background: m.role === 'user' ? 'var(--ink)' : 'var(--bg-alt)',
              color: m.role === 'user' ? 'var(--bg)' : 'var(--ink)',
              borderRadius: 'var(--r-md)',
              fontSize: 13, lineHeight: 1.4,
            }}>
              {m.content}
              {m.perguntas?.length > 0 && (
                <ul style={{margin: '8px 0 0', paddingLeft: 18, fontSize: 12}}>
                  {m.perguntas.map((p, j) => <li key={j}>{p}</li>)}
                </ul>
              )}
              {m.resumo?.length > 0 && (
                <div style={{marginTop: 8, fontSize: 11, opacity: 0.85}}>
                  <strong>Mudanças:</strong>
                  <ul style={{margin: '2px 0 0', paddingLeft: 18}}>
                    {m.resumo.map((r, j) => <li key={j}>{r}</li>)}
                  </ul>
                </div>
              )}
            </div>
          ))}
          {carregando && (
            <div style={{
              alignSelf: 'flex-start', padding: '8px 12px',
              background: 'var(--bg-alt)', borderRadius: 'var(--r-md)',
              fontSize: 12, color: 'var(--ink-3)', fontStyle:'italic',
            }}>pensando...</div>
          )}
        </div>

        {erro && (
          <div style={{
            padding: '6px 10px', fontSize: 12,
            background: 'var(--err-bg, #FBE9E5)', color:'var(--err, #B25A4D)',
            borderRadius: 'var(--r-md)',
          }}>{erro}</div>
        )}

        {/* Preview da proposta + botão Aplicar */}
        {propostaAtual && (
          <div style={{
            padding: 'var(--s-3) var(--s-4)',
            background: familia?.corWash || 'var(--colo-sage-wash, #ECF6E7)',
            border: `1px solid ${familia?.corDeep || 'var(--ok, #5A6E50)'}55`,
            borderRadius: 'var(--r-md)', fontSize: 12,
            display:'grid', gap: 4,
          }}>
            <strong>Regras estruturadas:</strong>
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 4, fontSize: 11}}>
              {propostaAtual.plantoesMin != null && <span>Plantões: {propostaAtual.plantoesMin}–{propostaAtual.plantoesMax}</span>}
              {propostaAtual.fdsMin != null && <span>FDS: {propostaAtual.fdsMin}–{propostaAtual.fdsMax}</span>}
              {propostaAtual.horasMin != null && <span>Horas: {propostaAtual.horasMin}–{propostaAtual.horasMax}h</span>}
              {propostaAtual.intervaloMinH != null && <span>Descanso mín: {propostaAtual.intervaloMinH}h</span>}
              {propostaAtual.turnosPermitidos?.length > 0 && (
                <span>Turnos: {propostaAtual.turnosPermitidos.join(', ')}</span>
              )}
              {propostaAtual.diasIndisponiveis?.length > 0 && (
                <span>Não pega: {propostaAtual.diasIndisponiveis.map(i => ['Seg','Ter','Qua','Qui','Sex','Sáb','Dom'][i]).join(', ')}</span>
              )}
            </div>
          </div>
        )}

        {/* Input */}
        <div style={{display:'flex', gap: 8, alignItems:'flex-end'}}>
          <textarea
            value={input}
            onChange={e => setInput(e.target.value)}
            onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); enviar(); } }}
            placeholder="Conta as regras em palavras suas..."
            rows={2}
            disabled={carregando}
            className="input"
            style={{flex: 1, resize:'vertical', fontFamily:'inherit', fontSize: 13}}/>
          <button type="button" onClick={enviar} disabled={carregando || !input.trim()}
            style={{
              padding: '10px 16px', fontSize: 13, fontWeight: 700,
              border: 'none', cursor: carregando ? 'not-allowed' : 'pointer',
              background: input.trim() && !carregando ? 'var(--ink)' : 'var(--bg-alt)',
              color: input.trim() && !carregando ? 'var(--bg)' : 'var(--ink-3)',
              borderRadius: 'var(--r-pill)',
            }}>Enviar</button>
        </div>

        {propostaAtual && (
          <button type="button"
            onClick={() => onAplicar({ ativo: true, ...regraAtual, ...propostaAtual })}
            style={{
              padding: '10px 16px', fontSize: 13, fontWeight: 700,
              border: 'none', cursor:'pointer',
              background: 'var(--colo-sage, #5A6E50)', color: 'var(--bg)',
              borderRadius: 'var(--r-pill)',
            }}>
            ✓ Aplicar regras estruturadas
          </button>
        )}
      </div>
    </div>
  );
}

// =====================================================================
// EditorRemuneracao — calculadora de plantão por hospital
// =====================================================================
function EditorRemuneracao({ remuneracao, familia, tipo, onChange }) {
  const ativo = !!remuneracao?.ativo;
  const isPublico = tipo === 'publico';

  const ativar = () => onChange(window.remuneracaoPadrao(tipo || 'particular'));
  const desligar = () => onChange({ ...(remuneracao || {}), ativo: false });
  const set = (k, v) => onChange({ ...(remuneracao || {}), [k]: v });
  const setSub = (sub, k, v) => onChange({
    ...(remuneracao || {}),
    [sub]: { ...((remuneracao || {})[sub] || {}), [k]: v },
  });

  const DIAS = ['Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom'];
  const toggleDiaFDS = (i) => {
    const arr = remuneracao?.adicionalFDS?.diasSemana || [];
    setSub('adicionalFDS', 'diasSemana',
      arr.includes(i) ? arr.filter(x => x !== i) : [...arr, i].sort((a,b)=>a-b));
  };

  const adicionarFeriado = (iso) => {
    if (!iso) return;
    const arr = remuneracao?.adicionalFeriado?.datas || [];
    if (arr.includes(iso)) return;
    setSub('adicionalFeriado', 'datas', [...arr, iso].sort());
  };
  const removerFeriado = (iso) => {
    setSub('adicionalFeriado', 'datas',
      (remuneracao?.adicionalFeriado?.datas || []).filter(d => d !== iso));
  };
  const [novoFeriado, setNovoFeriado] = useStateHosp('');

  return (
    <div style={{
      padding: 'var(--s-3) var(--s-4)',
      background: ativo ? `${familia?.corWash || 'var(--bg-alt)'}` : 'var(--bg-alt)',
      borderRadius: 'var(--r-md)',
      border: ativo ? `1px solid ${familia?.corDeep || 'var(--line)'}33` : '1px solid var(--line)',
    }}>
      <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', gap:'var(--s-3)'}}>
        <div>
          <div className="eyebrow" style={{marginBottom: 4, fontSize: 10}}>Calculadora de plantão</div>
          <p className="small" style={{fontSize: 11, margin: 0, maxWidth: 460}}>
            Valor por hora + adicionais (noturno, FDS, feriado). App calcula bruto e líquido
            de cada plantão e total mensal.
          </p>
        </div>
        <button type="button" onClick={ativo ? desligar : ativar}
          className="btn"
          style={{
            background: ativo ? (familia?.corDeep || 'var(--ink)') : 'var(--bg)',
            color: ativo ? 'var(--bg)' : 'var(--ink)',
            border: ativo ? 'none' : '1px solid var(--line)',
            padding: '6px 14px', fontSize: 12,
            whiteSpace: 'nowrap',
          }}>
          {ativo ? 'Desligar' : 'Ligar calculadora'}
        </button>
      </div>

      {ativo && (
        <div style={{display:'grid', gap:'var(--s-3)', marginTop:'var(--s-3)'}}>
          {/* Indicador de tipo */}
          <div style={{
            padding:'4px 10px', fontSize: 10, fontWeight: 700,
            background:'var(--bg)', color:'var(--ink-2)',
            border:'1px solid var(--line)',
            borderRadius:'var(--r-pill)',
            alignSelf:'flex-start', textTransform:'uppercase', letterSpacing: '0.04em',
          }}>
            Modelo: {isPublico ? 'Hospital público (valor fixo mensal + R$ noturno)' : 'Hospital particular (% por hora + adicionais)'}
          </div>

          {/* Modelo PÚBLICO: valor fixo + adicional noturno em R$ */}
          {isPublico ? (
            <>
              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:'var(--s-3)'}} className="form-2col">
                <Field label="Valor fixo mensal (R$)" sub="independente de quantos plantões">
                  <input type="number" className="input" min="0" step="100"
                    value={remuneracao.valorFixoMensal ?? ''}
                    onChange={e => set('valorFixoMensal', parseFloat(e.target.value) || 0)}
                    placeholder="8000"/>
                </Field>
                <Field label="Desconto retido (%)" sub="INSS, ISS — sobre o total">
                  <input type="number" className="input" min="0" max="100" step="0.5"
                    value={remuneracao.descontoPct ?? 0}
                    onChange={e => set('descontoPct', parseFloat(e.target.value) || 0)}/>
                </Field>
              </div>

              <ToggleRow
                ativo={remuneracao.adicionalNoturno?.ativo}
                onToggle={() => setSub('adicionalNoturno', 'ativo', !remuneracao.adicionalNoturno?.ativo)}
                label="Adicional noturno (R$/hora)"
                cor={familia?.corDeep}>
                <div style={{display:'flex', gap: 8, alignItems:'center', flexWrap:'wrap'}}>
                  <span className="small" style={{fontSize: 11}}>De</span>
                  <input type="number" min="0" max="23"
                    value={remuneracao.adicionalNoturno?.desde ?? 22}
                    onChange={e => setSub('adicionalNoturno', 'desde', parseInt(e.target.value) || 0)}
                    style={inputMini}/>
                  <span className="small" style={{fontSize: 11}}>h até</span>
                  <input type="number" min="0" max="23"
                    value={remuneracao.adicionalNoturno?.ate ?? 5}
                    onChange={e => setSub('adicionalNoturno', 'ate', parseInt(e.target.value) || 0)}
                    style={inputMini}/>
                  <span className="small" style={{fontSize: 11}}>h · R$</span>
                  <input type="number" min="0" max="500" step="1"
                    value={remuneracao.adicionalNoturnoRS ?? 30}
                    onChange={e => set('adicionalNoturnoRS', parseFloat(e.target.value) || 0)}
                    style={{...inputMini, width: 80}}/>
                  <span className="small" style={{fontSize: 11}}>por hora noturna (em cima do fixo)</span>
                </div>
              </ToggleRow>
            </>
          ) : (
            <>
              {/* Modelo PARTICULAR: hora base × adicionais % */}
              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:'var(--s-3)'}} className="form-2col">
                <Field label="Valor / hora base (R$)" sub="diurno, dia útil, sem adicional">
                  <input type="number" className="input" min="0" step="0.01"
                    value={remuneracao.valorHoraBase ?? ''}
                    onChange={e => set('valorHoraBase', parseFloat(e.target.value) || 0)}
                    placeholder="100.00"/>
                </Field>
                <Field label="Desconto retido (%)" sub="INSS, ISS — opcional">
                  <input type="number" className="input" min="0" max="100" step="0.5"
                    value={remuneracao.descontoPct ?? 0}
                    onChange={e => set('descontoPct', parseFloat(e.target.value) || 0)}/>
                </Field>
              </div>

              <ToggleRow
                ativo={remuneracao.adicionalNoturno?.ativo}
                onToggle={() => setSub('adicionalNoturno', 'ativo', !remuneracao.adicionalNoturno?.ativo)}
                label="Adicional noturno"
                cor={familia?.corDeep}>
                <div style={{display:'flex', gap: 8, alignItems:'center', flexWrap:'wrap'}}>
                  <span className="small" style={{fontSize: 11}}>De</span>
                  <input type="number" min="0" max="23"
                    value={remuneracao.adicionalNoturno?.desde ?? 22}
                    onChange={e => setSub('adicionalNoturno', 'desde', parseInt(e.target.value) || 0)}
                    style={inputMini}/>
                  <span className="small" style={{fontSize: 11}}>h até</span>
                  <input type="number" min="0" max="23"
                    value={remuneracao.adicionalNoturno?.ate ?? 5}
                    onChange={e => setSub('adicionalNoturno', 'ate', parseInt(e.target.value) || 0)}
                    style={inputMini}/>
                  <span className="small" style={{fontSize: 11}}>h ·</span>
                  <input type="number" min="0" max="500" step="5"
                    value={remuneracao.adicionalNoturno?.pct ?? 20}
                    onChange={e => setSub('adicionalNoturno', 'pct', parseFloat(e.target.value) || 0)}
                    style={inputMini}/>
                  <span className="small" style={{fontSize: 11}}>% a mais</span>
                </div>
              </ToggleRow>
            </>
          )}

          {/* FDS — só em particular (em público é raro ter adicional FDS) */}
          {!isPublico && (
          <ToggleRow
            ativo={remuneracao.adicionalFDS?.ativo}
            onToggle={() => setSub('adicionalFDS', 'ativo', !remuneracao.adicionalFDS?.ativo)}
            label="Adicional fim-de-semana"
            cor={familia?.corDeep}>
            <div style={{display:'flex', gap: 8, alignItems:'center', flexWrap:'wrap'}}>
              <div style={{display:'flex', gap: 4}}>
                {DIAS.map((d, i) => {
                  const sel = (remuneracao.adicionalFDS?.diasSemana || []).includes(i);
                  return (
                    <button key={i} type="button" onClick={() => toggleDiaFDS(i)}
                      style={{
                        width: 36, padding: '4px 0', fontSize: 11, fontWeight: 600,
                        border: `1px solid ${sel ? (familia?.corDeep || 'var(--ink)') : 'var(--line)'}`,
                        background: sel ? (familia?.cor || 'var(--ink)') : 'var(--bg)',
                        color: sel ? (familia?.corDeep || 'var(--bg)') : 'var(--ink-2)',
                        borderRadius: 'var(--r-sm)', cursor: 'pointer',
                      }}>
                      {d}
                    </button>
                  );
                })}
              </div>
              <span className="small" style={{fontSize: 11}}>·</span>
              <input type="number" min="0" max="500" step="5"
                value={remuneracao.adicionalFDS?.pct ?? 50}
                onChange={e => setSub('adicionalFDS', 'pct', parseFloat(e.target.value) || 0)}
                style={inputMini}/>
              <span className="small" style={{fontSize: 11}}>% a mais</span>
            </div>
          </ToggleRow>
          )}

          {/* Feriado — também só em particular */}
          {!isPublico && (
          <ToggleRow
            ativo={remuneracao.adicionalFeriado?.ativo}
            onToggle={() => setSub('adicionalFeriado', 'ativo', !remuneracao.adicionalFeriado?.ativo)}
            label="Adicional feriado"
            cor={familia?.corDeep}>
            <div style={{display:'grid', gap: 6}}>
              <div style={{display:'flex', gap: 8, alignItems:'center', flexWrap:'wrap'}}>
                <input type="number" min="0" max="500" step="5"
                  value={remuneracao.adicionalFeriado?.pct ?? 100}
                  onChange={e => setSub('adicionalFeriado', 'pct', parseFloat(e.target.value) || 0)}
                  style={inputMini}/>
                <span className="small" style={{fontSize: 11}}>% a mais nos dias:</span>
              </div>
              <div style={{display:'flex', gap: 6, alignItems:'center', flexWrap:'wrap'}}>
                <input type="date" className="input"
                  value={novoFeriado}
                  onChange={e => setNovoFeriado(e.target.value)}
                  style={{width: 160, padding: '4px 8px', fontSize: 11}}/>
                <button type="button"
                  onClick={() => { adicionarFeriado(novoFeriado); setNovoFeriado(''); }}
                  disabled={!novoFeriado}
                  style={{
                    padding: '4px 12px', fontSize: 11, fontWeight: 600,
                    border: '1px solid var(--line)', background: 'var(--bg)',
                    borderRadius: 'var(--r-pill)', cursor: novoFeriado ? 'pointer' : 'not-allowed',
                  }}>+ Adicionar</button>
                {(remuneracao.adicionalFeriado?.datas || []).map(d => (
                  <span key={d} style={{
                    padding: '3px 8px 3px 10px',
                    background: 'var(--err-bg, #FBE9E5)', color:'var(--err, #B25A4D)',
                    borderRadius: 'var(--r-pill)', fontSize: 11, fontWeight: 600,
                    display:'inline-flex', alignItems:'center', gap: 4,
                  }}>
                    {window.fmtDataCurto(d)}
                    <button type="button" onClick={() => removerFeriado(d)}
                      style={{border:'none', background:'none', cursor:'pointer', color:'inherit', fontSize: 12, padding: 0}}>×</button>
                  </span>
                ))}
              </div>
            </div>
          </ToggleRow>
          )}

          {/* Observação */}
          <Field label="Observação" sub="Notas livres pra você se lembrar das regras">
            <textarea className="input" rows={2}
              value={remuneracao.observacao || ''}
              onChange={e => set('observacao', e.target.value)}
              placeholder="Ex: Plantão noturno só conta após meia-noite, não 22h. Feriado municipal +50%."
              style={{resize:'vertical', fontFamily:'inherit', fontSize: 12}}/>
          </Field>

          {/* Preview de exemplo */}
          <ExemploCalculo remuneracao={remuneracao} familia={familia}/>
        </div>
      )}
    </div>
  );
}

const inputMini = {
  width: 56, padding: '4px 8px',
  border: '1px solid var(--line)', borderRadius: 'var(--r-sm)',
  fontFamily: 'var(--font-body)', fontSize: 12,
};

function ToggleRow({ ativo, onToggle, label, cor, children }) {
  return (
    <div style={{
      padding: '8px 10px',
      background: ativo ? 'var(--bg)' : 'transparent',
      borderRadius: 'var(--r-sm)',
      border: ativo ? '1px solid var(--line)' : '1px solid transparent',
    }}>
      <label style={{display:'flex', alignItems:'center', gap: 8, cursor:'pointer', marginBottom: ativo ? 6 : 0}}>
        <input type="checkbox" checked={!!ativo} onChange={onToggle}
          style={{accentColor: cor || 'var(--ink)'}}/>
        <span style={{fontWeight: 600, fontSize: 12, color: ativo ? 'var(--ink)' : 'var(--ink-3)'}}>
          {label}
        </span>
      </label>
      {ativo && <div style={{paddingLeft: 24}}>{children}</div>}
    </div>
  );
}

// Mostra exemplo: plantão de 12h sábado às 19h, com base + adicionais aplicados.
function ExemploCalculo({ remuneracao, familia }) {
  if (!remuneracao?.valorHoraBase) return null;
  // Plantão exemplo: sábado 19h por 12h (atravessa meia-noite pra domingo 7h).
  // Pega o próximo sábado a partir de hoje.
  const hoje = window.HOJE_ISO;
  let sabISO = hoje;
  for (let i = 0; i < 7; i++) {
    if (window.diaSemanaBR(sabISO) === 5) break;
    sabISO = window.addDias(sabISO, 1);
  }
  const blocoExemplo = { tipo: 'plantao', data: sabISO, horaInicio: 19, duracao: 12 };
  const hospitalFake = { remuneracao };
  const r = window.calcRemuneracao(blocoExemplo, hospitalFake);
  return (
    <div style={{
      padding: '10px 12px', fontSize: 11,
      background: 'var(--bg-alt)', borderRadius: 'var(--r-sm)',
      border: '1px dashed var(--line)',
    }}>
      <div style={{fontWeight: 700, marginBottom: 4, color: familia?.corDeep || 'var(--ink)'}}>
        Exemplo: plantão de 12h iniciando sábado às 19h
      </div>
      <div style={{display:'grid', gap: 2}}>
        {r.breakdown.map((b, i) => (
          <div key={i} style={{display:'flex', justifyContent:'space-between'}}>
            <span>
              {b.horas}h {b.tipo === 'base' ? 'base' : `+ ${b.tipo} (+${b.pctAdic}%)`}
            </span>
            <span style={{fontFamily:'ui-monospace, monospace'}}>{window.fmtBRL(b.valor)}</span>
          </div>
        ))}
        <div style={{
          display:'flex', justifyContent:'space-between',
          marginTop: 4, paddingTop: 4, borderTop: '1px solid var(--line)',
          fontWeight: 700, color: familia?.corDeep || 'var(--ink)',
        }}>
          <span>Bruto</span>
          <span style={{fontFamily:'ui-monospace, monospace'}}>{window.fmtBRL(r.bruto)}</span>
        </div>
        {r.descontoPct > 0 && (
          <>
            <div style={{display:'flex', justifyContent:'space-between', color:'var(--err, #B25A4D)'}}>
              <span>− desconto {r.descontoPct}%</span>
              <span style={{fontFamily:'ui-monospace, monospace'}}>−{window.fmtBRL(r.descontoValor)}</span>
            </div>
            <div style={{
              display:'flex', justifyContent:'space-between',
              fontWeight: 700, color: 'var(--ok, #5A6E50)',
            }}>
              <span>Líquido</span>
              <span style={{fontFamily:'ui-monospace, monospace'}}>{window.fmtBRL(r.liquido)}</span>
            </div>
          </>
        )}
      </div>
    </div>
  );
}

function RangeMinMax({ label, min, max, onMin, onMax, hint }) {
  return (
    <div>
      <div className="eyebrow" style={{fontSize: 10, marginBottom: 4}}>{label}</div>
      <div style={{display:'flex', gap: 4, alignItems:'center'}}>
        <input type="number" min="0" value={min ?? ''}
          onChange={e => onMin(parseInt(e.target.value) || 0)}
          style={{width: 60, padding: '4px 8px', border:'1px solid var(--line)', borderRadius:'var(--r-sm)', fontSize:12}}/>
        <span className="small" style={{fontSize: 11, color:'var(--ink-3)'}}>–</span>
        <input type="number" min="0" value={max ?? ''}
          onChange={e => onMax(parseInt(e.target.value) || 0)}
          style={{width: 60, padding: '4px 8px', border:'1px solid var(--line)', borderRadius:'var(--r-sm)', fontSize:12}}/>
        {hint && <span className="small" style={{fontSize: 10, marginLeft: 4, color:'var(--ink-3)'}}>{hint}</span>}
      </div>
    </div>
  );
}

// =====================================================================
// EditorTurnos — define horários padrão por turno (Manhã/Tarde/Noitinha/Noite)
// Usado no cadastro do hospital. Importadores e agentes consultam isso pra
// traduzir "Mariana — Tarde" em "13h por 6h" sem chutar.
// =====================================================================
function EditorTurnos({ turnos, onChange }) {
  const padroes = {
    manha:    { inicio: 7,  duracao: 6 },
    tarde:    { inicio: 13, duracao: 6 },
    noitinha: { inicio: 19, duracao: 5 },
    noite:    { inicio: 19, duracao: 12 },
  };

  const toggle = (k) => {
    const novo = {...turnos};
    if (novo[k]) delete novo[k];
    else novo[k] = padroes[k];
    onChange(novo);
  };

  const ajustar = (k, campo, valor) => {
    if (!turnos[k]) return;
    onChange({...turnos, [k]: {...turnos[k], [campo]: parseFloat(valor) || 0}});
  };

  return (
    <div style={{
      padding: 'var(--s-3) var(--s-4)', background: 'var(--bg-alt)',
      borderRadius: 'var(--r-md)', border: '1px solid var(--line)',
    }}>
      <div className="eyebrow" style={{marginBottom: 4, fontSize: 10}}>Turnos padrão deste hospital</div>
      <p className="small" style={{fontSize: 11, marginTop: 0, marginBottom: 'var(--s-3)'}}>
        Quando o app (ou um agente de IA) importar uma escala que diz só "Tarde",
        usa esses horários pra resolver. Marque só os turnos que este hospital tem.
      </p>
      <div style={{display:'grid', gap: 6}}>
        {[
          {k: 'manha', l: 'Manhã'},
          {k: 'tarde', l: 'Tarde'},
          {k: 'noitinha', l: 'Noitinha'},
          {k: 'noite', l: 'Noite'},
        ].map(t => {
          const ativo = !!turnos[t.k];
          return (
            <div key={t.k} style={{
              display: 'grid',
              gridTemplateColumns: '24px 80px 1fr 1fr',
              gap: 'var(--s-2)', alignItems: 'center',
            }}>
              <input type="checkbox" checked={ativo} onChange={() => toggle(t.k)}
                style={{accentColor: 'var(--ink)', width: 16, height: 16}}/>
              <span style={{fontSize: 13, fontWeight: 600, color: ativo ? 'var(--ink)' : 'var(--ink-3)'}}>
                {t.l}
              </span>
              <div style={{display:'flex', gap: 4, alignItems:'center'}}>
                <span className="small" style={{fontSize: 10}}>início</span>
                <input type="number" min="0" max="23" disabled={!ativo}
                  value={ativo ? turnos[t.k].inicio : ''}
                  onChange={e => ajustar(t.k, 'inicio', e.target.value)}
                  style={{
                    width: 56, padding: '4px 8px',
                    border: '1px solid var(--line)', borderRadius: 'var(--r-sm)',
                    fontFamily: 'var(--font-body)', fontSize: 12,
                    background: ativo ? 'var(--bg)' : 'var(--bg-alt)',
                  }}/>
                <span className="small" style={{fontSize: 10}}>h</span>
              </div>
              <div style={{display:'flex', gap: 4, alignItems:'center'}}>
                <span className="small" style={{fontSize: 10}}>dur.</span>
                <input type="number" min="1" max="24" disabled={!ativo}
                  value={ativo ? turnos[t.k].duracao : ''}
                  onChange={e => ajustar(t.k, 'duracao', e.target.value)}
                  style={{
                    width: 56, padding: '4px 8px',
                    border: '1px solid var(--line)', borderRadius: 'var(--r-sm)',
                    fontFamily: 'var(--font-body)', fontSize: 12,
                    background: ativo ? 'var(--bg)' : 'var(--bg-alt)',
                  }}/>
                <span className="small" style={{fontSize: 10}}>h</span>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// Mostra turnos cadastrados como linha compacta no card do hospital
function TurnosResumo({ turnos }) {
  if (!turnos || Object.keys(turnos).length === 0) return null;
  const labels = { manha: 'M', tarde: 'T', noitinha: 'N+', noite: 'N' };
  return (
    <div>
      <div className="eyebrow" style={{fontSize: 9}}>Turnos</div>
      <div style={{display:'flex', flexWrap:'wrap', gap: 4, marginTop: 4}}>
        {Object.entries(turnos).map(([k, t]) => (
          <span key={k} title={`${k}: ${t.inicio}h por ${t.duracao}h`}
            style={{
              padding: '2px 8px', borderRadius: 'var(--r-pill)',
              background: 'var(--bg-alt)', border: '1px solid var(--line)',
              fontSize: 11, fontWeight: 600, color: 'var(--ink-2)',
              fontFamily: 'var(--font-body)',
            }}>
            {labels[k] || k} · {t.inicio}h ({t.duracao}h)
          </span>
        ))}
      </div>
    </div>
  );
}

// =====================================================================
// CasaCard — ponto de origem dos deslocamentos. Funciona como hospital,
// mas com identidade visual sage (descanso) e edição de CEP/coords.
// =====================================================================
function CasaCard({ casa, hospitais, editando, onEditar, onCancelar, onSalvar }) {
  if (editando) {
    return <CasaForm inicial={casa} onCancelar={onCancelar} onSalvar={onSalvar}/>;
  }

  // Lista de hospitais com tempo médio (multiplicador 1.0 = horário normal)
  const tempos = (hospitais || []).map(h => ({
    h,
    min: window.tempoCasaHospitalMin
      ? window.tempoCasaHospitalMin(h, 12, window.HOJE_ISO)
      : h.deslocCasa,
  })).filter(t => t.min != null);

  return (
    <article style={{
      background: 'var(--colo-sage-50)',
      borderRadius: 'var(--r-lg)',
      boxShadow: 'var(--shadow-sm)',
      border: '1px solid var(--line)',
      borderTop: '6px solid #A4D498',
      padding: 'var(--s-5)',
      display: 'flex', flexDirection: 'column', gap: 'var(--s-3)',
    }}>
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start', gap:'var(--s-3)'}}>
        <div>
          <div style={{
            fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 700,
            color: '#5A6E50', letterSpacing: '0.06em',
            textTransform: 'uppercase',
            display: 'flex', alignItems: 'center', gap: 6,
          }}>
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
            casa
          </div>
          <h3 style={{
            fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500,
            color: 'var(--ink)', margin: 0, marginTop: 4,
            letterSpacing: '-0.01em',
          }}>Origem dos deslocamentos</h3>
        </div>
      </div>

      {casa.endereco && <Linha label="Endereço" value={casa.endereco}/>}
      {casa.cep && <Linha label="CEP" value={casa.cep} mono/>}
      {(casa.lat != null && casa.lng != null) && (
        <Linha label="Coordenadas" value={`${casa.lat.toFixed(4)}, ${casa.lng.toFixed(4)}`} mono/>
      )}

      {tempos.length > 0 && (
        <div>
          <div className="eyebrow" style={{fontSize: 9, marginBottom: 4}}>Tempo até cada hospital (estimado, horário normal)</div>
          <div style={{display:'flex', flexWrap:'wrap', gap: 4}}>
            {tempos.map(t => (
              <span key={t.h.id} title={`${t.h.nome}`} style={{
                padding: '4px 10px', borderRadius: 'var(--r-pill)',
                background: 'var(--bg)', border: '1px solid var(--line)',
                fontSize: 11, fontWeight: 600,
                color: t.h.corDeep,
                fontFamily: 'var(--font-body)',
                display: 'inline-flex', alignItems: 'center', gap: 4,
              }}>
                <span style={{width:8, height:8, borderRadius:999, background: t.h.cor, display:'inline-block'}}/>
                {t.h.abrev} · {t.min} min
              </span>
            ))}
          </div>
        </div>
      )}

      <div style={{display:'flex', gap: 8, marginTop: 'var(--s-3)'}}>
        <button type="button" className="btn btn--ghost" onClick={onEditar}
          style={{flex:1, justifyContent:'center'}}>
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
          Editar
        </button>
      </div>

      <p className="small" style={{
        fontSize: 11, color: 'var(--ink-3)', fontStyle: 'italic',
        marginTop: 4, marginBottom: 0,
      }}>
        Para ajustar o tempo até cada hospital, edite o campo "Tempo de casa" no cartão do próprio hospital.
      </p>
    </article>
  );
}

function CasaForm({ inicial, onCancelar, onSalvar }) {
  const [form, setForm] = useStateHosp(() => ({
    cep: inicial?.cep || '',
    endereco: inicial?.endereco || '',
    lat: inicial?.lat ?? '',
    lng: inicial?.lng ?? '',
  }));
  const set = (k, v) => setForm(prev => ({...prev, [k]: v}));

  const submit = () => {
    if (!form.endereco.trim()) return;
    onSalvar({
      cep: form.cep.trim(),
      endereco: form.endereco.trim(),
      lat: parseFloat(form.lat) || null,
      lng: parseFloat(form.lng) || null,
    });
  };

  return (
    <div style={{
      background: 'var(--bg)',
      borderRadius: 'var(--r-lg)',
      boxShadow: 'var(--shadow-md)',
      border: '2px solid #A4D498',
      padding: 'var(--s-5)',
      display: 'grid', gap: 'var(--s-3)',
    }}>
      <div className="eyebrow">Editar casa</div>

      <Field label="CEP">
        <input className="input" value={form.cep}
          onChange={e => set('cep', e.target.value)}
          placeholder="70684-245"
          inputMode="numeric"/>
      </Field>

      <Field label="Endereço descritivo">
        <input className="input" value={form.endereco}
          onChange={e => set('endereco', e.target.value)}
          placeholder="SQNW 306 Bloco I · Asa Noroeste"
          autoFocus/>
      </Field>

      <Field label="Coordenadas (avançado)" sub="Use lat,lng do Google Maps. Afeta cálculo de deslocamento entre hospitais.">
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 'var(--s-2)'}}>
          <input className="input" type="number" step="0.0001" value={form.lat}
            onChange={e => set('lat', e.target.value)}
            placeholder="-15.762"
            aria-label="Latitude"/>
          <input className="input" type="number" step="0.0001" value={form.lng}
            onChange={e => set('lng', e.target.value)}
            placeholder="-47.915"
            aria-label="Longitude"/>
        </div>
      </Field>

      <div style={{display:'flex', gap: 8, marginTop: 'var(--s-3)'}}>
        <button type="button" className="btn btn--ghost" onClick={onCancelar}
          style={{flex:1, justifyContent:'center'}}>Cancelar</button>
        <button type="button" className="btn"
          onClick={submit} disabled={!form.endereco.trim()}
          style={{flex:1, justifyContent:'center', background:'var(--ink)', color:'var(--bg)',
            opacity: form.endereco.trim() ? 1 : 0.5}}>
          Salvar
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { HospitaisView });