// Club 1519 — Portal Socios · vistas: Inicio, Mis Eventos, Mi Membresía
const { useState: c15pv1State } = React;

function fmtFechaP(iso) {
  const d = new Date(iso + 'T12:00:00');
  return d.toLocaleDateString('es-MX', { weekday: 'long', day: 'numeric', month: 'long' });
}
function fmtFechaCorta(iso) {
  const d = new Date(iso + 'T12:00:00');
  return d.toLocaleDateString('es-MX', { day: 'numeric', month: 'short', year: 'numeric' });
}

/* ================= INICIO ================= */
function C15PInicio({ onNav }) {
  const I = window.C15Icons;
  const [confirmado, setConfirmado] = c15pv1State(false);
  const proximo = window.C15_EVENTOS.filter(e => e.estado === 'próximo').sort((a, b) => a.fecha.localeCompare(b.fecha))[0];
  const dias = Math.round((new Date(proximo.fecha) - new Date('2026-07-09')) / 86400000);

  const accesos = [
    { id: 'eventos', label: 'Mis eventos', icon: 'Eventos' },
    { id: 'membresia', label: 'Mi membresía', icon: 'Membresia' },
    { id: 'directorio', label: 'Directorio', icon: 'Directorio' },
    { id: 'marcas', label: 'Marcas aliadas', icon: 'Estrella' },
  ];

  return (
    <div className="c15p-screen">
      <div className="c15p-greet">
        <span>Hola, {window.C15_ME.nombre.split(' ')[0]}</span>
        <h1>Bienvenido de vuelta</h1>
      </div>

      <div className="c15p-hero">
        <div className="hero-kick">Próximo evento</div>
        <div className="hero-title">{proximo.titulo}</div>
        <div className="hero-meta">{fmtFechaP(proximo.fecha)} · {proximo.hora} · {proximo.sede.split(',')[0]}</div>
        <div className="hero-foot">
          <span className="hero-countdown">{confirmado ? 'Confirmado' : `Comienza en ${dias} días`}</span>
          <button className={'c15p-btn pill' + (confirmado ? ' on' : '')} onClick={() => setConfirmado(v => !v)}>
            {confirmado ? <><I.Check size={15} sw={2.4} />Listo</> : 'Confirmar'}
          </button>
        </div>
      </div>

      <div className="c15p-sectionlbl">Accesos rápidos</div>
      <div className="c15p-accesos">
        {accesos.map(a => {
          const Ico = I[a.icon];
          return (
            <button key={a.id} className="c15p-acceso" onClick={() => onNav(a.id)}>
              <Ico size={22} />
              <span>{a.label}</span>
            </button>
          );
        })}
      </div>
    </div>
  );
}

/* ================= MIS EVENTOS ================= */
function C15PEventos({ onOpen }) {
  const [confirmados, setConfirmados] = c15pv1State({});
  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));
  const I = window.C15Icons;

  const toggle = (id) => setConfirmados(prev => ({ ...prev, [id]: !prev[id] }));

  return (
    <div className="c15p-screen">
      <div className="c15p-sectionlbl first">Próximos eventos</div>
      <div className="c15p-list">
        {proximos.map(e => (
          <div key={e.id} className="c15p-eventrow" onClick={() => onOpen(e)}>
            <div className="er-icon"><I.Copa size={18} /></div>
            <div className="er-body">
              <div className="er-title">{e.titulo}</div>
              <div className="er-meta">{fmtFechaCorta(e.fecha)} · {e.hora}</div>
            </div>
            <button className={'c15p-btn pill sm' + (confirmados[e.id] ? ' on' : '')} onClick={(ev) => { ev.stopPropagation(); toggle(e.id); }}>
              {confirmados[e.id] ? 'Listo' : 'Confirmar'}
            </button>
          </div>
        ))}
      </div>

      <div className="c15p-sectionlbl">Historial de eventos asistidos</div>
      <div className="c15p-list">
        {pasados.map(e => (
          <div key={e.id} className="c15p-eventrow hist" onClick={() => onOpen(e)}>
            <div className="er-icon done"><I.Check size={16} sw={2.4} /></div>
            <div className="er-body">
              <div className="er-title">{e.titulo}</div>
              <div className="er-meta">{fmtFechaCorta(e.fecha)}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function C15PEventoDetalle({ evento }) {
  const I = window.C15Icons;
  return (
    <div className="c15p-screen">
      <div className="c15p-detailicon"><I.Copa size={26} /></div>
      <h2 className="c15p-detailtitle">{evento.titulo}</h2>
      <div className="c15p-detailmeta">{fmtFechaP(evento.fecha)} · {evento.hora}</div>
      <div className="c15p-detailmeta">{evento.sede}</div>
      <div className="c15p-card">
        <div className="c15p-card-lbl">La dinámica</div>
        <p>{evento.dinamica}</p>
      </div>
      <div className="c15p-card">
        <div className="c15p-card-lbl">Conduce</div>
        <p>{evento.conduce}</p>
      </div>
    </div>
  );
}

/* ================= MI MEMBRESÍA ================= */
function C15PMembresia() {
  const me = window.C15_ME;
  const socio = window.C15_SOCIOS.find(s => s.nombre === me.nombre) || window.C15_SOCIOS[0];
  return (
    <div className="c15p-screen">
      <div className="c15p-memcard">
        <div className="mc-top">
          <window.C15PLogo size={18} color="#F4F0E8" />
          <span className="mc-status">Activo</span>
        </div>
        <div className="mc-name">{socio.nombre}</div>
        <div className="mc-empresa">{socio.empresa}</div>
        <div className="mc-foot">
          <div><span className="mc-lbl">Miembro desde</span><b>{fmtFechaCorta(socio.ingreso)}</b></div>
          <div><span className="mc-lbl">No. de socio</span><b>{'#' + (1500 + socio.id)}</b></div>
        </div>
      </div>

      <div className="c15p-sectionlbl">Estatus de membresía</div>
      <div className="c15p-card">
        <div className="c15p-deflist">
          <div className="dl"><dt>Estatus</dt><dd className="ok">Al corriente</dd></div>
          <div className="dl"><dt>Próxima renovación</dt><dd>31 jul 2026</dd></div>
          <div className="dl"><dt>Eventos asistidos</dt><dd>{socio.asistencias}</dd></div>
        </div>
      </div>
      <button className="c15p-btn ghost lg">Ver historial de pagos</button>
    </div>
  );
}

Object.assign(window, { C15PInicio, C15PEventos, C15PEventoDetalle, C15PMembresia, fmtFechaP, fmtFechaCorta });