/* GestiFalla — Pantallas B: Tarjeta, Monedero, Eventos, Perfil */

/* ============================================================
   TARJETA FALLERA — carnet digital (pantalla completa)
   ============================================================ */
function TarjetaScreen({ onBack, toast }) {
  const f = DATA.fallero;
  return (
    <div className="gf-screen">
      <Header>
        <SubHeader title="Tarjeta fallera" onBack={onBack} right={<button className="gf-iconbtn" onClick={() => toast('Compartiendo tarjeta…')}><I.share /></button>} />
      </Header>

      <div className="gf-body gf-body--padnav" style={{ padding: '18px 16px' }}>
        {/* Carnet */}
        <div className="gf-fadein" style={{ background: 'var(--gf-primary)', borderRadius: 18, padding: '22px 20px', color: '#fff', boxShadow: 'var(--gf-shadow-pop)', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 4, background: 'var(--gf-accent)' }} />
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
            <div className="gf-logo" style={{ fontSize: 16 }}>Gesti<b>Falla</b></div>
            <span className="gf-badge"><I.star /> {f.cargo}</span>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginTop: 14 }}>
            <Avatar name={f.nombre} size={92} ring={3} fontSize={32} />
            <div style={{ fontSize: 21, fontWeight: 800, marginTop: 14, textAlign: 'center', letterSpacing: '-0.01em', lineHeight: 1.18 }}>{f.nombre}</div>
            <div style={{ fontSize: 12, fontWeight: 600, color: 'rgba(255,255,255,0.7)', marginTop: 5, textAlign: 'center', lineHeight: 1.3 }}>{DATA.falla.nombre}</div>
          </div>

          {/* Grid de datos */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1, marginTop: 20, background: 'rgba(255,255,255,0.12)', borderRadius: 10, overflow: 'hidden' }}>
            {[['Cargo', f.cargo], ['N.º JCF', f.jcf], ['Años fallero', String(f.anios)], ['Sección', f.seccion]].map((c, i) => (
              <div key={i} style={{ background: 'var(--gf-primary)', padding: '10px 12px' }}>
                <div style={{ fontSize: 8.5, fontWeight: 800, letterSpacing: '0.06em', color: 'rgba(255,255,255,0.6)', textTransform: 'uppercase' }}>{c[0]}</div>
                <div style={{ fontSize: 14, fontWeight: 800, marginTop: 2 }}>{c[1]}</div>
              </div>
            ))}
          </div>

          {/* QR row */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 16, background: 'rgba(255,255,255,0.1)', borderRadius: 10, padding: 12 }}>
            <div style={{ background: '#fff', borderRadius: 8, padding: 6 }}><QR size={72} fg="#0d3d7a" /></div>
            <div>
              <div style={{ fontSize: 9, fontWeight: 800, letterSpacing: '0.06em', color: 'rgba(255,255,255,0.6)', textTransform: 'uppercase' }}>Código de verificación</div>
              <div style={{ fontSize: 16, fontWeight: 800, marginTop: 4, letterSpacing: '0.04em' }}>GF·{f.jcf}·{f.censo.replace('.', '')}</div>
              <div style={{ fontSize: 10, fontWeight: 600, color: 'rgba(255,255,255,0.6)', marginTop: 4 }}>Válido ejercicio {DATA.falla.ejercicio}</div>
            </div>
          </div>
        </div>

        {/* Insignias */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10, marginTop: 14 }}>
          {DATA.insignias.map((b, i) => (
            <div key={i} className="gf-card" style={{ padding: '14px 8px', textAlign: 'center' }}>
              <div style={{ fontSize: 9, fontWeight: 800, letterSpacing: '0.06em', color: 'var(--gf-muted)', textTransform: 'uppercase' }}>{b.tipo}</div>
              <div style={{ fontSize: 22, fontWeight: 800, color: 'var(--gf-gold)', margin: '3px 0', WebkitTextStroke: '0.4px #E0A93D' }}>{b.valor}</div>
              <div style={{ fontSize: 10, fontWeight: 600, color: 'var(--gf-muted)' }}>{b.sub}</div>
            </div>
          ))}
        </div>

        {/* Wallet buttons */}
        <div style={{ display: 'flex', gap: 10, marginTop: 14 }}>
          <button className="gf-btn" style={{ background: '#000', color: '#fff', fontSize: 13 }} onClick={() => toast('Añadir a Apple Wallet')}><I.download /> Apple Wallet</button>
          <button className="gf-btn" style={{ background: '#fff', color: 'var(--gf-text)', border: '1px solid var(--gf-border)', fontSize: 13 }} onClick={() => toast('Añadir a Google Pay')}><I.download /> Google Pay</button>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   MONEDERO
   ============================================================ */
