// Club 1519 — Panel Staff · vistas: Marcas patrocinadoras, Comunicación, Reportes
const { useState: c15v3State } = React;

/* ================= MARCAS PATROCINADORAS ================= */
function C15Marcas() {
  const [detalle, setDetalle] = c15v3State(null);
  const I = window.C15Icons;

  if (detalle) {
    return (
      <div className="fade-in">
        <button className="c15-link back" onClick={() => setDetalle(null)}><I.ChevronIzq size={15} />Marcas patrocinadoras</button>
        <div className="c15s-ficha-head">
          <div className="c15s-eventicon"><I.Marcas size={20} /></div>
          <div className="fh-body">
            <h2>{detalle.nombre}</h2>
            <div className="fh-meta"><C15Badge tone="gold">{detalle.nivel}</C15Badge><span className="c15-muted">{detalle.giro}</span></div>
          </div>
        </div>
        <div className="c15s-grid2">
          <div className="c15s-card pad">
            <h3 className="c15s-subtitle">Beneficio para socios</h3>
            <p className="c15s-prose">{detalle.beneficio}</p>
          </div>
          <div className="c15s-card pad">
            <h3 className="c15s-subtitle">Historial de exposición</h3>
            <div className="c15s-deflist">
              {detalle.eventos.map(id => {
                const ev = window.C15_EVENTOS.find(e => e.id === id);
                return <div key={id} className="dl"><dt>{ev ? ev.titulo : id}</dt><dd className="c15-muted">{ev ? ev.fecha : ''}</dd></div>;
              })}
            </div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="fade-in">
      <div className="c15s-card" style={{ marginBottom: 18 }}>
        <div className="c15s-card-head"><h3>Paquetes de patrocinio</h3><span className="sub">Niveles de exposición</span></div>
        <div className="c15s-paquetes">
          {window.C15_PAQUETES.map(p => (
            <div key={p.nivel} className="c15s-paquete">
              <C15Badge tone="gold">{p.nivel}</C15Badge>
              <div className="pq-precio">{p.precio}</div>
              <ul>{p.incluye.map((x, i) => <li key={i}>{x}</li>)}</ul>
            </div>
          ))}
        </div>
      </div>

      <div className="c15s-card-head" style={{ padding: '4px 2px 12px', border: 'none' }}><h3 style={{ fontFamily: 'var(--serif)', fontSize: 16 }}>Directorio de marcas aliadas</h3></div>
      <div className="c15s-provgrid">
        {window.C15_MARCAS.map(m => (
          <button key={m.id} className="c15s-provcard clickable" onClick={() => setDetalle(m)}>
            <div className="pc-top"><div className="pc-name">{m.nombre}</div><C15Badge tone="gold">{m.nivel}</C15Badge></div>
            <div className="pc-servicio">{m.giro}</div>
            <div className="c15-muted sm" style={{ marginTop: 10 }}>{m.eventos.length} evento{m.eventos.length !== 1 ? 's' : ''} patrocinado{m.eventos.length !== 1 ? 's' : ''}</div>
          </button>
        ))}
      </div>
    </div>
  );
}

/* ================= COMUNICACIÓN ================= */
function C15Comunicacion() {
  const [comunicados, setComunicados] = c15v3State(window.C15_COMUNICADOS);
  const [titulo, setTitulo] = c15v3State('');
  const [cuerpo, setCuerpo] = c15v3State('');
  const I = window.C15Icons;

  const enviar = () => {
    if (!titulo.trim()) return;
    setComunicados(prev => [{ id: Date.now(), titulo, cuerpo, fecha: '2026-07-09', destaque: false }, ...prev]);
    setTitulo(''); setCuerpo('');
  };

  return (
    <div className="fade-in c15s-grid2">
      <div className="c15s-card pad">
        <h3 className="c15s-subtitle">Nuevo comunicado</h3>
        <label className="c15s-formfield"><span>Título</span><input value={titulo} onChange={e => setTitulo(e.target.value)} placeholder="Ej. Recordatorio de evento" /></label>
        <label className="c15s-formfield"><span>Mensaje</span><textarea value={cuerpo} onChange={e => setCuerpo(e.target.value)} rows={5} placeholder="Escribe el contenido para los socios…" /></label>
        <button className="c15-btn primary" onClick={enviar}><I.Enviar size={15} />Enviar a socios</button>
      </div>
      <div className="c15s-card">
        <div className="c15s-card-head"><h3>Comunicados enviados</h3></div>
        <div className="c15s-comunlist">
          {comunicados.map(c => (
            <div key={c.id} className="c15s-comunitem">
              <div className="cm-top"><b>{c.titulo}</b>{c.destaque && <C15Badge tone="brand">Destacado</C15Badge>}</div>
              <p>{c.cuerpo}</p>
              <div className="c15-muted sm">{c.fecha}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ================= REPORTES ================= */
function C15Reportes() {
  const fmtMoney = window.fmtMoney;
  const ingresos = window.C15_REPORTE_INGRESOS;
  const maxIngreso = Math.max(...ingresos.map(i => i.membresias + i.venta));
  const asistencia = window.C15_REPORTE_ASISTENCIA;
  const maxAsist = Math.max(...asistencia.map(a => a.asistencia));
  const marcasRank = [...window.C15_MARCAS].sort((a, b) => b.eventos.length - a.eventos.length);

  return (
    <div className="fade-in">
      <div className="c15s-card pad" style={{ marginBottom: 18 }}>
        <h3 className="c15s-subtitle">Ingresos por evento</h3>
        <div className="c15s-barchart">
          {ingresos.map(i => (
            <div key={i.evento} className="c15s-barrow">
              <div className="br-lbl">{i.evento}<span className="c15-muted sm">{i.fecha}</span></div>
              <div className="br-track">
                <div className="br-fill venta" style={{ width: ((i.venta) / maxIngreso * 100) + '%' }} />
                <div className="br-fill membresia" style={{ width: ((i.membresias) / maxIngreso * 100) + '%' }} />
              </div>
              <div className="br-val">{fmtMoney(i.membresias + i.venta)}</div>
            </div>
          ))}
        </div>
        <div className="c15s-legend"><span><i className="venta" />Venta en evento</span><span><i className="membresia" />Membresías</span></div>
      </div>

      <div className="c15s-grid2">
        <div className="c15s-card pad">
          <h3 className="c15s-subtitle">Asistencia histórica</h3>
          <div className="c15s-barchart v">
            {asistencia.map(a => (
              <div key={a.mes} className="c15s-vbar">
                <div className="vb-track"><div className="vb-fill" style={{ height: (a.asistencia / maxAsist * 100) + '%' }} /></div>
                <div className="vb-val">{a.asistencia}</div>
                <div className="vb-lbl">{a.mes}</div>
              </div>
            ))}
          </div>
        </div>
        <div className="c15s-card pad">
          <h3 className="c15s-subtitle">Desempeño de patrocinios</h3>
          <div className="c15s-deflist">
            {marcasRank.map(m => (
              <div key={m.id} className="dl"><dt>{m.nombre}</dt><dd>{m.eventos.length} evento{m.eventos.length !== 1 ? 's' : ''}</dd></div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { C15Marcas, C15Comunicacion, C15Reportes });