// Club 1519 — Panel Staff · vistas: Dashboard, Socios y Membresías (+ pipeline)
const { useState: c15v1State } = React;

function fmtMoney(n) { return '$' + n.toLocaleString('es-MX'); }
function fmtFecha(iso) {
  if (!iso) return '—';
  const d = new Date(iso + 'T12:00:00');
  return d.toLocaleDateString('es-MX', { day: 'numeric', month: 'short', year: 'numeric' });
}

/* ================= DASHBOARD ================= */
function C15Panel({ onNav }) {
  const I = window.C15Icons;
  const activos = window.C15_SOCIOS.filter(s => s.status === 'activo').length;
  const proximo = window.C15_EVENTOS.filter(e => e.estado === 'próximo').sort((a, b) => a.fecha.localeCompare(b.fecha))[0];
  const realizados = window.C15_EVENTOS.filter(e => e.estado === 'realizado').sort((a, b) => b.fecha.localeCompare(a.fecha));
  const ultimo = realizados[0];
  const marcasActivas = window.C15_MARCAS.length;
  const dias = Math.round((new Date(proximo.fecha) - new Date('2026-07-09')) / 86400000);
  const proximos3 = window.C15_EVENTOS.filter(e => e.estado === 'próximo').sort((a, b) => a.fecha.localeCompare(b.fecha));

  const accesos = [
    { id: 'socios', label: 'Socios y membresías', icon: 'Membresia' },
    { id: 'eventos', label: 'Eventos y ponencias', icon: 'Eventos' },
    { id: 'proveedores', label: 'Proveedores y ventas', icon: 'Proveedores' },
    { id: 'marcas', label: 'Marcas patrocinadoras', icon: 'Marcas' },
  ];

  return (
    <div className="fade-in">
      <div className="c15s-kpis">
        <div className="c15s-kpi">
          <div className="k-top"><span className="k-lbl">Miembros activos</span><I.Directorio size={16} /></div>
          <div className="k-val">{activos}</div>
          <div className="k-sub">de {window.C15_SOCIOS.length} socios registrados</div>
        </div>
        <div className="c15s-kpi accent">
          <div className="k-top"><span className="k-lbl">Próximo evento</span><I.Reloj size={16} /></div>
          <div className="k-val">en {dias} días</div>
          <div className="k-sub">{proximo.titulo} · {fmtFecha(proximo.fecha)}</div>
        </div>
        <div className="c15s-kpi">
          <div className="k-top"><span className="k-lbl">Ingresos último evento</span><I.Copa size={16} /></div>
          <div className="k-val">{fmtMoney(ultimo.ingresos)}</div>
          <div className="k-sub">{ultimo.titulo}</div>
        </div>
        <div className="c15s-kpi">
          <div className="k-top"><span className="k-lbl">Marcas patrocinadoras</span><I.Marcas size={16} /></div>
          <div className="k-val">{marcasActivas}</div>
          <div className="k-sub">activas esta temporada</div>
        </div>
      </div>

      <div className="c15s-grid2">
        <div className="c15s-card">
          <div className="c15s-card-head"><h3>Próximos eventos</h3><span className="sub">Línea de tiempo</span></div>
          <div className="c15s-timeline">
            {proximos3.map(e => (
              <div key={e.id} className="c15s-tl-item">
                <div className="tl-dot" />
                <div className="tl-body">
                  <div className="tl-top"><b>{e.titulo}</b><C15Badge tone="brand">{e.tipo}</C15Badge></div>
                  <div className="tl-meta">{fmtFecha(e.fecha)} · {e.hora} · {e.sede}</div>
                  <div className="tl-meta">{e.confirmados}/{e.cupo} confirmados</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="c15s-card pad">
          <div className="c15s-card-head" style={{ padding: 0, border: 'none', marginBottom: 14 }}><h3>Accesos rápidos</h3></div>
          <div className="c15s-accesos">
            {accesos.map(a => {
              const Ico = I[a.icon];
              return (
                <button key={a.id} className="c15s-acceso" onClick={() => onNav(a.id)}>
                  <Ico size={20} />
                  <span>{a.label}</span>
                </button>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

/* ================= SOCIOS Y MEMBRESÍAS ================= */
const C15_STATUS_TONE = { activo: 'ok', pendiente: 'warn', 'en revisión': 'warn', inactivo: 'stop' };

function C15Socios() {
  const [tab, setTab] = c15v1State('directorio');
  const [filtro, setFiltro] = c15v1State('todos');
  const [ficha, setFicha] = c15v1State(null);
  const [app, setApp] = c15v1State(null);
  const [pipeline, setPipeline] = c15v1State(window.C15_PIPELINE);
  const I = window.C15Icons;

  const filtros = ['todos', 'activo', 'pendiente', 'en revisión', 'inactivo'];
  const socios = window.C15_SOCIOS.filter(s => filtro === 'todos' || s.status === filtro);

  const avanzar = (id) => {
    setPipeline(prev => prev.map(p => {
      if (p.id !== id) return p;
      const i = window.C15_PIPELINE_ETAPAS.indexOf(p.etapa);
      const next = window.C15_PIPELINE_ETAPAS[Math.min(i + 1, 3)];
      return { ...p, etapa: next === 'Rechazado' ? p.etapa : next };
    }));
    setApp(a => a && a.id === id ? { ...a, etapa: window.C15_PIPELINE_ETAPAS[Math.min(window.C15_PIPELINE_ETAPAS.indexOf(a.etapa) + 1, 3)] } : a);
  };
  const rechazar = (id) => {
    setPipeline(prev => prev.map(p => p.id === id ? { ...p, etapa: 'Rechazado' } : p));
    setApp(a => a && a.id === id ? { ...a, etapa: 'Rechazado' } : a);
  };

  if (ficha) {
    return (
      <div className="fade-in">
        <button className="c15-link back" onClick={() => setFicha(null)}><I.ChevronIzq size={15} />Directorio de socios</button>
        <div className="c15s-ficha-head">
          <span className="c15s-avatar lg">{ficha.short}</span>
          <div className="fh-body">
            <h2>{ficha.nombre}</h2>
            <div className="fh-meta">
              <C15Badge tone={C15_STATUS_TONE[ficha.status]}>{ficha.status}</C15Badge>
              <span className="c15-muted">{ficha.empresa} · {ficha.giro}</span>
            </div>
          </div>
        </div>
        <div className="c15s-grid2">
          <div className="c15s-card pad">
            <h3 className="c15s-subtitle">Datos de membresía</h3>
            <dl className="c15s-deflist">
              <div className="dl"><dt>Fecha de ingreso</dt><dd>{fmtFecha(ficha.ingreso)}</dd></div>
              <div className="dl"><dt>Asistencia a eventos</dt><dd>{ficha.asistencias}</dd></div>
              <div className="dl"><dt>Estatus de pago</dt><dd>{ficha.pago}</dd></div>
              <div className="dl"><dt>Teléfono</dt><dd>{ficha.tel}</dd></div>
              <div className="dl"><dt>Correo</dt><dd>{ficha.email}</dd></div>
            </dl>
          </div>
          <div className="c15s-card pad">
            <h3 className="c15s-subtitle">Empresa</h3>
            <dl className="c15s-deflist">
              <div className="dl"><dt>Razón social</dt><dd>{ficha.empresa}</dd></div>
              <div className="dl"><dt>Giro</dt><dd>{ficha.giro}</dd></div>
            </dl>
          </div>
        </div>
      </div>
    );
  }

  if (app) {
    return (
      <div className="fade-in">
        <button className="c15-link back" onClick={() => setApp(null)}><I.ChevronIzq size={15} />Pipeline de aplicaciones</button>
        <div className="c15s-ficha-head">
          <span className="c15s-avatar lg">{app.nombre.split(' ').map(w => w[0]).slice(0, 2).join('')}</span>
          <div className="fh-body">
            <h2>{app.nombre}</h2>
            <div className="fh-meta">
              <C15Badge tone={app.etapa === 'Aceptado' ? 'ok' : app.etapa === 'Rechazado' ? 'stop' : 'warn'}>{app.etapa}</C15Badge>
              <span className="c15-muted">{app.empresa} · {app.giro}</span>
            </div>
          </div>
        </div>
        <div className="c15s-grid2">
          <div className="c15s-card pad">
            <h3 className="c15s-subtitle">Solicitud</h3>
            <dl className="c15s-deflist">
              <div className="dl"><dt>Folio</dt><dd>{app.id}</dd></div>
              <div className="dl"><dt>Referido por</dt><dd>{app.referido}</dd></div>
              <div className="dl"><dt>Fecha de solicitud</dt><dd>{app.fecha}</dd></div>
            </dl>
            <div className="c15s-nota">{app.nota}</div>
          </div>
          <div className="c15s-card pad">
            <h3 className="c15s-subtitle">Decisión</h3>
            <p className="c15-muted" style={{ marginBottom: 14 }}>El valor del club está en la curaduría — cada solicitud pasa por revisión y entrevista antes de aceptarse.</p>
            <div style={{ display: 'flex', gap: 10 }}>
              <button className="c15-btn primary" disabled={app.etapa === 'Aceptado' || app.etapa === 'Rechazado'} onClick={() => avanzar(app.id)}>Avanzar etapa</button>
              <button className="c15-btn ghost stop" disabled={app.etapa === 'Aceptado' || app.etapa === 'Rechazado'} onClick={() => rechazar(app.id)}>Rechazar</button>
            </div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="fade-in">
      <div className="c15s-tabs">
        <button className={tab === 'directorio' ? 'on' : ''} onClick={() => setTab('directorio')}>Directorio de socios</button>
        <button className={tab === 'pipeline' ? 'on' : ''} onClick={() => setTab('pipeline')}>Pipeline de aplicaciones</button>
      </div>

      {tab === 'directorio' && (
        <>
          <div className="c15s-filters">
            {filtros.map(f => (
              <button key={f} className={'c15s-chip' + (filtro === f ? ' on' : '')} onClick={() => setFiltro(f)}>
                {f === 'todos' ? 'Todos' : f[0].toUpperCase() + f.slice(1)}
                <span className="c-count">{f === 'todos' ? window.C15_SOCIOS.length : window.C15_SOCIOS.filter(s => s.status === f).length}</span>
              </button>
            ))}
          </div>
          <div className="c15s-card">
            <div className="c15s-tablewrap">
              <table className="c15s-table">
                <thead><tr><th>Socio</th><th>Empresa</th><th>Giro</th><th>Ingreso</th><th>Asistencias</th><th>Pago</th><th>Estatus</th></tr></thead>
                <tbody>
                  {socios.map(s => (
                    <tr key={s.id} className="c15s-row" onClick={() => setFicha(s)}>
                      <td><div className="c15s-namecell"><span className="c15s-avatar sm">{s.short}</span>{s.nombre}</div></td>
                      <td>{s.empresa}</td>
                      <td className="c15-muted">{s.giro}</td>
                      <td className="c15-muted">{fmtFecha(s.ingreso)}</td>
                      <td className="c15-muted">{s.asistencias}</td>
                      <td className="c15-muted">{s.pago}</td>
                      <td><C15Badge tone={C15_STATUS_TONE[s.status]}>{s.status}</C15Badge></td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </>
      )}

      {tab === 'pipeline' && (
        <div className="c15s-kanban">
          {window.C15_PIPELINE_ETAPAS.map(etapa => (
            <div key={etapa} className="c15s-kcol">
              <div className="c15s-kcol-head">
                <span>{etapa}</span>
                <span className="c-count">{pipeline.filter(p => p.etapa === etapa).length}</span>
              </div>
              <div className="c15s-kcol-body">
                {pipeline.filter(p => p.etapa === etapa).map(p => (
                  <button key={p.id} className="c15s-kcard" onClick={() => setApp(p)}>
                    <div className="kc-name">{p.nombre}</div>
                    <div className="kc-sub">{p.empresa}</div>
                    <div className="kc-foot"><span>{p.fecha}</span><span>Ref. {p.referido.split(' ')[0]}</span></div>
                  </button>
                ))}
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { C15Panel, C15Socios, fmtMoney: fmtMoney, fmtFecha: fmtFecha });