// ── InovaPED — Representante: Upload, Chat, Configurações ───────────────
const ICn = window.IC;

function RBack({ title, onBack, sub }) {
  const d = window.__repDesktop;
  return (
    <div style={{ padding: d ? '26px 32px 14px' : '54px 18px 12px', flexShrink: 0, display: 'flex', alignItems: 'center', gap: 12 }}>
      <button onClick={onBack} style={{ width: 36, height: 36, borderRadius: 11, border: `1px solid ${T.border}`, background: T.panel, cursor: 'pointer', display:'flex',alignItems:'center',justifyContent:'center', flexShrink: 0 }}><Icon name="chevron" size={18} color={T.text} style={{ transform: 'rotate(180deg)' }} /></button>
      <div><div style={{ fontSize: d ? 25 : 20, fontWeight: 800, fontFamily: 'var(--display)' }}>{title}</div>{sub && <div style={{ fontSize: 12, color: T.mute }}>{sub}</div>}</div>
    </div>
  );
}
const repWrap = () => ({ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', width: '100%', maxWidth: window.__repDesktop ? 820 : 'none', margin: '0 auto' });

// ── UPLOAD de tabela (XML / CSV) com leitura automática ─────────────────
function RepUpload({ me, onBack }) {
  const [parsed, setParsed] = useState(false);
  const [kind, setKind] = useState('xml');
  const preview = [
    { name: 'Whey Protein 900g', price: 81.90, lote: 'L2291', val: '08/2026' },
    { name: 'Creatina 300g',     price: 49.90, lote: 'L2288', val: '03/2027' },
    { name: 'BCAA 2:1:1',        price: 35.80, lote: 'L2290', val: '12/2026' },
  ];
  return (
    <div style={repWrap()}>
      <RBack title="Subir tabela" sub="Leitura automática de preços" onBack={onBack} />
      <div style={{ flex: 1, overflow: 'auto', padding: '6px 18px 24px' }}>
        <div style={{ display: 'flex', gap: 8, marginBottom: 14 }}>
          {[['xml', 'XML da nota'], ['csv', 'Planilha CSV']].map(([v, l]) => { const on = kind === v; return <button key={v} onClick={() => { setKind(v); setParsed(false); }} style={{ flex: 1, padding: '11px', borderRadius: 12, cursor: 'pointer', fontFamily: 'inherit', fontWeight: 700, fontSize: 13.5, border: `1.5px solid ${on ? T.red : T.border}`, color: on ? T.redBright : T.mute, background: on ? T.redBg : 'transparent' }}>{l}</button>; })}
        </div>
        {!parsed ? (
          <button onClick={() => setParsed(true)} style={{ width: '100%', padding: '40px 20px', borderRadius: 18, border: `1.5px dashed ${T.borderHi}`, background: T.panel, cursor: 'pointer', fontFamily: 'inherit', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 56, height: 56, borderRadius: 16, background: T.redBg, display:'flex',alignItems:'center',justifyContent:'center' }}><Icon name="box" size={28} color={T.redBright} /></div>
            <div style={{ fontWeight: 700, fontSize: 15, color: T.text }}>Toque para selecionar o {kind === 'xml' ? 'XML' : 'CSV'}</div>
            <div style={{ fontSize: 12.5, color: T.mute, textAlign: 'center', lineHeight: 1.4 }}>O InovaParser lê preço, lote e validade automaticamente <span style={{ color: T.mute2 }}>(OCR/parse no Claude Code)</span></div>
          </button>
        ) : (
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '11px 14px', borderRadius: 12, background: T.greenBg, border: '1px solid rgba(0,230,140,0.3)', marginBottom: 14 }}>
              <Icon name="check" size={18} color={T.green} strokeWidth={2.6} /><span style={{ fontSize: 13, color: T.green, fontWeight: 600 }}>{preview.length} itens extraídos com sucesso</span>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {preview.map((it, i) => (
                <div key={i} style={{ padding: 13, borderRadius: 13, background: T.panel, border: `1px solid ${T.border}` }}>
                  <div style={{ fontWeight: 700, fontSize: 13.5 }}>{it.name}</div>
                  <div style={{ display: 'flex', gap: 14, marginTop: 7, fontSize: 12 }}>
                    <span style={{ color: T.green, fontWeight: 700 }}>R$ {ICn.fmt(it.price)}</span>
                    <span style={{ color: T.mute }}>Lote {it.lote}</span>
                    <span style={{ color: /2026/.test(it.val) ? T.yellow : T.mute }}>Val. {it.val}</span>
                  </div>
                </div>
              ))}
            </div>
            <button onClick={onBack} style={{ width: '100%', marginTop: 16, padding: '14px', borderRadius: 14, border: 'none', cursor: 'pointer', fontFamily: 'inherit', fontWeight: 800, fontSize: 15, color: '#fff', background: `linear-gradient(135deg, ${T.redBright}, ${T.redDeep})`, display:'flex',alignItems:'center',justifyContent:'center',gap:8 }}><Icon name="check" size={17} color="#fff" strokeWidth={2.4} /> Confirmar e enviar preços</button>
          </div>
        )}
      </div>
    </div>
  );
}

