// ============================================================
// CONTAX · VISTA OPERARIO — Cierre del día (mobile-first, lenguaje natural)
// ============================================================

function OperarioView({ embedded = false }) {
  const C = window.CONTAX; const Iv = window.I;

  const [now, setNow] = React.useState(new Date());
  React.useEffect(() => {
    const t = setInterval(() => setNow(new Date()), 30000);
    return () => clearInterval(t);
  }, []);
  const hh = now.getHours();
  const saludo = hh >= 5 && hh < 12 ? 'Buenos días' : hh >= 12 && hh < 18 ? 'Buenas tardes' : 'Buenas noches';
  const fechaLarga = now.toLocaleDateString('es-CO', { weekday: 'long', day: 'numeric', month: 'long' });
  const horaCorta = now.toLocaleTimeString('es-CO', { hour: '2-digit', minute: '2-digit', hour12: false });

  const [products, setProducts] = React.useState(() =>
    C.PRODUCTOS.map(p => ({
      id: p.id, nombre: p.nombre, precio: p.precio,
      empezo: p.stock + p.sold, llego: 0, fin: p.stock, rotos: 0,
      open: false, savedAt: Date.now() - 60000, touched: false,
    }))
  );
  const [openId, setOpenId] = React.useState(null);
  const [savingId, setSavingId] = React.useState(null);
  const [cash, setCash] = React.useState({ efectivo: '', transferencia: '', meseros: '' });
  const [nota, setNota] = React.useState('');
  const [expenseSheet, setExpenseSheet] = React.useState(false);
  const [expenses, setExpenses] = React.useState([
    { id: 1, concepto: 'Vasos para Rappi', valor: 52000 },
    { id: 2, concepto: 'Pago a Carlos',     valor: 165000 },
    { id: 3, concepto: 'Compra de hielo',   valor: 18000 },
    { id: 4, concepto: 'Vigilancia',        valor: 10000 },
  ]);
  const [confirmModal, setConfirmModal] = React.useState(false);
  const [closed, setClosed] = React.useState(false);

  const toggle = (id) => {
    setOpenId(curr => curr === id ? null : id);
    setProducts(ps => ps.map(p => ({ ...p, open: p.id === id ? p.id !== openId : false })));
  };
  const updateProd = (id, key, val) => {
    setSavingId(id);
    setProducts(ps => ps.map(p => {
      if (p.id !== id) return p;
      const next = { ...p, [key]: val, touched: true };
      const empezo = Number(next.empezo) || 0;
      const llego = Number(next.llego) || 0;
      const fin = Number(next.fin) || 0;
      const rotos = Number(next.rotos) || 0;
      next.vendidos = Math.max(0, empezo + llego - fin - rotos);
      return next;
    }));
    clearTimeout(window.__opSaveT);
    window.__opSaveT = setTimeout(() => {
      setProducts(ps => ps.map(p => p.id === id ? { ...p, savedAt: Date.now() } : p));
      setSavingId(null);
    }, 800);
  };

  const ventas = products.reduce((a, p) => a + (Number(p.vendidos) || 0) * p.precio, 0);
  const vasosVendidos = products.reduce((a, p) => a + (Number(p.vendidos) || 0), 0);
  const gastosTotal = expenses.reduce((a, e) => a + e.valor, 0);
  const enCaja = (Number(cash.efectivo) || 0) + (Number(cash.transferencia) || 0) + (Number(cash.meseros) || 0) + gastosTotal;
  const diferencia = enCaja - ventas;
  const tieneAlgoEnCaja = cash.efectivo !== '' || cash.transferencia !== '';
  const estado = !tieneAlgoEnCaja ? 'pending' : Math.abs(diferencia) < 1000 ? 'cuadra' : diferencia > 0 ? 'sobra' : 'falta';

  const productosCompletos = products.every(p => p.touched);
  const sinContar = products.filter(p => !p.touched).length;

  const closeDia = () => {
    if (!productosCompletos) return;
    if (estado === 'falta' && Math.abs(diferencia) > 50000) {
      setConfirmModal('warning');
    } else {
      setConfirmModal('normal');
    }
  };

  if (closed) return <PostCierreScreen
    saludo={saludo}
    ventas={ventas}
    estado={estado}
    diferencia={diferencia}
    onReset={() => {
      setClosed(false);
      setCash({efectivo:'', transferencia:'', meseros:''});
      setProducts(ps => ps.map(p => ({ ...p, touched: false, open: false })));
    }}
  />;

  const COP = (n) => '$' + (Math.abs(Math.round(n))).toLocaleString('es-CO');
  const fmtSec = (ts) => {
    const s = Math.max(0, Math.floor((Date.now() - ts) / 1000));
    if (s < 5) return 'ahora mismo';
    if (s < 60) return `hace ${s} segundos`;
    if (s < 3600) return `hace ${Math.floor(s/60)} min`;
    return 'hace un rato';
  };

  return (
    <div className="op-shell">
      {/* HEADER pegado arriba */}
      <header className="op-stickytop">
        <div className="op-greet">
          <div className="op-greet-text">
            <div className="op-name">{saludo}, Carlos</div>
            <div className="op-meta">Sede Barranquilla · {horaCorta}</div>
          </div>
          <span className="op-online"><span className="dot-status"/>En línea</span>
        </div>
        <div className="op-result">
          <div className="op-result-q">¿Cómo va la caja?</div>
          <div className={`op-result-v ${estado}`}>
            {estado === 'pending' && <><Iv.Edit3 size={14}/> Sigue contando los vasos</>}
            {estado === 'cuadra'  && <><Iv.Check size={15}/> Va cuadrando</>}
            {estado === 'sobra'   && <><Iv.TrendingUp size={15}/> Te sobran {COP(diferencia)}</>}
            {estado === 'falta'   && <><Iv.TrendingDown size={15}/> Te faltan {COP(diferencia)}</>}
          </div>
        </div>
      </header>

      <main className="op-main">
        {/* ============ 1. VASOS DEL DÍA ============ */}
        <section className="op-section">
          <div className="op-sec-head">
            <div className="op-sec-num">1</div>
            <div>
              <div className="op-sec-title">Vasos del día</div>
              <div className="op-sec-sub">Toca cada vaso para anotar cuántos tienes al final del día</div>
            </div>
          </div>

          <div className="op-prod-list">
            {products.map((p) => {
              const isOpen = p.id === openId;
              const empezo = Number(p.empezo) || 0;
              const isReady = p.touched;
              return (
                <article key={p.id} className={`op-prod ${isOpen ? 'is-open' : ''} ${isReady ? 'is-ready' : 'is-pending'}`}>
                  <button className="op-prod-head" onClick={() => toggle(p.id)}>
                    <div className="op-prod-head-l">
                      <div className="op-prod-name">{p.nombre}</div>
                      <div className="op-prod-mini">
                        <span>Empezaste con <b className="tnum">{empezo}</b></span>
                        <span className="op-prod-sep">·</span>
                        {isReady
                          ? <span>Vendiste <b className="tnum">{p.vendidos}</b></span>
                          : <span className="op-pending-tag">Falta contar</span>}
                      </div>
                    </div>
                    <div className="op-prod-head-r">
                      {isReady && !isOpen && <span className="op-tick"><Iv.Check size={13}/> Listo</span>}
                      <Iv.ChevronDown size={18} className="op-chev"/>
                    </div>
                  </button>

                  {isOpen && (
                    <div className="op-prod-body">
                      <Field label="Con cuántos empezaste" value={p.empezo} onChange={v => updateProd(p.id, 'empezo', v)}/>
                      <Field label="Cuántos te llegaron de bodega" value={p.llego} onChange={v => updateProd(p.id, 'llego', v)}/>
                      <Field label="Cuántos quedaron al final" value={p.fin} onChange={v => updateProd(p.id, 'fin', v)} primary/>
                      <Field label="Cuántos se rompieron" value={p.rotos} onChange={v => updateProd(p.id, 'rotos', v)}/>

                      <div className="op-prod-summary">
                        <div className="op-prod-calc">
                          Vendiste <b className="tnum">{p.vendidos || 0}</b> vasos · <b className="tnum">{COP((p.vendidos || 0) * p.precio)}</b>
                        </div>
                        <div className="op-prod-saved">
                          {savingId === p.id
                            ? <><Iv.Loader size={12} className="spin"/> Guardando…</>
                            : <><Iv.Check size={12}/> Guardado {fmtSec(p.savedAt)}</>}
                        </div>
                      </div>
                    </div>
                  )}
                </article>
              );
            })}
          </div>

          <div className="op-total-day">
            <span>Total del día</span>
            <span><b className="tnum">{vasosVendidos}</b> vasos vendidos · <b className="tnum">{COP(ventas)}</b></span>
          </div>
        </section>

        {/* ============ 2. LA PLATA DEL DÍA ============ */}
        <section className="op-section">
          <div className="op-sec-head">
            <div className="op-sec-num">2</div>
            <div>
              <div className="op-sec-title">La plata del día</div>
              <div className="op-sec-sub">Cuánto entró por cada medio</div>
            </div>
          </div>

          <BigField
            label="En efectivo"
            value={cash.efectivo}
            onChange={v => setCash(c => ({ ...c, efectivo: v }))}
          />
          <BigField
            label="En transferencias"
            hint="Nequi, Daviplata, Bancolombia…"
            value={cash.transferencia}
            onChange={v => setCash(c => ({ ...c, transferencia: v }))}
          />
          <BigField
            label="Plata que le pagaste a meseros u otros"
            value={cash.meseros}
            onChange={v => setCash(c => ({ ...c, meseros: v }))}
          />

          <div className="op-expense-block">
            <div className="op-expense-row">
              <div>
                <div className="op-expense-label">Gastos del día</div>
                <div className="op-expense-value tnum">{COP(gastosTotal)}</div>
              </div>
              <button className="op-expense-toggle" onClick={() => setExpenseSheet(true)}>
                <Iv.List size={13}/> Ver gastos ({expenses.length})
              </button>
            </div>
            <button className="op-add-expense" onClick={() => setExpenseSheet('add')}>
              <Iv.Plus size={15}/> Agregar gasto
            </button>
          </div>
        </section>

        {/* ============ 3. ¿ALGO IMPORTANTE? ============ */}
        <section className="op-section">
          <div className="op-sec-head">
            <div className="op-sec-num">3</div>
            <div>
              <div className="op-sec-title">¿Algo importante que contar?</div>
              <div className="op-sec-sub">Opcional · solo si hubo algo raro hoy</div>
            </div>
          </div>
          <textarea
            className="op-textarea"
            placeholder={`Ej: "se fue la luz 2 horas"\n"vino mucha gente por evento"`}
            value={nota}
            onChange={e => setNota(e.target.value)}
            rows={3}
          />
        </section>

        <div style={{ height: 160 }}/>
      </main>

      {/* FOOTER pegado abajo */}
      <footer className="op-stickybottom">
        <div className="op-footer-grid">
          <div className="op-footer-row">
            <span>Vendiste</span>
            <span className="tnum">{COP(ventas)}</span>
          </div>
          <div className="op-footer-row">
            <span>Tienes en caja</span>
            <span className="tnum">{COP(enCaja)}</span>
          </div>
          <div className="op-footer-divider"/>
          <div className={`op-footer-status ${estado}`}>
            {estado === 'pending' && 'Sigue contando para ver si cuadra'}
            {estado === 'cuadra'  && <><Iv.Check size={14}/> La caja cuadra</>}
            {estado === 'sobra'   && <><Iv.TrendingUp size={14}/> Te sobran <b className="tnum">{COP(diferencia)}</b></>}
            {estado === 'falta'   && <><Iv.TrendingDown size={14}/> Te faltan <b className="tnum">{COP(diferencia)}</b></>}
          </div>
        </div>
        <button
          className={`op-close-btn ${productosCompletos ? 'ready' : 'blocked'}`}
          disabled={!productosCompletos || !tieneAlgoEnCaja}
          onClick={closeDia}
        >
          {productosCompletos
            ? (tieneAlgoEnCaja ? 'Cerrar el día' : 'Anota la plata del día')
            : `Te faltan ${sinContar} vaso${sinContar === 1 ? '' : 's'} por contar`}
        </button>
      </footer>

      {/* Modal de gastos / lista */}
      {expenseSheet && (
        <ExpenseSheet
          mode={expenseSheet}
          expenses={expenses}
          onClose={() => setExpenseSheet(false)}
          onAdd={(e) => setExpenses(prev => [...prev, { ...e, id: Date.now() }])}
          onRemove={(id) => setExpenses(prev => prev.filter(e => e.id !== id))}
        />
      )}

      {/* Modal de confirmación */}
      {confirmModal && (
        <ConfirmCloseModal
          variant={confirmModal}
          diferencia={diferencia}
          onCancel={() => setConfirmModal(false)}
          onConfirm={() => { setConfirmModal(false); setClosed(true); }}
        />
      )}
    </div>
  );
}

