/* GestiFalla — iconos + componentes compartidos */
const { useState, useEffect, useRef } = React;
window.useState = React.useState; window.useEffect = React.useEffect; window.useRef = React.useRef;

/* ---------- Icon set (outline, 20px viewBox 24) ---------- */
const I = {
  bell: (p) => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" {...p}><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/><path d="M13.7 21a2 2 0 01-3.4 0" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>,
  chat: (p) => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" {...p}><path d="M21 11.5a8.4 8.4 0 01-9 8.4 9 9 0 01-4-1L3 20l1.1-5A8.4 8.4 0 1121 11.5z" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  chevR: (p) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" {...p}><path d="M9 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  chevD: (p) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" {...p}><path d="M6 9l6 6 6-6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  back: (p) => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" {...p}><path d="M15 6l-6 6 6 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  star: (p) => <svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M12 2l2.9 6.2 6.6.8-4.9 4.5 1.3 6.5L12 17.8 6.1 20l1.3-6.5L2.5 9l6.6-.8z"/></svg>,
  home: (p) => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" {...p}><path d="M3 10.5L12 3l9 7.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/><path d="M5 9.5V20h14V9.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/><path d="M9.5 20v-5h5v5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  id: (p) => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" {...p}><rect x="3" y="5" width="18" height="14" rx="2.5" stroke="currentColor" strokeWidth="1.8"/><circle cx="8.5" cy="11" r="2.2" stroke="currentColor" strokeWidth="1.8"/><path d="M5.5 16c.6-1.6 2-2.3 3-2.3s2.4.7 3 2.3" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/><path d="M14 9.5h4M14 12.5h4M14 15.5h2.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>,
  calendar: (p) => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" {...p}><rect x="3.5" y="5" width="17" height="16" rx="2.5" stroke="currentColor" strokeWidth="1.8"/><path d="M3.5 9.5h17M8 3v4M16 3v4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>,
  wallet: (p) => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" {...p}><path d="M3 7.5A2.5 2.5 0 015.5 5H17a2 2 0 012 2v1" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/><rect x="3" y="7.5" width="18" height="12.5" rx="2.5" stroke="currentColor" strokeWidth="1.8"/><circle cx="16.5" cy="13.7" r="1.4" fill="currentColor"/></svg>,
  user: (p) => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" {...p}><circle cx="12" cy="8" r="3.5" stroke="currentColor" strokeWidth="1.8"/><path d="M5 20c.8-3.5 3.6-5 7-5s6.2 1.5 7 5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>,
  transfer: (p) => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" {...p}><path d="M7 7h12m0 0l-3-3m3 3l-3 3" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"/><path d="M17 17H5m0 0l3-3m-3 3l3 3" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  plus: (p) => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" {...p}><path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>,
  list: (p) => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" {...p}><path d="M8 7h12M8 12h12M8 17h12" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round"/><circle cx="4" cy="7" r="1.3" fill="currentColor"/><circle cx="4" cy="12" r="1.3" fill="currentColor"/><circle cx="4" cy="17" r="1.3" fill="currentColor"/></svg>,
  cart: (p) => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" {...p}><path d="M3 4h2l2.2 11.2a1.5 1.5 0 001.5 1.2h8.1a1.5 1.5 0 001.5-1.1L21 8H6" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/><circle cx="9.5" cy="20" r="1.4" fill="currentColor"/><circle cx="17.5" cy="20" r="1.4" fill="currentColor"/></svg>,
  users: (p) => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" {...p}><circle cx="9" cy="8" r="3" stroke="currentColor" strokeWidth="1.8"/><path d="M3.5 19c.7-3 2.8-4.3 5.5-4.3s4.8 1.3 5.5 4.3" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/><path d="M16 5.2A3 3 0 0118 11M18.5 14.6c2 .6 3.2 1.9 3.7 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>,
  euro: (p) => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" {...p}><path d="M16 7.5A5 5 0 008 11a5 5 0 008 3.5M5 10.5h7M5 13.5h6" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  doc: (p) => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" {...p}><path d="M6 3h8l4 4v14H6z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"/><path d="M14 3v4h4M9 13h6M9 16.5h6" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  home2: (p) => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" {...p}><path d="M4 11l8-6 8 6v9H4z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"/></svg>,
  pin: (p) => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" {...p}><path d="M12 21s7-5.5 7-11a7 7 0 10-14 0c0 5.5 7 11 7 11z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"/><circle cx="12" cy="10" r="2.4" stroke="currentColor" strokeWidth="1.8"/></svg>,
  note: (p) => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" {...p}><path d="M5 4h14v12l-5 5H5z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"/><path d="M14 21v-5h5M9 9h6M9 12.5h4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  check: (p) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" {...p}><path d="M5 12.5l4.5 4.5L19 7" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  eye: (p) => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" {...p}><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"/><circle cx="12" cy="12" r="2.8" stroke="currentColor" strokeWidth="1.8"/></svg>,
  eyeOff: (p) => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" {...p}><path d="M3 3l18 18M10.6 6.2A10 10 0 0112 6c6.5 0 10 7 10 7a16 16 0 01-3 3.8M6.3 7.8A16 16 0 002 13s3.5 7 10 7a10 10 0 004.3-.9" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  share: (p) => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" {...p}><path d="M12 15V4m0 0L8 8m4-4l4 4" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"/><path d="M5 12v6a2 2 0 002 2h10a2 2 0 002-2v-6" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round"/></svg>,
  download: (p) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" {...p}><path d="M12 4v11m0 0l-4-4m4 4l4-4" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"/><path d="M5 19h14" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round"/></svg>,
  shield: (p) => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" {...p}><path d="M12 3l7 2.5V11c0 5-3.2 8-7 9.5C8.2 19 5 16 5 11V5.5z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"/><path d="M9 12l2 2 4-4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  logout: (p) => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" {...p}><path d="M15 12H4m0 0l4-4m-4 4l4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/><path d="M11 4h7a2 2 0 012 2v12a2 2 0 01-2 2h-7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>,
  bellGear: (p) => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" {...p}><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  qr: (p) => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" {...p}><path d="M4 9V5a1 1 0 011-1h4M20 9V5a1 1 0 00-1-1h-4M4 15v4a1 1 0 001 1h4M20 15v4a1 1 0 01-1 1h-4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>,
  ticket: (p) => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" {...p}><path d="M4 8a2 2 0 012-2h12a2 2 0 012 2 2 2 0 000 4 2 2 0 010 4 2 2 0 01-2 2H6a2 2 0 01-2-2 2 2 0 000-4 2 2 0 010-4z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"/><path d="M13 7v10" stroke="currentColor" strokeWidth="1.6" strokeDasharray="1.5 2.5" strokeLinecap="round"/></svg>,
  arrowUp: (p) => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" {...p}><path d="M12 19V5m0 0l-6 6m6-6l6 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  arrowDown: (p) => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" {...p}><path d="M12 5v14m0 0l6-6m-6 6l-6-6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  clock: (p) => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" {...p}><circle cx="12" cy="12" r="8.5" stroke="currentColor" strokeWidth="1.8"/><path d="M12 7.5V12l3 2" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>,
};