// ── CHAT do rep com o comprador ─────────────────────────────────────────
const FELIPE_REPLIES = ['Boa! Vou analisar aqui.', 'Consegue melhorar o prazo de entrega?', 'Fechado, monto o pedido.', 'Show, obrigado!', 'Deixa eu ver com a equipe e te falo.'];
function RepChat({ me, onBack }) {
  const seed = (ICn.CHATS[me.id] || [{ from: 'buyer', text: 'Olá! Tudo bem?', time: '09:00' }]);
  const [msgs, setMsgs] = useState(seed);
  const [input, setInput] = useState('');
  const ref = useRef();
  useEffect(() => { if (ref.current) ref.current.scrollTop = ref.current.scrollHeight; }, [msgs]);
  const send = () => {
    const text = input.trim(); if (!text) return;
    const now = new Date().toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' });
    setMsgs(m => [...m, { from: 'rep', text, time: now }]); setInput('');
    setTimeout(() => setMsgs(m => [...m, { from: 'buyer', text: FELIPE_REPLIES[Math.floor(Math.random() * FELIPE_REPLIES.length)], time: now }]), 1200);
  };
  return (
    <div style={repWrap()}>
      <RBack title="Felipe Costa" sub="Comprador · Rede Inova" onBack={onBack} />
      <div ref={ref} style={{ flex: 1, overflow: 'auto', padding: '12px 16px', display: 'flex', flexDirection: 'column', gap: 9 }}>
        {msgs.map((m, i) => { const mine = m.from === 'rep'; return (
          <div key={i} style={{ alignSelf: mine ? 'flex-end' : 'flex-start', maxWidth: '78%' }}>
            <div style={{ padding: '10px 13px', borderRadius: mine ? '14px 14px 4px 14px' : '14px 14px 14px 4px', background: mine ? `linear-gradient(135deg, ${T.redBright}, ${T.redDeep})` : T.panelHi, color: mine ? '#fff' : T.text, fontSize: 13.5, lineHeight: 1.4, border: mine ? 'none' : `1px solid ${T.border}` }}>{m.text}</div>
            <div style={{ fontSize: 10, color: T.mute2, marginTop: 3, textAlign: mine ? 'right' : 'left' }}>{m.time}</div>
          </div>
        ); })}
      </div>
      <div style={{ display: 'flex', gap: 9, padding: '12px 16px 26px', borderTop: `1px solid ${T.border}`, flexShrink: 0 }}>
        <input value={input} onChange={e => setInput(e.target.value)} onKeyDown={e => e.key === 'Enter' && send()} placeholder="Mensagem..." style={{ flex: 1, padding: '12px 14px', borderRadius: 12, border: `1px solid ${T.border}`, background: 'rgba(0,0,0,0.3)', color: T.text, fontFamily: 'inherit', fontSize: 14, outline: 'none' }} />
        <button onClick={send} style={{ width: 46, height: 46, borderRadius: 12, border: 'none', cursor: 'pointer', background: `linear-gradient(135deg, ${T.redBright}, ${T.redDeep})`, display:'flex',alignItems:'center',justifyContent:'center' }}><Icon name="send" size={19} color="#fff" /></button>
      </div>
    </div>
  );
}

