/* Carga por Mate + Documentos con filtro · Pieza 3a
   El trabajo lo carga Mia cuando entra por WhatsApp. Cuando entra por otro
   lado —te lo pidieron en la calle, te llamaron— el formulario de tres campos
   era una segunda forma de cargar, con otras reglas y otros huecos: no valida
   contra los servicios, no pregunta dirección si vas a domicilio, no arranca
   la máquina de estados. Acá lo carga MATE, con las mismas preguntas que Mia
   le haría al cliente. Una sola puerta de entrada.                        */

const PREGS = [
  { k:'cli',   q:'¿Para quién es el trabajo?',        ph:'Nombre y apellido',      tipo:'texto' },
  { k:'svc',   q:'¿Qué le vas a hacer?',              ph:'Elegí de tu lista',      tipo:'servicio' },
  { k:'donde', q:'¿Dónde es?',                        ph:'Calle, altura y barrio', tipo:'lugar' },
  { k:'hora',  q:'¿Cuándo?',                          ph:'',                        tipo:'cuando' },
  { k:'monto', q:'¿Cuánto le cobrás?',                ph:'0',                       tipo:'monto' },
];

/* La lista depende del tipo y de la configuración, no es fija:
     · sin domicilio, no se pregunta dónde;
     · un PRESUPUESTO no tiene hora — por eso Agenda separa turnos de
       presupuestos—, así que preguntar "¿cuándo?" y después tirar la
       respuesta es hacerle perder un paso al tipo.                        */
/* El monto sólo se pregunta si el servicio NO está en la lista con precio.
   Mia cotiza con los precios cargados; preguntárselo al emprendedor cuando el
   dato ya está en la base es hacerle tipear algo que el sistema sabe.     */
const precioDe = (cfg, svc) => {
  const s = (cfg.servicios || []).find(x => x.n.trim() && x.n.trim().toLowerCase() === String(svc || '').trim().toLowerCase());
  return s ? s.p : null;
};
function pregsDe(cfg, tipo, form) {
  const conPrecio = form && precioDe(cfg, form.svc) != null;
  return PREGS.filter(p =>
    (p.k !== 'donde' || cfg.domicilio.on) &&
    (p.k !== 'hora'  || tipo !== 'Presupuesto') &&
    (p.k !== 'monto' || !conPrecio));
}
/* Primer paso sin contestar. Cuando el flujo viene precargado —relevamiento,
   "cargarle un trabajo" a un cliente— arranca en lo que falta, no en la 1. */
const primerPaso = (pregs, form) => {
  const i = pregs.findIndex(p => !String(form[p.k] || '').trim());
  return i === -1 ? pregs.length : i;
};

