import { useEffect, useMemo, useState } from 'react'
import './App.css'

type UserProfile = {
  sub: string
  name?: string
  email?: string
}

function App() {
  const [loading, setLoading] = useState(true)
  const [user, setUser] = useState<UserProfile | null>(null)
  const [error, setError] = useState<string | null>(null)

  const apiBase = useMemo(() => import.meta.env.VITE_API_BASE_URL ?? '', [])

  useEffect(() => {
    const loadMe = async () => {
      try {
        const response = await fetch(`${apiBase}/api/me`, {
          credentials: 'include',
        })

        if (response.status === 401) {
          setUser(null)
          return
        }

        if (!response.ok) {
          throw new Error(`Request failed with status ${response.status}`)
        }

        const data = await response.json()
        setUser(data.user ?? null)
      } catch (err) {
        setError(err instanceof Error ? err.message : 'Failed to load session')
      } finally {
        setLoading(false)
      }
    }

    void loadMe()
  }, [apiBase])

  const loginUrl = `${apiBase}/api/login`
  const logoutUrl = `${apiBase}/api/logout`

  return (
    <main className="page">
      <section className="card">
        <h1>OIDC Login</h1>
        <p className="subtitle">Авторизация обрабатывается на Express сервере.</p>

        {loading && <p>Проверяю сессию...</p>}
        {error && <p className="error">Ошибка: {error}</p>}

        {!loading && !user && (
          <a className="btn" href={loginUrl}>
            Войти через OIDC
          </a>
        )}

        {!loading && user && (
          <div className="profile">
            <p>
              <strong>ID:</strong> {user.sub}
            </p>
            {user.name && (
              <p>
                <strong>Имя:</strong> {user.name}
              </p>
            )}
            {user.email && (
              <p>
                <strong>Email:</strong> {user.email}
              </p>
            )}
            <a className="btn ghost" href={logoutUrl}>
              Выйти
            </a>
          </div>
        )}
      </section>
    </main>
  )
}

export default App