// ── CONFIGURAÇÕES do rep ────────────────────────────────────────────────
function RTog({ on, onClick }) { return <button onClick={onClick} style={{ width: 44, height: 26, borderRadius: 99, border: 'none', cursor: 'pointer', padding: 3, background: on ? `linear-gradient(135deg, ${T.redBright}, ${T.redDeep})` : 'rgba(255,255,255,0.12)', display: 'flex', justifyContent: on ? 'flex-end' : 'flex-start' }}><span style={{ width: 20, height: 20, borderRadius: 99, background: '#fff' }} /></button>; }
function RepConfig({ me, onBack }) {
  const [s, setS] = useState({ auto: true, tg: true, email: false, prog: true, lanc: true, exclusivo: false, ferias: false, twofa: true, combos: true, st: false });
  const tg = (k) => setS(x => ({ ...x, [k]: !x[k] }));
  const [cats, setCats] = useState(me.cats);
  const [prazo, setPrazo] = useState('48h');
  const [markup, setMarkup] = useState(12);
  const [tax, setTax] = useState('sem');
  const [pedidoMin, setPedidoMin] = useState('500,00');
  const [raio, setRaio] = useState('Estado de SP');
  const [emp, setEmp] = useState({ razao: 'NutriMax Supplements LTDA', fantasia: 'NutriMax', cnpj: '12.345.678/0001-90', ie: '110.042.490.114' });
  const [cont, setCont] = useState({ resp: me.contact, tel: '(11) 98888-1234', email: 'rodrigo@nutrimax.com.br', horario: 'Seg–Sex, 8h–18h' });
  const tc = (id) => setCats(c => c.includes(id) ? c.filter(x => x !== id) : [...c, id]);
  const d = window.__repDesktop;
  const card = (icon, title, children) => <div style={{ padding: 16, borderRadius: 16, background: T.panel, border: `1px solid ${T.border}`, marginBottom: 12 }}><div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 10 }}><Icon name={icon} size={16} color={T.redBright} /><div style={{ fontWeight: 700, fontSize: 14 }}>{title}</div></div>{children}</div>;
  const row = (t, ctrl, last) => <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 0', borderBottom: last ? 'none' : `1px solid ${T.border}` }}><div style={{ flex: 1, fontSize: 13.5 }}>{t}</div>{ctrl}</div>;
  const fld = (label, value, onChange) => <div style={{ marginBottom: 10 }}><label style={{ display: 'block', fontSize: 11.5, color: T.mute, fontWeight: 600, marginBottom: 5 }}>{label}</label><input value={value} onChange={e => onChange(e.target.value)} style={{ width: '100%', boxSizing: 'border-box', padding: '11px 13px', borderRadius: 11, border: `1px solid ${T.border}`, background: 'rgba(0,0,0,0.22)', color: T.text, fontFamily: 'inherit', fontSize: 14, outline: 'none' }} /></div>;
  const seg = (val, set, opts) => <div style={{ display: 'flex', gap: 2, padding: 3, borderRadius: 9, background: T.panel, border: `1px solid ${T.border}` }}>{opts.map(o => { const on = val === o[0]; return <button key={o[0]} onClick={() => set(o[0])} style={{ padding: '6px 11px', borderRadius: 6, border: 'none', cursor: 'pointer', fontFamily: 'inherit', fontSize: 12, fontWeight: on ? 700 : 500, color: on ? '#fff' : T.mute, background: on ? T.red : 'transparent' }}>{o[1]}</button>; })}</div>;
  const numIn = (val, set, w = 56) => <input value={val} onChange={e => set(e.target.value)} style={{ width: w, textAlign: 'right', padding: '7px 10px', borderRadius: 8, border: `1px solid ${T.border}`, background: 'rgba(0,0,0,0.3)', color: T.text, fontFamily: 'inherit', fontWeight: 700, outline: 'none' }} />;
  return (
    <div style={repWrap()}>
      <RBack title="Configurações" sub={me.name} onBack={onBack} />
      <div style={{ flex: 1, overflow: 'auto', padding: d ? '6px 32px 28px' : '6px 18px 24px' }}>
        <div style={{ display: d ? 'grid' : 'block', gridTemplateColumns: d ? '1fr 1fr' : 'none', gap: d ? 14 : 0, alignItems: 'start' }}>
         <div>
          {card('user', 'Dados da empresa', <>
            {fld('Razão social', emp.razao, v => setEmp(e => ({ ...e, razao: v })))}
            {fld('Nome fantasia', emp.fantasia, v => setEmp(e => ({ ...e, fantasia: v })))}
            <div style={{ display: 'flex', gap: 10 }}><div style={{ flex: 1 }}>{fld('CNPJ', emp.cnpj, v => setEmp(e => ({ ...e, cnpj: v })))}</div><div style={{ flex: 1 }}>{fld('Inscr. Estadual', emp.ie, v => setEmp(e => ({ ...e, ie: v })))}</div></div>
          </>)}
          {card('send', 'Contato & atendimento', <>
            {fld('Responsável', cont.resp, v => setCont(c => ({ ...c, resp: v })))}
            {fld('Telefone / WhatsApp', cont.tel, v => setCont(c => ({ ...c, tel: v })))}
            {fld('E-mail', cont.email, v => setCont(c => ({ ...c, email: v })))}
            {fld('Horário de atendimento', cont.horario, v => setCont(c => ({ ...c, horario: v })))}
          </>)}
          {card('grid', 'Mix de produtos', <div style={{ display: 'flex', flexWrap: 'wrap', gap: 7 }}>
            {ICn.CATEGORIES.map(c => { const on = cats.includes(c.id); return <button key={c.id} onClick={() => tc(c.id)} style={{ padding: '8px 12px', borderRadius: 99, cursor: 'pointer', fontFamily: 'inherit', fontSize: 12.5, fontWeight: 600, border: `1px solid ${on ? T.red : T.border}`, color: on ? T.redBright : T.mute, background: on ? T.redBg : 'transparent' }}>{c.name}</button>; })}
          </div>)}
          {card('receipt', 'Política fiscal', <>
            {row('Preços declarados', seg(tax, setTax, [['sem','Sem imposto'],['com','Com imposto']]))}
            {row('ICMS/ST embutido no preço', <RTog on={s.st} onClick={() => tg('st')} />, true)}
          </>)}
         </div>
         <div>
          {card('tag', 'Perfil de ofertas', <>
            {row('Desconto progressivo por volume', <RTog on={s.prog} onClick={() => tg('prog')} />)}
            {row('Aceito montar combos', <RTog on={s.combos} onClick={() => tg('combos')} />)}
            {row('Markup mínimo aceito', <span style={{ display:'flex',alignItems:'center',gap:6 }}>{numIn(markup, v => setMarkup(Math.max(0, parseInt(String(v).replace(/\D/g,'')) || 0)), 50)}<span style={{ color: T.mute, fontWeight: 700 }}>%</span></span>)}
            {row('Pedido mínimo (R$)', numIn(pedidoMin, setPedidoMin, 90), true)}
          </>)}
          {card('clock', 'Logística & disponibilidade', <>
            {row('Prazo de entrega padrão', seg(prazo, setPrazo, [['24h','24h'],['48h','48h'],['72h','72h']]))}
            {row('Área de cobertura', <input value={raio} onChange={e => setRaio(e.target.value)} style={{ width: 150, padding: '7px 10px', borderRadius: 8, border: `1px solid ${T.border}`, background: 'rgba(0,0,0,0.3)', color: T.text, fontFamily: 'inherit', fontSize: 13, outline: 'none' }} />)}
            {row('Modo férias (pausar cotações)', <RTog on={s.ferias} onClick={() => tg('ferias')} />, true)}
          </>)}
          {card('bolt', 'Automação', <>
            {row('Resposta automática (baixo valor)', <RTog on={s.auto} onClick={() => tg('auto')} />)}
            {row('Avisos de novos lançamentos', <RTog on={s.lanc} onClick={() => tg('lanc')} />)}
            {row('Contrato de exclusividade (fila prioritária)', <RTog on={s.exclusivo} onClick={() => tg('exclusivo')} />, true)}
          </>)}
          {card('bell', 'Notificações', <>
            {row('Avisos no app', <RTog on={s.tg} onClick={() => tg('tg')} />)}
            {row('E-mail', <RTog on={s.email} onClick={() => tg('email')} />, true)}
          </>)}
          {card('shield', 'Conta & segurança', <>
            {row('Verificação em duas etapas', <RTog on={s.twofa} onClick={() => tg('twofa')} />)}
            {row('Alterar senha', <button style={{ padding: '8px 14px', borderRadius: 9, border: `1px solid ${T.border}`, background: 'transparent', color: T.text, fontFamily: 'inherit', fontSize: 12.5, fontWeight: 700, cursor: 'pointer' }}>Alterar</button>, true)}
          </>)}
         </div>
        </div>
        <button onClick={onBack} style={{ width: '100%', marginTop: 4, padding: '14px', borderRadius: 14, border: 'none', cursor: 'pointer', fontFamily: 'inherit', fontWeight: 800, fontSize: 15, color: '#fff', background: `linear-gradient(135deg, ${T.redBright}, ${T.redDeep})`, display:'flex',alignItems:'center',justifyContent:'center',gap:8 }}><Icon name="check" size={17} color="#fff" strokeWidth={2.4} /> Salvar configurações</button>
      </div>
    </div>
  );
}

window.RepPart5 = { RepUpload, RepChat, RepConfig };