function MateCarga({ cfg, form, setForm, paso, responder, clientes, nuevoCli }) {
  const pregs = pregsDe(cfg, form.tipo, form);
  const yaTienePrecio = precioDe(cfg, form.svc) != null;
  const p = pregs[Math.min(paso, pregs.length - 1)];
  const fin = paso >= pregs.length;
  const [txt, setTxt] = React.useState('');
  React.useEffect(() => { setTxt(''); }, [paso]);
  const servicios = cfg.servicios.filter(s => s.n.trim());
  /* Paso 1: Mate busca en la agenda del emprendedor antes de dar de alta.
     Si el cliente ya existe, hereda su teléfono y su dirección — y las
     preguntas que siguen se acortan. Si no, lo da de alta como hace Mia. */
  const hits = txt.trim().length >= 2
    ? clientes.filter(c => c.n.toLowerCase().includes(txt.trim().toLowerCase()))
    : [];
  const yaEsta = clientes.find(c => c.n === form.cli);

  const burbuja = (quien, t) => (
    <div key={quien + t} style={{ display:'flex', justifyContent:quien === 'mate' ? 'flex-start' : 'flex-end' }}>
      <div style={{ maxWidth:'82%', padding:'10px 13px', borderRadius:quien === 'mate' ? '14px 14px 14px 4px' : '14px 14px 4px 14px', background:quien === 'mate' ? T.g900 : T.vSoft, border:`1px solid ${quien === 'mate' ? T.g800 : T.vBorder}`, fontFamily:T.sans, fontSize:14, lineHeight:1.45, color:quien === 'mate' ? T.c300 : T.c100 }}>{t}</div>
    </div>
  );

  return (
    <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
      <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
        {burbuja('mate', 'Dale, lo cargo yo. Te hago las mismas preguntas que le haría al cliente.')}
        {pregs.slice(0, paso).map(x => [
          burbuja('mate', x.q),
          burbuja('vos', x.k === 'monto' ? money(parseInt(String(form[x.k]).replace(/\D/g,''),10) || 0) : String(form[x.k] || '—')),
        ])}
        {!fin && burbuja('mate', p.q)}
        {!fin && p.k === 'cli' && yaEsta && burbuja('mate', `A ${yaEsta.n.split(' ')[0]} ya lo tengo. ${yaEsta.dir ? yaEsta.dir : 'Sin dirección cargada'}.`)}
        {!fin && yaTienePrecio && burbuja('mate', `${form.svc} lo tenés en ${money(precioDe(cfg, form.svc))}. No te lo pregunto.`)}
        {/* El resumen se arma con las preguntas que SE HICIERON, no con una
            lista fija: si el tipo se saltea `hora` o `donde`, la frase no
            puede nombrar un campo que la entrevista nunca pidió. */}
        {/* El resumen se arma con lo que se va a GUARDAR, no con lo que se
            preguntó: desde que el monto no se pregunta cuando el precio ya
            está cargado, la cifra desaparecía justo al confirmar. */}
        {fin && burbuja('mate', 'Listo. ' + [
          ...pregs.filter(x => x.tipo !== 'monto').map(x => form[x.k]),
          money(precioDe(cfg, form.svc) != null ? precioDe(cfg, form.svc) : (parseInt(String(form.monto).replace(/\D/g,''),10) || 0)),
        ].filter(Boolean).join(' · ') + '.')}
        {fin && burbuja('mate', form.tipo === 'Presupuesto'
          ? 'Lo armo y te lo muestro. Vos le das enviar y se lo paso por WhatsApp.'
          : 'Lo cargo y le aviso a Mia para que le mande la confirmación al celular.')}
      </div>

      {!fin && (
        <Card gap={11}>
          {p.k === 'cli' && hits.length > 0 && (
            <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
              <div style={{ fontFamily:T.mono, fontSize:9, letterSpacing:'.09em', color:T.green }}>YA ESTÁ EN TU AGENDA</div>
              {hits.slice(0,3).map(c => (
                <button key={c.n} onClick={() => responder('cli', c.n, null, c)} style={{ display:'flex', alignItems:'center', gap:10, minHeight:52, padding:'0 13px', background:T.g950, border:`1px solid ${T.gBorder}`, borderRadius:11, cursor:'pointer', textAlign:'left' }}>
                  <span style={{ width:28, height:28, flex:'none', borderRadius:99, background:T.gSoft, display:'grid', placeItems:'center', fontFamily:T.sans, fontSize:11, fontWeight:700, color:T.green }}>{c.n.split(' ').map(w=>w[0]).join('')}</span>
                  <span style={{ flex:1, minWidth:0 }}>
                    <span style={{ display:'block', fontFamily:T.sans, fontSize:14, color:T.c100, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{c.n}</span>
                    <span style={{ display:'block', fontFamily:T.mono, fontSize:9, color:T.c500, marginTop:2, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{c.tel}</span>
                  </span>
                </button>
              ))}
              <div style={{ fontFamily:T.mono, fontSize:9, letterSpacing:'.09em', color:T.c500, padding:'2px 2px 0' }}>O ES ALGUIEN NUEVO</div>
            </div>
          )}
          {p.k === 'cli' && txt.trim().length >= 2 && !hits.length && (
            <div style={{ display:'flex', gap:9, alignItems:'flex-start', padding:'10px 12px', background:T.aSoft, border:`1px solid ${T.aBorder}`, borderRadius:11 }}>
              <span style={{ fontFamily:T.mono, fontSize:11, color:T.amber, flex:'none', lineHeight:1.35 }}>+</span>
              <span style={{ flex:1, fontFamily:T.sans, fontSize:12, lineHeight:1.45, color:T.c300 }}>No lo tengo. Lo doy de alta y le pido los datos igual que a uno de WhatsApp.</span>
            </div>
          )}
          {p.tipo === 'servicio' && servicios.length > 0 && (
            <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
              {servicios.map(s => (
                <button key={s.n} onClick={() => responder(p.k, s.n, s.p)} style={{ display:'flex', alignItems:'center', gap:10, minHeight:48, padding:'0 13px', background:T.g950, border:`1px solid ${T.g700}`, borderRadius:11, cursor:'pointer', textAlign:'left' }}>
                  <span style={{ flex:1, minWidth:0, fontFamily:T.sans, fontSize:14, color:T.c100, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{s.n}</span>
                  <span style={{ fontFamily:T.mono, fontSize:12.5, color:T.c500, flex:'none' }}>{money(s.p)}</span>
                </button>
              ))}
              <div style={{ fontFamily:T.mono, fontSize:9, letterSpacing:'.09em', color:T.c500, padding:'2px 2px 0' }}>O ESCRIBILO — SI NO ESTÁ EN LA LISTA TE PREGUNTO EL PRECIO</div>
            </div>
          )}
          {p.tipo === 'cuando' ? (
            <div style={{ display:'flex', flexDirection:'column', gap:9 }}>
              <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:6 }}>
                {['HOY','MAÑANA','SAB'].map(d => <Chip key={d} on={form.dia === d} onClick={() => setForm({ ...form, dia:d })}>{d === 'SAB' ? 'Sábado' : d === 'HOY' ? 'Hoy' : 'Mañana'}</Chip>)}
              </div>
              <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:6 }}>
                {HORAS.map(h => (
                  <button key={h} onClick={() => responder('hora', h)} style={{ minHeight:44, borderRadius:9, fontFamily:T.mono, fontSize:12, cursor:'pointer', color:T.c300, background:'transparent', border:`1px solid ${T.g700}` }}>{h}</button>
                ))}
              </div>
            </div>
          ) : (
            <div style={{ display:'flex', gap:8 }}>
              <input value={txt} onChange={e => setTxt(e.target.value)} placeholder={p.ph} inputMode={p.tipo === 'monto' ? 'numeric' : undefined}
                onKeyDown={e => { if (e.key === 'Enter' && txt.trim()) responder(p.k, txt.trim()); }}
                style={{ flex:1, minWidth:0, height:48, boxSizing:'border-box', padding:'0 14px', background:T.g950, border:`1px solid ${txt?T.vBorder:T.g700}`, borderRadius:12, color:T.c100, fontFamily:p.tipo === 'monto' ? T.mono : T.sans, fontSize:15, outline:'none' }} />
              <button onClick={() => txt.trim() && responder(p.k, txt.trim())} disabled={!txt.trim()} aria-label="Responder"
                style={{ width:48, height:48, flex:'none', borderRadius:12, background:txt.trim()?T.v600:T.g800, border:'none', cursor:txt.trim()?'pointer':'default', display:'grid', placeItems:'center' }}>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={txt.trim()?'#fff':T.c500} strokeWidth="2.2" strokeLinecap="round"><path d="M5 12h13M12 5l7 7-7 7"/></svg>
              </button>
            </div>
          )}
          {p.tipo === 'lugar' && (
            <button onClick={() => responder('donde', 'En tu local')} style={{ minHeight:44, borderRadius:10, background:'transparent', border:`1px solid ${T.g700}`, color:T.c300, fontFamily:T.sans, fontSize:13, fontWeight:600, cursor:'pointer' }}>Viene él a tu local</button>
          )}
        </Card>
      )}
      <div style={{ fontFamily:T.sans, fontSize:12.5, lineHeight:1.55, color:T.c500, padding:'0 4px' }}>
        {fin ? <>{form.tipo === 'Presupuesto' ? 'Lo guardo y se impacta en el sistema. Sale sin enviar: lo mandás vos desde el documento.' : 'Lo guardo, se impacta en el sistema y le paso la orden a Mia para que le mande la confirmación al celular.'} {!yaEsta && form.cli ? `A ${form.cli.split(' ')[0]} lo doy de alta de paso.` : ''}</> : `Mate pregunta lo mismo que Mia, así el trabajo entra con los datos completos. ${paso + 1} de ${pregs.length}.`}
      </div>
    </div>
  );
}

/* ── documentos con filtro ────────────────────────────────────
   Los rangos salen del MISMO eje que Agenda y Reportes. Antes era una
   heurística por etiqueta —"si no tiene hora, entra en cualquier rango"— así
   que un presupuesto de agosto figuraba dentro de esta semana Y dentro de
   septiembre, mientras Reportes lo excluía. Y 'Mes' devolvía true, o sea que
   era idéntico a 'Todos'.                                                  */
const RANGO_DOC = ['Semana','Mes','90 días','Año'];

function Docs({ jobs, abrir, rango, setRango, off, setOff, filtro, setFiltro }) {
  const p = periodo(rango, off || 0);
  const enP = j => { const f = fechaJob(j); return f && f >= p.desde && f < p.hasta; };
  const todos = [
    ...jobs.filter(j => !conHora(j) && !esCierre(j.tsm)).map(j => ({ j, tipo:'presupuesto' })),
    ...jobs.filter(j => j.tsm === 'CANCELADO').map(j => ({ j, tipo:'cancelado' })),
    ...jobs.filter(j => esCobrado(j.tsm)).map(j => ({ j, tipo:'recibo' })),
  ];
  const porRango = todos.filter(x => enP(x.j));
  const fuera = todos.length - porRango.length;
  const vis = filtro === 'Todos' ? porRango
    : filtro === 'Pendientes' ? porRango.filter(x => x.tipo === 'presupuesto')
    : filtro === 'Cancelados' ? porRango.filter(x => x.tipo === 'cancelado')
    : porRango.filter(x => x.tipo === 'recibo');
  const cuenta = t => porRango.filter(x => x.tipo === t).length;

  return (
    <div style={{ display:'flex', flexDirection:'column', gap:13 }}>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:6 }}>
        {RANGO_DOC.map(r => <Chip key={r} on={rango === r} onClick={() => { setRango(r); setOff && setOff(0); }}>{r}</Chip>)}
      </div>
      {/* Mismo navegador que Agenda: sin esto no había forma de llegar al mes
          donde el documento realmente se emitió. */}
      <div style={{ display:'flex', alignItems:'center', gap:9 }}>
        <button onClick={() => setOff && setOff((off || 0) - 1)} aria-label="Anterior" style={{ width:38, height:38, flex:'none', borderRadius:10, background:'transparent', border:`1px solid ${T.g700}`, color:T.c300, cursor:'pointer', fontSize:15 }}>‹</button>
        <span style={{ flex:1, textAlign:'center', fontFamily:T.mono, fontSize:11, letterSpacing:'.07em', color:T.c100 }}>{p.lbl}</span>
        <button onClick={() => setOff && setOff((off || 0) + 1)} aria-label="Siguiente" style={{ width:38, height:38, flex:'none', borderRadius:10, background:'transparent', border:`1px solid ${T.g700}`, color:T.c300, cursor:'pointer', fontSize:15 }}>›</button>
        {(off || 0) !== 0 && <button onClick={() => setOff(0)} style={{ flex:'none', minHeight:38, padding:'0 12px', borderRadius:10, background:'transparent', border:`1px solid ${T.g700}`, color:T.c500, fontFamily:T.sans, fontSize:12.5, fontWeight:600, cursor:'pointer' }}>Hoy</button>}
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:4, background:T.g900, border:`1px solid ${T.g800}`, borderRadius:12, padding:4 }}>
        {[['Todos', porRango.length], ['Pendientes', cuenta('presupuesto')], ['Recibos', cuenta('recibo')], ['Cancelados', cuenta('cancelado')]].map(([t,n]) => { const on = filtro === t;
          return <button key={t} onClick={() => setFiltro(t)} style={{ minHeight:42, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:1, borderRadius:9, border:'none', background:on?T.vSoft:'transparent', boxShadow:on?`inset 0 0 0 1px ${T.vBorder}`:'none', cursor:'pointer', padding:'0 3px' }}>
            <span style={{ fontFamily:T.mono, fontSize:13, color:on ? T.c100:T.c300 }}>{n}</span>
            <span style={{ fontFamily:T.mono, fontSize:8, letterSpacing:'.06em', color:on ? T.c100:T.c500, textTransform:'uppercase' }}>{t}</span>
          </button>;
        })}
      </div>
      {vis.length ? (
        <Card pad={0} gap={0} style={{ overflow:'hidden' }}>
          {vis.map((x,i) => { const { j, tipo } = x;
            const col = tipo === 'recibo' ? T.green : tipo === 'cancelado' ? T.coral : T.v600;
            const bg = tipo === 'recibo' ? T.gSoft : tipo === 'cancelado' ? T.coSoft : T.vSoft;
            const bd = tipo === 'recibo' ? T.gBorder : tipo === 'cancelado' ? T.coBorder : T.vBorder;
            const et = tipo === 'recibo' ? 'REC' : tipo === 'cancelado' ? 'CANC' : 'PRE';
            return (
              <button key={tipo + j.id} onClick={() => abrir(j, tipo === 'recibo' ? 'recibo' : 'presupuesto')} style={{ display:'flex', alignItems:'center', gap:11, minHeight:62, width:'100%', padding:'0 14px', background:'transparent', border:'none', borderTop:i?`1px solid ${T.g800}`:'none', cursor:'pointer', textAlign:'left' }}>
                <span style={{ width:30, height:36, flex:'none', borderRadius:4, border:`1px solid ${bd}`, background:bg, display:'grid', placeItems:'center', fontFamily:T.mono, fontSize:7.5, color:col }}>{et}</span>
                <span style={{ flex:1, minWidth:0 }}>
                  <span style={{ display:'block', fontFamily:T.sans, fontSize:14, color:T.c100, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{j.svc}</span>
                  <span style={{ display:'block', fontFamily:T.mono, fontSize:9, letterSpacing:'.07em', color:T.c500, marginTop:3, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{j.cli} · {tipo === 'recibo' ? 'COBRADO' : tipo === 'cancelado' ? 'CANCELADO' : j.enviado ? 'ENVIADO' : 'SIN ENVIAR'}</span>
                </span>
                <span style={{ fontFamily:T.mono, fontSize:12, color:tipo === 'cancelado' ? T.c500 : T.c300, flex:'none', textDecoration:tipo === 'cancelado' ? 'line-through' : 'none' }}>{money(j.monto)}</span>
              </button>
            );
          })}
        </Card>
      ) : (
        <Card pad={22} gap={11}>
          <div>
            <div style={{ fontFamily:T.sans, fontSize:14, color:T.c300 }}>Nada en {p.lbl}.</div>
            <div style={{ fontFamily:T.sans, fontSize:12.5, color:T.c500, marginTop:4 }}>
              {fuera ? `Tenés ${fuera} ${fuera === 1 ? 'documento' : 'documentos'} en otro período.` : 'Todavía no emitiste ninguno.'}
            </div>
          </div>
          {/* El vacío resuelve en vez de aconsejar: salta al rango más chico que
              sí tiene algo, en vez de dejar al tipo probando combinaciones. */}
          {fuera > 0 && (() => {
            const r2 = RANGO_DOC.find(r => todos.some(x => { const f = fechaJob(x.j); const q = periodo(r, 0); return f && f >= q.desde && f < q.hasta; }));
            return r2 ? <button onClick={() => { setRango(r2); setOff && setOff(0); }} style={{ minHeight:44, borderRadius:11, background:T.vSoft, border:`1px solid ${T.vBorder}`, color:T.c100, fontFamily:T.sans, fontSize:13.5, fontWeight:600, cursor:'pointer' }}>Ver {r2 === 'Año' ? 'todo el año' : r2 === '90 días' ? 'los últimos 90 días' : 'el ' + r2.toLowerCase()}</button> : null;
          })()}
        </Card>
      )}
    </div>
  );
}

Object.assign(window, { MateCarga, PREGS, pregsDe, precioDe, primerPaso, Docs, RANGO_DOC });