// ============================================================
function Field({ label, value, onChange, primary }) {
  return (
    <label className="op-field">
      <span className="op-field-label">{label}</span>
      <input
        className={`op-field-input tnum ${primary ? 'primary' : ''}`}
        type="number"
        inputMode="numeric"
        value={value}
        onChange={e => onChange(e.target.value)}
        placeholder="0"
      />
    </label>
  );
}

function BigField({ label, hint, value, onChange }) {
  const fmt = (n) => {
    if (n === '' || n == null) return '';
    const num = Number(String(n).replace(/\D/g, ''));
    if (!num) return '';
    return num.toLocaleString('es-CO');
  };
  return (
    <label className="op-bigfield">
      <span className="op-bigfield-label">{label}</span>
      {hint && <span className="op-bigfield-hint">{hint}</span>}
      <div className="op-bigfield-input">
        <span className="op-bigfield-prefix">$</span>
        <input
          type="text"
          inputMode="numeric"
          className="tnum"
          value={fmt(value)}
          onChange={e => onChange(e.target.value.replace(/\D/g, ''))}
          placeholder="0"
        />
      </div>
    </label>
  );
}

// ============================================================
function ExpenseSheet({ mode, expenses, onClose, onAdd, onRemove }) {
  const Iv = window.I; const C = window.CONTAX;
  const [showForm, setShowForm] = React.useState(mode === 'add');
  const [concepto, setConcepto] = React.useState('Vasos para Rappi');
  const [valor, setValor] = React.useState('');
  const [foto, setFoto] = React.useState(false);
  const sugeridos = ['Vasos rotos', 'Vigilancia', 'Domicilio', 'Transporte', 'Pago a empleado', 'Vasos para Rappi', 'Compra de hielo'];

  const COP = (n) => '$' + Math.round(n).toLocaleString('es-CO');

  return (
    <div className="op-sheet-backdrop" onClick={onClose}>
      <div className="op-sheet" onClick={e => e.stopPropagation()}>
        <div className="op-sheet-handle"/>
        <div className="op-sheet-head">
          <div>
            <div className="op-sheet-title">{showForm ? 'Agregar un gasto del día' : 'Gastos del día'}</div>
            <div className="op-sheet-sub">{showForm ? 'Cuéntanos en qué fue' : `${expenses.length} ${expenses.length === 1 ? 'gasto anotado' : 'gastos anotados'}`}</div>
          </div>
          <button className="icon-btn" onClick={onClose}><Iv.X size={16}/></button>
        </div>

        {!showForm && (
          <>
            <div className="op-expense-list">
              {expenses.length === 0 && (
                <div className="op-empty-mini">Aún no has anotado ningún gasto hoy</div>
              )}
              {expenses.map(e => (
                <div key={e.id} className="op-expense-item">
                  <div>
                    <div className="op-expense-item-name">{e.concepto}</div>
                    <div className="op-expense-item-meta">Hoy</div>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <span className="op-expense-item-val tnum">{COP(e.valor)}</span>
                    <button className="icon-btn" onClick={() => onRemove(e.id)}><Iv.X size={13}/></button>
                  </div>
                </div>
              ))}
            </div>
            <button className="op-sheet-cta" onClick={() => setShowForm(true)}><Iv.Plus size={15}/> Agregar otro gasto</button>
          </>
        )}

        {showForm && (
          <div className="op-sheet-form">
            <label className="op-bigfield">
              <span className="op-bigfield-label">¿En qué fue el gasto?</span>
              <input
                className="op-field-input"
                list="sug-gastos"
                value={concepto}
                onChange={e => setConcepto(e.target.value)}
              />
              <datalist id="sug-gastos">
                {sugeridos.map(s => <option key={s} value={s}/>)}
              </datalist>
              <div className="op-chips">
                {sugeridos.slice(0,4).map(s => (
                  <button key={s} className={`op-chip ${concepto === s ? 'active' : ''}`} onClick={() => setConcepto(s)}>{s}</button>
                ))}
              </div>
            </label>

            <label className="op-bigfield">
              <span className="op-bigfield-label">¿Cuánto fue?</span>
              <div className="op-bigfield-input">
                <span className="op-bigfield-prefix">$</span>
                <input
                  type="text"
                  inputMode="numeric"
                  className="tnum"
                  placeholder="0"
                  value={valor ? Number(valor).toLocaleString('es-CO') : ''}
                  onChange={e => setValor(e.target.value.replace(/\D/g, ''))}
                />
              </div>
            </label>

            <button className={`op-photo-btn ${foto ? 'has' : ''}`} onClick={() => setFoto(f => !f)}>
              <Iv.Camera size={15}/> {foto ? 'Foto adjuntada · tocar para cambiar' : '¿Tienes foto del recibo? (opcional)'}
            </button>

            <div className="op-sheet-actions">
              <button className="op-btn-ghost" onClick={onClose}>Cancelar</button>
              <button
                className="op-btn-primary"
                disabled={!valor}
                onClick={() => {
                  onAdd({ concepto, valor: Number(valor) || 0, foto });
                  onClose();
                }}
              >Guardar gasto</button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

// ============================================================
function ConfirmCloseModal({ variant, diferencia, onCancel, onConfirm }) {
  const COP = (n) => '$' + Math.abs(Math.round(n)).toLocaleString('es-CO');
  return (
    <div className="op-sheet-backdrop" onClick={onCancel}>
      <div className="op-confirm" onClick={e => e.stopPropagation()}>
        <div className="op-confirm-icon">
          {variant === 'warning'
            ? <window.I.AlertTriangle size={24} style={{ color: 'var(--warning)' }}/>
            : <window.I.HelpCircle size={24} style={{ color: 'var(--accent)' }}/>}
        </div>
        <h3 className="op-confirm-title">
          {variant === 'warning' ? 'Atención' : '¿Estás seguro?'}
        </h3>
        <p className="op-confirm-body">
          {variant === 'warning' ? (
            <>
              Te están faltando <b className="tnum">{COP(diferencia)}</b>. ¿Estás seguro de cerrar así?
              <br/><br/>
              <span style={{ color: 'var(--text-tertiary)' }}>Si hay un error, mejor revisa antes.</span>
            </>
          ) : (
            <>
              Una vez cierres el día, no vas a poder editar nada.
              <br/><br/>
              <span style={{ color: 'var(--text-tertiary)' }}>Solo el dueño puede desbloquear si hubo error.</span>
            </>
          )}
        </p>
        <div className="op-confirm-actions">
          <button className="op-btn-ghost" onClick={onCancel}>
            {variant === 'warning' ? 'Revisar' : 'Volver atrás'}
          </button>
          <button className={`op-btn-primary ${variant === 'warning' ? 'warn' : ''}`} onClick={onConfirm}>
            {variant === 'warning' ? 'Cerrar de todas formas' : 'Sí, cerrar'}
          </button>
        </div>
      </div>
    </div>
  );
}

// ============================================================
function PostCierreScreen({ saludo, ventas, estado, diferencia, onReset }) {
  const Iv = window.I;
  const COP = (n) => '$' + Math.abs(Math.round(n)).toLocaleString('es-CO');
  return (
    <div className="op-post">
      <div className="op-post-card">
        <svg width="92" height="92" viewBox="0 0 92 92" className="op-post-check">
          <circle cx="46" cy="46" r="42" stroke="var(--success)" strokeWidth="1.5" fill="var(--success-bg)"/>
          <path d="M30 47l11 11 21-23" stroke="var(--success)" strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round"
            strokeDasharray="60" strokeDashoffset="60"
            style={{ animation: 'drawCheck .65s 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards' }}/>
        </svg>
        <style>{`@keyframes drawCheck { to { stroke-dashoffset: 0; } }`}</style>

        <h2 className="op-post-title">¡Listo! Día cerrado</h2>

        <div className="op-post-summary">
          <div className="op-post-row">
            <span>Vendiste hoy</span>
            <span className="tnum">{COP(ventas)}</span>
          </div>
          <div className="op-post-row">
            <span>La caja</span>
            <span className={`op-post-pill ${estado}`}>
              {estado === 'cuadra' && <><Iv.Check size={12}/> Cuadra</>}
              {estado === 'sobra'  && <>↑ Sobró {COP(diferencia)}</>}
              {estado === 'falta'  && <>↓ Faltó {COP(diferencia)}</>}
            </span>
          </div>
        </div>

        <p className="op-post-bye">Hasta mañana, Carlos.</p>

        <button className="op-btn-ghost full" onClick={onReset}>Cerrar sesión</button>
      </div>
    </div>
  );
}

Object.assign(window, { OperarioView, PostCierreScreen });