function MonederoScreen({ onNav, onTraspaso, toast }) {
  const f = DATA.fallero, m = DATA.falla.moneda;
  const acciones = [
    { l: 'Traspasar', i: I.transfer, fn: onTraspaso },
    { l: 'Recargar', i: I.plus, fn: () => toast('Recarga iniciada') },
    { l: 'Consumo', i: I.cart, fn: () => toast('Modo consumo en barra') },
    { l: 'Historial', i: I.list, fn: () => toast('Historial completo') },
  ];
  return (
    <div className="gf-screen">
      <Header>
        <SubHeader title="Monedero" right={<button className="gf-iconbtn" onClick={() => toast('Cambiar moneda')}><I.euro width="20" height="20" /></button>} />
      </Header>

      <div className="gf-body gf-body--padnav">
        {/* Hero saldo */}
        <div className="gf-hero">
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <div className="gf-coin">{m.simbolo}</div>
            <div>
              <div style={{ fontSize: 11, fontWeight: 700, color: 'rgba(255,255,255,0.7)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Saldo disponible</div>
              <div className="gf-balance" style={{ marginTop: 4 }}>{f.saldo} <small>{m.simbolo}</small></div>
            </div>
          </div>
          <div className="gf-strip" style={{ marginTop: 18 }}>
            {acciones.map((a, k) => (
              <button key={k} className="gf-strip__item" onClick={a.fn}>
                <a.i width="20" height="20" />
                <span className="gf-strip__lbl">{a.l}</span>
              </button>
            ))}
          </div>
        </div>

        <div style={{ padding: '16px' }}>
          {/* Equivalencia + moneda selector */}
          <div className="gf-card" style={{ padding: '13px 15px', display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 36, height: 36, borderRadius: 9, background: 'var(--gf-primary-soft)', color: 'var(--gf-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800 }}>{m.simbolo}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 800 }}>1 {m.singular} = {m.equivalencia}</div>
              <div className="gf-sub">Moneda interna · {DATA.falla.nombre}</div>
            </div>
            <span className="gf-pill" style={{ background: 'var(--gf-primary-soft)', color: 'var(--gf-primary)' }}>{m.nombre}</span>
          </div>

          {/* Movimientos */}
          <div className="gf-eyebrow" style={{ margin: '20px 0 10px' }}>Últimos movimientos</div>
          <div className="gf-card" style={{ overflow: 'hidden' }}>
            {DATA.movimientos.map(mv => {
              const inc = mv.tipo === 'in';
              return (
                <div key={mv.id} className="gf-row">
                  <div className="gf-row__ico" style={{ background: inc ? 'var(--gf-green-soft)' : 'var(--gf-red-soft)', color: inc ? 'var(--gf-green)' : 'var(--gf-red)' }}>
                    {inc ? <I.arrowDown /> : <I.arrowUp />}
                  </div>
                  <div className="gf-row__body">
                    <div className="gf-row__title">{mv.concepto}</div>
                    <div className="gf-row__sub">{mv.det} · {mv.fecha}</div>
                  </div>
                  <div style={{ fontSize: 14, fontWeight: 800, color: inc ? 'var(--gf-green)' : 'var(--gf-text)' }}>{mv.importe} {m.simbolo}</div>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      <BottomNav active="monedero" onNav={onNav} />
    </div>
  );
}

/* ============================================================
   EVENTOS
   ============================================================ */
const ESTADO = {
  ok:   { cls: 'gf-pill--ok',   txt: 'Confirmado' },
  wait: { cls: 'gf-pill--wait', txt: 'Pendiente' },
  no:   { cls: 'gf-pill--no',   txt: 'Lista espera' },
};
function EventosScreen({ onNav, onEvento }) {
  return (
    <div className="gf-screen">
      <Header>
        <SubHeader title="Eventos" right={<button className="gf-iconbtn"><I.calendar width="20" height="20" /></button>} />
      </Header>
      <div className="gf-body gf-body--padnav" style={{ padding: '16px' }}>
        <div className="gf-eyebrow" style={{ margin: '0 0 10px' }}>Próximos · {DATA.eventos.length}</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {DATA.eventos.map(ev => (
            <button key={ev.id} className="gf-card" style={{ display: 'flex', alignItems: 'center', gap: 13, padding: 12, textAlign: 'left', width: '100%' }} onClick={() => onEvento(ev)}>
              <div style={{ width: 52, height: 56, borderRadius: 10, background: 'var(--gf-primary-soft)', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <div style={{ fontSize: 22, fontWeight: 800, color: 'var(--gf-primary)', lineHeight: 1 }}>{ev.dia}</div>
                <div style={{ fontSize: 9, fontWeight: 800, color: 'var(--gf-primary)', letterSpacing: '0.08em', marginTop: 2 }}>{ev.mes}</div>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 14, fontWeight: 800 }}>{ev.nombre}</div>
                <div className="gf-sub" style={{ marginTop: 2 }}>{ev.lugar}</div>
                <div style={{ marginTop: 7 }}><span className={`gf-pill ${ESTADO[ev.estado].cls}`}>{ESTADO[ev.estado].txt}</span></div>
              </div>
              <I.chevR className="gf-chev" />
            </button>
          ))}
        </div>
      </div>
      <BottomNav active="eventos" onNav={onNav} />
    </div>
  );
}

function EventoDetalle({ ev, onBack, onTraspaso, toast }) {
  const e = ev || DATA.eventos[0];
  return (
    <div className="gf-screen">
      <Header>
        <SubHeader title="Evento" onBack={onBack} />
      </Header>
      <div className="gf-body gf-body--padnav">
        <div style={{ background: 'var(--gf-primary)', padding: '6px 18px 18px', color: '#fff' }}>
          <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
            <div style={{ width: 58, height: 62, borderRadius: 12, background: 'rgba(255,255,255,0.14)', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
              <div style={{ fontSize: 24, fontWeight: 800, lineHeight: 1 }}>{e.dia}</div>
              <div style={{ fontSize: 9, fontWeight: 800, letterSpacing: '0.08em', marginTop: 2, color: 'var(--gf-accent)' }}>{e.mes}</div>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 19, fontWeight: 800 }}>{e.nombre}</div>
              <div style={{ fontSize: 12, fontWeight: 600, color: 'rgba(255,255,255,0.75)', marginTop: 3 }}>{e.lugar}</div>
            </div>
          </div>
          <div style={{ marginTop: 14 }}><span className={`gf-pill ${ESTADO[e.estado].cls}`}>{ESTADO[e.estado].txt}</span> <span style={{ fontSize: 11, fontWeight: 600, color: 'rgba(255,255,255,0.7)', marginLeft: 6 }}>{e.plazas}</span></div>
        </div>

        <div style={{ padding: 16 }}>
          <div className="gf-eyebrow" style={{ margin: '0 0 10px' }}>Productos asignados</div>
          <div className="gf-card" style={{ overflow: 'hidden' }}>
            {DATA.eventoDetalle.productos.map((p, i) => (
              <div key={i} className="gf-row">
                <div className="gf-row__ico"><I.ticket /></div>
                <div className="gf-row__body">
                  <div className="gf-row__title">{p.nombre}</div>
                  <div className="gf-row__sub">Cantidad: {p.cant}</div>
                </div>
                <div style={{ fontSize: 13, fontWeight: 800, color: 'var(--gf-primary)' }}>{p.precio}</div>
              </div>
            ))}
          </div>

          <div style={{ display: 'flex', gap: 10, marginTop: 16 }}>
            <button className="gf-btn gf-btn--ghost" onClick={onTraspaso}><I.transfer width="18" height="18" /> Traspasar</button>
            <button className="gf-btn gf-btn--primary" onClick={() => toast('Asistencia confirmada')}><I.check /> Confirmar</button>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   PERFIL / AJUSTES
   ============================================================ */
function PerfilScreen({ onNav, onLogout, toast }) {
  const f = DATA.fallero;
  const groups = [
    { items: [
      { t: 'Tus datos', s: 'Ficha, unidad familiar, domicilio', i: I.id, fn: () => onNav('ficha') },
      { t: 'Tarjeta fallera', s: 'Carnet digital y QR', i: I.qr, fn: () => onNav('carnet') },
    ]},
    { items: [
      { t: 'Notificaciones', s: 'Avisos, eventos, cuotas', i: I.bellGear, fn: () => toast('Ajustes de notificaciones') },
      { t: 'Seguridad', s: 'Contraseña y acceso', i: I.shield, fn: () => toast('Ajustes de seguridad') },
    ]},
    { items: [
      { t: 'Cerrar sesión', s: null, i: I.logout, danger: true, fn: onLogout },
    ]},
  ];
  return (
    <div className="gf-screen">
      <Header>
        <SubHeader title="Perfil" />
      </Header>
      <div className="gf-body gf-body--padnav">
        <div style={{ background: 'var(--gf-primary)', padding: '6px 18px 20px', display: 'flex', alignItems: 'center', gap: 14 }}>
          <Avatar name={f.nombre} size={58} ring={3} />
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 18, fontWeight: 800, color: '#fff' }}>{f.nombre}</div>
            <div style={{ fontSize: 12, fontWeight: 600, color: 'rgba(255,255,255,0.7)', marginTop: 2 }}>Último acceso: hoy, 09:41</div>
          </div>
        </div>

        <div style={{ padding: 16 }}>
          {groups.map((g, gi) => (
            <div key={gi} className="gf-list" style={{ marginBottom: 12 }}>
              {g.items.map((it, i) => (
                <button key={i} className="gf-row" style={{ width: '100%', textAlign: 'left' }} onClick={it.fn}>
                  <div className="gf-row__ico" style={it.danger ? { background: 'var(--gf-red-soft)', color: 'var(--gf-red)' } : {}}><it.i width="20" height="20" /></div>
                  <div className="gf-row__body">
                    <div className="gf-row__title" style={it.danger ? { color: 'var(--gf-red)' } : {}}>{it.t}</div>
                    {it.s && <div className="gf-row__sub">{it.s}</div>}
                  </div>
                  {!it.danger && <I.chevR className="gf-chev" />}
                </button>
              ))}
            </div>
          ))}
          <div style={{ textAlign: 'center', fontSize: 11, color: 'var(--gf-muted)', fontWeight: 600, marginTop: 8 }}>
            GestiFalla · v2.6.0 · {DATA.falla.nombre}
          </div>
        </div>
      </div>
      <BottomNav active="perfil" onNav={onNav} />
    </div>
  );
}

Object.assign(window, { TarjetaScreen, MonederoScreen, EventosScreen, EventoDetalle, PerfilScreen });