// vita-shell.jsx — Estructura de la aplicación web.
//
// Sustituye al marco de iPhone (IOSDevice). Aquí vive la arquitectura de
// navegación: header fijo, sidebar en escritorio, barra inferior en móvil,
// y un contenedor de contenido con ancho máximo.
//
// Reglas de responsive (los cortes salen de src/design/tokens.ts):
//   ≥1024px  sidebar fija de 240px + contenido
//   768-1023 sidebar como cajón deslizante (botón hamburguesa)
//   <768px   sin sidebar, navegación inferior de 5 destinos

// ── Arquitectura de navegación ──────────────────────────────────
// Un único sitio donde se declara qué secciones existen. Añadir una sección
// es añadir una fila aquí, no tocar tres componentes.
const NAV_PRINCIPAL = [
  { id: 'home', label: 'Inicio', icono: 'home', flow: 'home', enMovil: true },
  { id: 'chat', label: 'Hablar con Vita', iconoCorto: 'Vita', icono: 'mic', flow: 'chat', enMovil: true, destacado: true },
  { id: 'care', label: 'Mi plan', icono: 'check', flow: 'care', enMovil: false },
  { id: 'history', label: 'Historia clínica', iconoCorto: 'Historia', icono: 'doc', flow: 'history', enMovil: true },
  { id: 'services', label: 'Servicios', icono: 'grid', flow: 'services', enMovil: true },
  { id: 'profile', label: 'Perfil', icono: 'user', flow: 'profile', enMovil: true },
];

function useAnchoVentana() {
  const [ancho, setAncho] = React.useState(typeof window !== 'undefined' ? window.innerWidth : 1280);
  React.useEffect(() => {
    const medir = () => setAncho(window.innerWidth);
    window.addEventListener('resize', medir);
    return () => window.removeEventListener('resize', medir);
  }, []);
  return ancho;
}