/* ---------- Avatar ---------- */
function Avatar({ name, src, size = 44, fontSize, ring }) {
  const initials = name ? name.split(' ').slice(0,2).map(w => w[0]).join('').toUpperCase() : '?';
  const st = { width: size, height: size, fontSize: fontSize || size * 0.36 };
  if (ring) Object.assign(st, { boxShadow: `0 0 0 ${ring}px rgba(255,255,255,0.25)` });
  if (src) return <img className="gf-avatar" src={src} alt={name} style={st} />;
  return <div className="gf-avatar" style={st}>{initials}</div>;
}

/* ---------- Header universal ---------- */
function Header({ children }) {
  return <div className="gf-header">{children}</div>;
}
function HeaderBrand({ onBell, onChat, notif = true }) {
  return (
    <div className="gf-header__row">
      <div className="gf-logo">Gesti<b>Falla</b></div>
      <div className="gf-header__icons">
        <button className="gf-iconbtn" onClick={onChat}><I.chat /></button>
        <button className="gf-iconbtn" onClick={onBell}><I.bell />{notif && <span className="gf-dot" />}</button>
      </div>
    </div>
  );
}
function SubHeader({ title, onBack, right }) {
  return (
    <>
      <div className="gf-header__row">
        <div className="gf-subhead" style={{ marginTop: 0 }}>
          {onBack && <button className="gf-back" onClick={onBack}><I.back /></button>}
          <div className="gf-subhead__title">{title}</div>
        </div>
        {right}
      </div>
    </>
  );
}

