// Club 1519 — Panel Staff · vistas: Eventos/Ponencias/Dinámicas, Proveedores y Ventas en evento
const { useState: c15v2State } = React;

/* ================= EVENTOS ================= */
function C15Eventos() {
  const [detalle, setDetalle] = c15v2State(null);
  const [nuevo, setNuevo] = c15v2State(false);
  const I = window.C15Icons;
  const fmtFecha = window.fmtFecha, fmtMoney = window.fmtMoney;

  const proximos = window.C15_EVENTOS.filter(e => e.estado === 'próximo').sort((a, b) => a.fecha.localeCompare(b.fecha));
  const pasados = window.C15_EVENTOS.filter(e => e.estado === 'realizado').sort((a, b) => b.fecha.localeCompare(a.fecha));

  if (detalle) {
    const rsvp = detalle.id === 'EV-118' ? window.C15_RSVP_118 : null;
    return (
      <div className="fade-in">
        <button className="c15-link back" onClick={() => setDetalle(null)}><I.ChevronIzq size={15} />Eventos y ponencias</button>
        <div className="c15s-ficha-head">
          <div className="c15s-eventicon"><I.Copa size={22} /></div>
          <div className="fh-body">
            <h2>{detalle.titulo}</h2>
            <div className="fh-meta">
              <C15Badge tone="brand">{detalle.tipo}</C15Badge>
              <span className="c15-muted">{fmtFecha(detalle.fecha)} · {detalle.hora} · {detalle.sede}</span>
            </div>
          </div>
        </div>
        <div className="c15s-grid2">
          <div className="c15s-card pad">
            <h3 className="c15s-subtitle">Dinámica del evento</h3>
            <p className="c15s-prose">{detalle.dinamica}</p>
            <dl className="c15s-deflist" style={{ marginTop: 14 }}>
              <div className="dl"><dt>Conduce</dt><dd>{detalle.conduce}</dd></div>
              <div className="dl"><dt>Cupo</dt><dd>{detalle.confirmados} / {detalle.cupo}</dd></div>
              {detalle.ingresos > 0 && <div className="dl"><dt>Ingresos</dt><dd>{fmtMoney(detalle.ingresos)}</dd></div>}
            </dl>
          </div>
          <div className="c15s-card">
            <div className="c15s-card-head"><h3>Asistentes confirmados</h3><span className="sub">RSVP en tiempo real</span></div>
            <div className="c15s-rsvplist">
              {(rsvp || window.C15_SOCIOS.slice(0, 6).map(s => ({ socio: s.nombre, mesa: '—', confirmado: true }))).map((r, i) => (
                <div key={i} className="c15s-rsvpitem">
                  <span className={'rs-dot' + (r.confirmado ? ' on' : '')} />
                  <span className="rs-name">{r.socio}</span>
                  <span className="rs-mesa">{r.mesa}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="fade-in">
      <div className="c15s-toolbar">
        <div className="c15s-tabs static"><span className="on">Próximos ({proximos.length})</span><span>Realizados ({pasados.length})</span></div>
        <button className="c15-btn primary sm" onClick={() => setNuevo(v => !v)}><I.Mas size={15} />Nuevo evento</button>
      </div>

      {nuevo && (
        <div className="c15s-card pad fade-in" style={{ marginBottom: 16 }}>
          <h3 className="c15s-subtitle">Crear evento</h3>
          <div className="c15s-formgrid">
            <label>Título<input placeholder="Ej. Cata de vino de otoño" /></label>
            <label>Tipo
              <select>
                <option>Ponencia</option><option>Cata de vino</option><option>Cata de whisky</option><option>Mixto</option>
              </select>
            </label>
            <label>Ponente / conduce<input placeholder="Nombre del ponente o sommelier" /></label>
            <label>Sede<input placeholder="Ej. Terraza Boca del Río" /></label>
            <label>Fecha<input type="date" /></label>
            <label>Cupo<input type="number" placeholder="40" /></label>
          </div>
          <div style={{ display: 'flex', gap: 10, marginTop: 16 }}>
            <button className="c15-btn primary" onClick={() => setNuevo(false)}>Guardar evento</button>
            <button className="c15-btn ghost" onClick={() => setNuevo(false)}>Cancelar</button>
          </div>
        </div>
      )}

      <div className="c15s-eventgrid">
        {[...proximos, ...pasados].map(e => (
          <button key={e.id} className="c15s-eventcard" onClick={() => setDetalle(e)}>
            <div className="ec-top">
              <C15Badge tone={e.estado === 'próximo' ? 'brand' : 'neutral'}>{e.tipo}</C15Badge>
              {e.estado === 'realizado' && <span className="c15-muted sm">Realizado</span>}
            </div>
            <div className="ec-title">{e.titulo}</div>
            <div className="ec-meta">{fmtFecha(e.fecha)} · {e.hora}</div>
            <div className="ec-meta">{e.sede}</div>
            <div className="ec-foot">
              <span>{e.confirmados}/{e.cupo} confirmados</span>
              <I.ChevronDer size={15} />
            </div>
          </button>
        ))}
      </div>
    </div>
  );
}

/* ================= PROVEEDORES Y VENTAS ================= */
function C15Proveedores() {
  const [tab, setTab] = c15v2State('proveedores');
  const [eventoId, setEventoId] = c15v2State('EV-118');
  const I = window.C15Icons;
  const fmtMoney = window.fmtMoney;

  const ventas = eventoId === 'EV-118' ? window.C15_VENTAS_118 : [];
  const total = ventas.reduce((a, v) => a + v.cant * v.precio, 0);
  const evento = window.C15_EVENTOS.find(e => e.id === eventoId);

  return (
    <div className="fade-in">
      <div className="c15s-tabs">
        <button className={tab === 'proveedores' ? 'on' : ''} onClick={() => setTab('proveedores')}>Directorio de proveedores</button>
        <button className={tab === 'ventas' ? 'on' : ''} onClick={() => setTab('ventas')}>Venta en evento</button>
      </div>

      {tab === 'proveedores' && (
        <div className="c15s-provgrid">
          {window.C15_PROVEEDORES.map(p => (
            <div key={p.id} className="c15s-provcard">
              <div className="pc-name">{p.nombre}</div>
              <div className="pc-servicio">{p.servicio}</div>
              <div className="c15s-deflist" style={{ marginTop: 10 }}>
                <div className="dl"><dt>Contacto</dt><dd>{p.contacto}</dd></div>
                <div className="dl"><dt>Teléfono</dt><dd>{p.tel}</dd></div>
              </div>
              <div className="pc-eventos">
                {p.eventos.map(id => {
                  const ev = window.C15_EVENTOS.find(e => e.id === id);
                  return <span key={id} className="c15-tag">{ev ? ev.titulo : id}</span>;
                })}
              </div>
            </div>
          ))}
        </div>
      )}

      {tab === 'ventas' && (
        <>
          <div className="c15s-toolbar">
            <label className="c15s-inlinefield">
              <span>Evento</span>
              <select value={eventoId} onChange={e => setEventoId(e.target.value)}>
                {window.C15_EVENTOS.map(e => <option key={e.id} value={e.id}>{e.titulo} · {e.fecha}</option>)}
              </select>
            </label>
          </div>
          <div className="c15s-card">
            <div className="c15s-card-head"><h3>Venta durante el evento</h3><span className="sub">{evento.titulo}</span></div>
            {ventas.length === 0
              ? <div className="c15s-empty">Sin ventas registradas para este evento.</div>
              : (
                <>
                  <div className="c15s-tablewrap">
                    <table className="c15s-table">
                      <thead><tr><th>Producto</th><th>Mesa</th><th>Socio</th><th>Cant.</th><th>Precio</th><th>Subtotal</th></tr></thead>
                      <tbody>
                        {ventas.map((v, i) => (
                          <tr key={i}>
                            <td>{v.item}</td>
                            <td className="c15-muted">{v.mesa}</td>
                            <td className="c15-muted">{v.socio}</td>
                            <td className="c15-muted">{v.cant}</td>
                            <td className="c15-muted">{fmtMoney(v.precio)}</td>
                            <td style={{ fontWeight: 600 }}>{fmtMoney(v.cant * v.precio)}</td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                  <div className="c15s-totalrow"><span>Total del evento</span><b>{fmtMoney(total)}</b></div>
                </>
              )}
          </div>
        </>
      )}
    </div>
  );
}

Object.assign(window, { C15Eventos, C15Proveedores });