// Screens · 00 · Login — picker de cuenta para el demo (3 fixtures)
const { useState } = React;

// ═══════════════════════════════════════════════════════════
// 00 · Login
// ═══════════════════════════════════════════════════════════
function S00Login() {
  const [, set] = useAtlasState();
  const [hoverId, setHoverId] = useState(null);
  const [focusId, setFocusId] = useState(null);

  const users = AtlasData.users;

  // Avatar tone → background + initials color
  const toneStyles = {
    warm:   { bg: 'hsl(var(--atlas-warm-400))',   fg: T.paper0 },
    cool:   { bg: 'hsl(var(--atlas-cool-500))',   fg: 'white'  },
    accent: { bg: 'hsl(var(--atlas-accent-500))', fg: 'white'  },
  };

  function selectUser(user) {
    set({
      currentUserId: user.id,
      currentCourseId: null,
      currentSessionId: null,
      namingChoice: null,
      debtSigned: false,
      saldoComplete: false,
      submitted: false,
      reflectionDone: false,
      postSession: false,
      screen: user.id === 'mariana' ? 'onboarding' : 'home',
    });
  }

  return (
    <div style={{
      height: '100%', display: 'flex', flexDirection: 'column',
      alignItems: 'center', justifyContent: 'center', padding: 40,
    }}>
      <div style={{ width: '100%', maxWidth: 720 }}>
        {/* Logo */}
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 28 }}>
          <AtlasLogo size={22} />
        </div>

        {/* Headline */}
        <h1 style={{
          fontFamily: T.serif, fontSize: '2rem', fontWeight: 500,
          color: T.ink9, lineHeight: 1.2, margin: '0 0 12px',
          textAlign: 'center',
          fontVariationSettings: '"opsz" 48, "GRAD" 30',
          animation: 'fadeSlideUp 320ms ease-out both',
        }}>
          Entra como tú.
        </h1>

        {/* Subtitle */}
        <p style={{
          fontFamily: T.sans, fontSize: '0.9375rem', color: T.ink5,
          textAlign: 'center', margin: 0, lineHeight: 1.5,
          animation: 'fadeSlideUp 320ms ease-out 60ms both',
        }}>
          Selecciona tu cuenta para retomar donde dejaste.
        </p>

        {/* Grid de cuentas */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr 1fr',
          gap: 16, marginTop: 36,
        }}>
          {users.map((user, i) => {
            const tone = toneStyles[user.avatarTone] || toneStyles.cool;
            const isHover = hoverId === user.id;
            const isFocus = focusId === user.id;
            const isRiesgo = user.quadrant === 'riesgo';

            return (
              <button
                key={user.id}
                type="button"
                onClick={() => selectUser(user)}
                onMouseEnter={() => setHoverId(user.id)}
                onMouseLeave={() => setHoverId(null)}
                onFocus={() => setFocusId(user.id)}
                onBlur={() => setFocusId(null)}
                style={{
                  // Reset button defaults
                  textAlign: 'left', cursor: 'pointer', font: 'inherit',
                  // Card look
                  background: T.paper1,
                  border: `1px solid ${T.paper3}`,
                  borderRadius: 10,
                  padding: '22px 20px',
                  boxShadow: isHover ? 'var(--atlas-shadow-md)' : 'var(--atlas-shadow-sm)',
                  transform: isHover ? 'translateY(-2px)' : 'translateY(0)',
                  transition: 'transform 180ms ease-out, box-shadow 180ms ease-out, border-color 180ms ease-out',
                  outline: isFocus ? `2px solid ${T.acc5}` : 'none',
                  outlineOffset: isFocus ? 2 : 0,
                  animation: `fadeSlideUp 320ms ease-out ${i * 80 + 100}ms both`,
                  display: 'flex', flexDirection: 'column', gap: 0,
                }}
              >
                {/* Avatar + nombre */}
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 10 }}>
                  <div style={{
                    width: 48, height: 48, borderRadius: '50%',
                    background: tone.bg,
                    color: tone.fg,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontFamily: T.mono, fontWeight: 700, fontSize: '0.875rem',
                    flexShrink: 0,
                  }}>
                    {user.initials}
                  </div>
                  <div style={{ minWidth: 0 }}>
                    <div style={{
                      fontFamily: T.sans, fontWeight: 600, fontSize: '0.9375rem',
                      color: T.ink9, lineHeight: 1.3,
                      overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
                    }}>
                      {user.name}
                    </div>
                    <div style={{
                      fontFamily: T.sans, fontSize: '0.8125rem', color: T.ink5,
                      lineHeight: 1.4, marginTop: 2,
                    }}>
                      {user.program} · {user.semester}
                    </div>
                  </div>
                </div>

                {/* Divider */}
                <div style={{
                  height: 1, background: T.paper3, margin: '10px 0',
                }}/>

                {/* Chip de cuadrante */}
                <div style={{ marginBottom: 8 }}>
                  {isRiesgo ? (
                    <span style={{
                      fontFamily: T.mono, fontSize: '0.75rem', fontWeight: 500,
                      background: 'hsl(var(--atlas-critical-50))',
                      border: '1px solid hsl(var(--atlas-critical-300))',
                      color: 'hsl(var(--atlas-critical-700))',
                      borderRadius: 4, padding: '3px 8px',
                      display: 'inline-block',
                    }}>
                      cuadrante Riesgo
                    </span>
                  ) : (
                    <Chip>cohorte MAT-PMD</Chip>
                  )}
                </div>

                {/* Meta tiny */}
                <div style={{
                  fontFamily: T.mono, fontSize: '0.6875rem', color: T.ink4,
                  lineHeight: 1.4,
                }}>
                  {user.openDebtMinutes > 0
                    ? `${user.openDebtMinutes} min de deuda abierta`
                    : 'sin deuda abierta'}
                </div>
              </button>
            );
          })}
        </div>

        {/* Footer discreto */}
        <p style={{
          fontFamily: T.mono, fontSize: '0.6875rem', color: T.ink4,
          textAlign: 'center', marginTop: 36, marginBottom: 0,
          animation: 'fadeIn 400ms ease-out 400ms both',
        }}>
          demo · atlas · pitch-jueves 2026-04-23
        </p>
      </div>
    </div>
  );
}

Object.assign(window, { S00Login });