/* ---------- Data cell ---------- */
function Cell({ label, value }) {
  return (
    <div className="gf-cell">
      <div className="gf-cell__label">{label}</div>
      <div className="gf-cell__val">{value}</div>
    </div>
  );
}

/* ---------- Bottom nav ---------- */
const NAV = [
  { id: 'home', label: 'Inicio', icon: I.home },
  { id: 'ficha', label: 'Mi ficha', icon: I.id },
  { id: 'eventos', label: 'Eventos', icon: I.calendar },
  { id: 'monedero', label: 'Monedero', icon: I.wallet },
  { id: 'perfil', label: 'Perfil', icon: I.user },
];
function BottomNav({ active, onNav }) {
  return (
    <nav className="gf-nav">
      {NAV.map(n => {
        const on = active === n.id;
        const Icon = n.icon;
        return (
          <button key={n.id} className={`gf-nav__item${on ? ' gf-nav__item--active' : ''}`} onClick={() => onNav(n.id)}>
            <Icon />
            <span className="gf-nav__lbl">{n.label}</span>
          </button>
        );
      })}
    </nav>
  );
}

/* ---------- Toast ---------- */
function Toast({ msg, show }) {
  if (!show) return null;
  return (
    <div className="gf-toast-wrap">
      <div className="gf-toast"><I.check />{msg}</div>
    </div>
  );
}
function useToast() {
  const [toast, setToast] = useState(null);
  const fire = (msg) => { setToast(msg); };
  useEffect(() => { if (toast) { const t = setTimeout(() => setToast(null), 2500); return () => clearTimeout(t); } }, [toast]);
  return [toast, fire];
}

/* ---------- Bottom sheet ---------- */
function Sheet({ open, onClose, title, children }) {
  if (!open) return null;
  return (
    <div className="gf-sheet-scrim" onClick={onClose}>
      <div className="gf-sheet" onClick={e => e.stopPropagation()}>
        <div className="gf-sheet__grab" />
        {title && <div className="gf-sheet__title" style={{ marginBottom: 14 }}>{title}</div>}
        {children}
      </div>
    </div>
  );
}

/* ---------- QR code (deterministic pseudo-pattern) ---------- */
function QR({ size = 96, fg = '#0d2a50', seed = 7 }) {
  const n = 21;
  const cell = size / n;
  const rects = [];
  let s = seed;
  const rnd = () => { s = (s * 9301 + 49297) % 233280; return s / 233280; };
  const finder = (x, y) => x < 7 && y < 7 || x >= n-7 && y < 7 || x < 7 && y >= n-7;
  for (let y = 0; y < n; y++) for (let x = 0; x < n; x++) {
    if (finder(x,y)) continue;
    if (rnd() > 0.52) rects.push(<rect key={x+'-'+y} x={x*cell} y={y*cell} width={cell} height={cell} fill={fg} />);
  }
  const Finder = ({ x, y }) => (
    <g>
      <rect x={x*cell} y={y*cell} width={cell*7} height={cell*7} fill={fg} />
      <rect x={(x+1)*cell} y={(y+1)*cell} width={cell*5} height={cell*5} fill="#fff" />
      <rect x={(x+2)*cell} y={(y+2)*cell} width={cell*3} height={cell*3} fill={fg} />
    </g>
  );
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ display: 'block' }}>
      <rect width={size} height={size} fill="#fff" />
      {rects}
      <Finder x={0} y={0} /><Finder x={n-7} y={0} /><Finder x={0} y={n-7} />
    </svg>
  );
}

Object.assign(window, { I, Avatar, Header, HeaderBrand, SubHeader, Cell, BottomNav, NAV, Toast, useToast, Sheet, QR });