// ── Header ──────────────────────────────────────────────────────
function AppHeader({ t, titulo, notifCount, onOpenNotifs, onToggleTheme, onToggleMenu, compacto, pacienteNombre, onOpenProfile }) {
  const p = t.paleta;
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 40,
      height: 60, flexShrink: 0,
      background: p.primary,
      display: 'flex', alignItems: 'center', gap: 12,
      padding: '0 16px',
      boxShadow: '0 1px 3px rgba(15,23,42,0.12)',
    }}>
      {compacto && (
        <button onClick={onToggleMenu} aria-label="Abrir menú" style={botonIcono(p)}>
          <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round">
            <path d="M4 7h16M4 12h16M4 17h16" />
          </svg>
        </button>
      )}

      <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
        <VITAMark t={t} size={22} withWord={false} />
        <div style={{ minWidth: 0 }}>
          <div style={{ color: '#fff', fontWeight: 700, fontSize: 16, letterSpacing: 0.5, lineHeight: 1.1 }}>VITA</div>
          {titulo && <div style={{ color: 'rgba(255,255,255,0.75)', fontSize: 11.5, lineHeight: 1.2, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{titulo}</div>}
        </div>
      </div>

      <div style={{ flex: 1 }} />

      <button onClick={onOpenNotifs} aria-label="Notificaciones" style={{ ...botonIcono(p), position: 'relative' }}>
        <svg viewBox="0 0 24 24" width="19" height="19" fill="none" stroke="#fff" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round">
          <path d="M18 8a6 6 0 1 0-12 0c0 7-3 8-3 8h18s-3-1-3-8" /><path d="M13.7 21a2 2 0 0 1-3.4 0" />
        </svg>
        {notifCount > 0 && (
          <span style={{
            position: 'absolute', top: 3, right: 3, minWidth: 16, height: 16, padding: '0 4px',
            borderRadius: 999, background: p.warning, color: '#3B2600',
            fontSize: 10, fontWeight: 700, display: 'grid', placeItems: 'center',
            border: `2px solid ${p.primary}`,
          }}>{notifCount > 9 ? '9+' : notifCount}</span>
        )}
      </button>

      <button onClick={onToggleTheme} aria-label="Cambiar tema" style={botonIcono(p)}>
        {t.dark ? Icon.sun({ s: 18, c: '#fff' }) : Icon.moon({ s: 18, c: '#fff' })}
      </button>

      <button onClick={onOpenProfile} style={{
        ...botonIcono(p), width: 'auto', padding: '0 10px 0 4px', gap: 8, borderRadius: 999,
        background: 'rgba(255,255,255,0.14)',
      }}>
        <span style={{
          width: 28, height: 28, borderRadius: '50%', background: '#fff', color: p.primary,
          display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 12, flexShrink: 0,
        }}>{(pacienteNombre || 'T').trim().charAt(0).toUpperCase()}</span>
        <span style={{ color: '#fff', fontSize: 13, fontWeight: 500, maxWidth: 110, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
          {(pacienteNombre || 'Mi cuenta').split(' ')[0]}
        </span>
      </button>
    </header>
  );
}

function botonIcono(p) {
  return {
    width: 36, height: 36, flexShrink: 0,
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    borderRadius: 8, border: 'none', cursor: 'pointer',
    background: 'transparent', color: '#fff',
    transition: 'background 120ms ease',
  };
}

// ── Sidebar (escritorio y cajón) ────────────────────────────────
function AppSidebar({ t, activo, onNavegar, comoCajon, abierto, onCerrar }) {
  const p = t.paleta;

  const contenido = (
    <nav style={{
      width: 240, flexShrink: 0,
      background: p.surface,
      borderRight: `1px solid ${p.border}`,
      padding: '16px 12px',
      display: 'flex', flexDirection: 'column', gap: 2,
      height: '100%', overflowY: 'auto',
    }}>
      <div style={{ fontSize: 11, fontWeight: 600, color: p.textMuted, letterSpacing: 0.6, padding: '4px 12px 8px', textTransform: 'uppercase' }}>
        Navegación
      </div>

      {NAV_PRINCIPAL.map((item) => {
        const esActivo = activo === item.id;
        return (
          <button key={item.id}
            onClick={() => { onNavegar(item.flow); onCerrar && onCerrar(); }}
            style={{
              display: 'flex', alignItems: 'center', gap: 11,
              padding: '10px 12px', borderRadius: 10, border: 'none', cursor: 'pointer',
              textAlign: 'left', width: '100%',
              background: esActivo ? p.primarySoft : 'transparent',
              color: esActivo ? p.primaryDark : p.text,
              fontWeight: esActivo ? 600 : 500, fontSize: 14,
              transition: 'background 120ms ease',
            }}>
            <span style={{ width: 20, display: 'grid', placeItems: 'center', flexShrink: 0 }}>
              {Icon[item.icono] ? Icon[item.icono]({ s: 19, c: esActivo ? p.primaryDark : p.textMuted }) : null}
            </span>
            {item.label}
            {esActivo && <span style={{ marginLeft: 'auto', width: 3, height: 18, borderRadius: 2, background: p.primary }} />}
          </button>
        );
      })}

      <div style={{ flex: 1 }} />
      <div style={{ padding: '12px', borderTop: `1px solid ${p.border}`, marginTop: 8 }}>
        <div style={{ fontSize: 11, color: p.textMuted, lineHeight: 1.5 }}>
          Cifrado de extremo a extremo.<br />Tus datos son solo tuyos.
        </div>
      </div>
    </nav>
  );

  if (!comoCajon) return contenido;

  return (
    <React.Fragment>
      {abierto && (
        <div onClick={onCerrar} style={{
          position: 'fixed', inset: 0, zIndex: 50,
          background: 'rgba(15,23,42,0.45)', animation: 'vitaFade 160ms ease',
        }} />
      )}
      <div style={{
        position: 'fixed', top: 0, bottom: 0, left: 0, zIndex: 51,
        transform: abierto ? 'translateX(0)' : 'translateX(-100%)',
        transition: 'transform 200ms ease',
        boxShadow: abierto ? '0 8px 24px rgba(15,23,42,0.18)' : 'none',
      }}>
        {contenido}
      </div>
    </React.Fragment>
  );
}

// ── Navegación inferior (móvil) ─────────────────────────────────
function AppBottomNav({ t, activo, onNavegar }) {
  const p = t.paleta;
  const items = NAV_PRINCIPAL.filter((i) => i.enMovil);

  return (
    <nav style={{
      position: 'sticky', bottom: 0, zIndex: 30, flexShrink: 0,
      display: 'flex', alignItems: 'stretch',
      background: p.surface,
      borderTop: `1px solid ${p.border}`,
      paddingBottom: 'env(safe-area-inset-bottom, 0px)',
    }}>
      {items.map((item) => {
        const esActivo = activo === item.id;
        return (
          <button key={item.id} onClick={() => onNavegar(item.flow)} style={{
            flex: 1, border: 'none', background: 'transparent', cursor: 'pointer',
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
            padding: '9px 2px 8px',
            color: esActivo ? p.primary : p.textMuted,
            WebkitTapHighlightColor: 'transparent',
          }}>
            {Icon[item.icono] ? Icon[item.icono]({ s: 21, c: esActivo ? p.primary : p.textMuted }) : null}
            <span style={{ fontSize: 10.5, fontWeight: esActivo ? 600 : 500, whiteSpace: 'nowrap' }}>
              {item.iconoCorto || item.label}
            </span>
          </button>
        );
      })}
    </nav>
  );
}

// ── Shell ───────────────────────────────────────────────────────
// `ancho` controla el contenedor: 'normal' centra a 1200px, 'completo' deja
// que la pantalla gestione su propio ancho (lo usa el chat, que necesita
// ocupar todo el alto disponible).
function AppShell({ t, activo, titulo, notifCount, pacienteNombre,
  onNavegar, onOpenNotifs, onToggleTheme, onOpenProfile, ancho = 'normal', children }) {
  const p = t.paleta;
  const anchoVentana = useAnchoVentana();
  const [menuAbierto, setMenuAbierto] = React.useState(false);

  const esMovil = anchoVentana < 768;
  const sidebarFija = anchoVentana >= 1024;
  const sidebarComoCajon = !esMovil && !sidebarFija;

  React.useEffect(() => { if (sidebarFija) setMenuAbierto(false); }, [sidebarFija]);

  return (
    <div style={{
      minHeight: '100vh', height: '100vh',
      display: 'flex', flexDirection: 'column',
      background: p.bg, color: p.text,
      fontFamily: "'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif",
    }}>
      <AppHeader t={t} titulo={titulo} notifCount={notifCount}
        pacienteNombre={pacienteNombre}
        onOpenNotifs={onOpenNotifs} onToggleTheme={onToggleTheme}
        onOpenProfile={onOpenProfile}
        onToggleMenu={() => setMenuAbierto((v) => !v)}
        compacto={sidebarComoCajon} />

      <div style={{ flex: 1, display: 'flex', minHeight: 0 }}>
        {sidebarFija && <AppSidebar t={t} activo={activo} onNavegar={onNavegar} comoCajon={false} />}
        {sidebarComoCajon && (
          <AppSidebar t={t} activo={activo} onNavegar={onNavegar}
            comoCajon abierto={menuAbierto} onCerrar={() => setMenuAbierto(false)} />
        )}

        <main style={{
          flex: 1, minWidth: 0, minHeight: 0,
          overflowY: ancho === 'completo' ? 'hidden' : 'auto',
          display: 'flex', flexDirection: 'column',
        }}>
          {ancho === 'completo' ? children : (
            <div style={{ width: '100%', maxWidth: 1200, margin: '0 auto', padding: esMovil ? '16px 16px 24px' : '24px 28px 40px' }}>
              {children}
            </div>
          )}
        </main>
      </div>

      {esMovil && <AppBottomNav t={t} activo={activo} onNavegar={onNavegar} />}
    </div>
  );
}

// ── Piezas reutilizables del sistema ────────────────────────────
function Card({ t, children, padding = 18, style = {} }) {
  const p = t.paleta;
  return (
    <div style={{
      background: p.surface,
      border: `1px solid ${p.border}`,
      borderRadius: 14,
      padding,
      ...style,
    }}>{children}</div>
  );
}

function CardTitle({ t, children, accion }) {
  const p = t.paleta;
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
      <span style={{ width: 3, height: 15, borderRadius: 2, background: p.primary, flexShrink: 0 }} />
      <h3 style={{ margin: 0, fontSize: 14, fontWeight: 600, color: p.text }}>{children}</h3>
      {accion && <div style={{ marginLeft: 'auto' }}>{accion}</div>}
    </div>
  );
}

function Button({ t, children, onClick, variante = 'primario', ancho, size = 'md', disabled }) {
  const p = t.paleta;
  const [hover, setHover] = React.useState(false);

  const estilos = {
    primario: { bg: hover ? p.primaryDark : p.primary, color: p.onPrimary, border: 'none' },
    secundario: { bg: hover ? p.primarySoft : p.surface, color: p.primaryDark, border: `1px solid ${p.border}` },
    fantasma: { bg: hover ? p.primarySoft : 'transparent', color: p.primaryDark, border: 'none' },
    peligro: { bg: hover ? '#B91C1C' : p.danger, color: '#fff', border: 'none' },
  }[variante] || {};

  const alturas = { sm: 34, md: 42, lg: 48 };

  return (
    <button onClick={onClick} disabled={disabled}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        height: alturas[size], padding: `0 ${size === 'sm' ? 12 : 18}px`,
        width: ancho ? '100%' : 'auto',
        background: estilos.bg, color: estilos.color, border: estilos.border,
        borderRadius: 10, cursor: disabled ? 'not-allowed' : 'pointer',
        fontSize: size === 'sm' ? 13 : 14, fontWeight: 600,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
        opacity: disabled ? 0.5 : 1,
        transition: 'background 120ms ease',
      }}>{children}</button>
  );
}

