// HomeHub — Auth context + Login screen

// ── API helpers ──────────────────────────────────────────────────────────────

async function apiRequest(path, options = {}) {
  const res = await fetch(`/api${path}`, {
    credentials: 'include',
    headers: { 'Content-Type': 'application/json', ...options.headers },
    ...options,
  });
  if (res.status === 401) {
    window.dispatchEvent(new Event('auth:logout'));
    throw new Error('Unauthorized');
  }
  if (!res.ok) {
    const err = await res.json().catch(() => ({ error: res.statusText }));
    throw new Error(err.error || 'Request failed');
  }
  return res.json();
}

const authApi = {
  me:    ()         => apiRequest('/auth/me'),
  login: (name, pin) => apiRequest('/auth/login', { method: 'POST', body: JSON.stringify({ name, pin }) }),
  logout: ()        => apiRequest('/auth/logout', { method: 'POST' }),
  usersPublic: ()   => fetch('/api/auth/users-public', { credentials: 'include' }).then(r => r.json()),
};

// ── Auth Context ─────────────────────────────────────────────────────────────

const AuthContext = React.createContext(null);
const useAuth = () => React.useContext(AuthContext);

function AuthProvider({ children }) {
  const [user, setUser] = React.useState(null);
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    let active = true;
    authApi.me()
      .then(u => { if (active) setUser(u); })
      .catch(() => { if (active) setUser(null); })
      .finally(() => { if (active) setLoading(false); });

    const handleLogout = () => setUser(null);
    window.addEventListener('auth:logout', handleLogout);
    return () => {
      active = false;
      window.removeEventListener('auth:logout', handleLogout);
    };
  }, []);

  const login = async (name, pin) => {
    const u = await authApi.login(name, pin);
    setUser(u);
    return u;
  };

  const logout = async () => {
    try { await authApi.logout(); } finally { setUser(null); }
  };

  if (loading) {
    return (
      <div className="hh-auth-splash" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100dvh', background: 'var(--hh-bg)' }}>
        <div className="hh-auth-spinner" />
      </div>
    );
  }

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

// ── Login Screen ─────────────────────────────────────────────────────────────

function LoginScreen() {
  const { login } = useAuth();
  const [users, setUsers] = React.useState([]);
  const [selected, setSelected] = React.useState(null);
  const [pin, setPin] = React.useState('');
  const [error, setError] = React.useState('');
  const [loading, setLoading] = React.useState(false);

  React.useEffect(() => {
    authApi.usersPublic()
      .then(setUsers)
      .catch(() => {
        setUsers([
          { id: 1, name: 'raphael', avatar: '👨‍💻' },
          { id: 2, name: 'rona',    avatar: '👩' },
          { id: 3, name: 'wim',     avatar: '👦' },
        ]);
      });
  }, []);

  const attemptLogin = (name, pinValue) => {
    setLoading(true);
    setError('');
    login(name, pinValue).catch(() => {
      setError('Wrong PIN. Try again.');
      setPin('');
      setLoading(false);
    });
  };

  const handlePinInput = (digit) => {
    if (loading) return;
    if (digit === 'del') { setPin(p => p.slice(0, -1)); return; }
    const next = pin + digit;
    if (next.length > 4) return;
    setPin(next);
    if (next.length === 4 && selected) {
      attemptLogin(selected, next);
    }
  };

  const selectUser = (name) => {
    setSelected(name);
    setPin('');
    setError('');
  };

  const UserAvatar = ({ u, size = 44 }) => {
    const [imgFailed, setImgFailed] = React.useState(false);
    if (u.photo_url && !imgFailed) {
      return (
        <img
          src={u.photo_url}
          alt={u.name}
          style={{ width: size, height: size, borderRadius: '50%', objectFit: 'cover' }}
          onError={() => setImgFailed(true)}
        />
      );
    }
    return (
      <span style={{ fontSize: size * 0.72, lineHeight: 1 }}>{u.avatar || u.name[0].toUpperCase()}</span>
    );
  };

  return (
    <div className="hh-login-screen">
      <div className="hh-login-card">
        <h1 className="hh-login-title">HomeHub</h1>
        <p className="hh-login-sub">Who's there?</p>

        <div className="hh-user-picker">
          {users.map(u => (
            <button
              key={u.name}
              className={`hh-user-btn${selected === u.name ? ' active' : ''}`}
              onClick={() => selectUser(u.name)}
            >
              <div className="hh-user-avatar-wrap"><UserAvatar u={u} /></div>
              <span className="hh-user-name">{u.name}</span>
            </button>
          ))}
        </div>

        {selected && (
          <div className="hh-pin-section">
            <div className="hh-pin-dots">
              {[0, 1, 2, 3].map(i => (
                <div key={i} className={`hh-pin-dot${i < pin.length ? ' filled' : ''}`} />
              ))}
            </div>

            <div className="hh-pin-pad">
              {[1, 2, 3, 4, 5, 6, 7, 8, 9, null, 0, 'del'].map((d, i) => (
                <button
                  key={i}
                  className={`hh-pin-key${d === null ? ' invisible' : ''}`}
                  disabled={d === null || loading}
                  onClick={() => handlePinInput(d === null ? null : String(d))}
                >
                  {d === 'del' ? '⌫' : d === null ? '' : d}
                </button>
              ))}
            </div>

            {error && <p className="hh-pin-error">{error}</p>}
          </div>
        )}
      </div>
    </div>
  );
}