/** Rejilla responsive automática: se adapta sin media queries. */
function Grid({ children, min = 260, gap = 16 }) {
  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: `repeat(auto-fit, minmax(min(${min}px, 100%), 1fr))`,
      gap,
    }}>{children}</div>
  );
}

function Badge({ t, children, tono = 'neutro' }) {
  const p = t.paleta;
  const tonos = {
    neutro: { bg: p.bg, color: p.textMuted, border: p.border },
    exito: { bg: t.dark ? 'rgba(74,222,128,0.14)' : '#DCFCE7', color: p.success, border: 'transparent' },
    aviso: { bg: t.dark ? 'rgba(251,191,36,0.14)' : '#FEF3C7', color: t.dark ? p.warning : '#B45309', border: 'transparent' },
    error: { bg: t.dark ? 'rgba(248,113,113,0.14)' : '#FEE2E2', color: p.danger, border: 'transparent' },
    marca: { bg: p.primarySoft, color: p.primaryDark, border: 'transparent' },
  }[tono] || {};
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 5,
      padding: '3px 9px', borderRadius: 999,
      background: tonos.bg, color: tonos.color, border: `1px solid ${tonos.border}`,
      fontSize: 11.5, fontWeight: 600, whiteSpace: 'nowrap',
    }}>{children}</span>
  );
}

function PageTitle({ t, children, sub, acciones }) {
  const p = t.paleta;
  return (
    <div style={{ display: 'flex', alignItems: 'flex-end', gap: 16, flexWrap: 'wrap', marginBottom: 20 }}>
      <div style={{ minWidth: 0 }}>
        <h1 style={{ margin: 0, fontSize: 24, fontWeight: 700, color: p.text, letterSpacing: -0.3 }}>{children}</h1>
        {sub && <p style={{ margin: '5px 0 0', fontSize: 14, color: p.textMuted }}>{sub}</p>}
      </div>
      {acciones && <div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>{acciones}</div>}
    </div>
  );
}

Object.assign(window, {
  NAV_PRINCIPAL, AppShell, AppHeader, AppSidebar, AppBottomNav,
  Card, CardTitle, Button, Grid, Badge, PageTitle, useAnchoVentana,
});