import { useAuth } from './auth/AuthContext'
import AuthScreen from './screens/AuthScreen'
import ChatApp from './screens/ChatApp'

function Splash() {
  return (
    <div className="flex min-h-full flex-col items-center justify-center gap-5">
      <div className="relative flex h-20 w-20 items-center justify-center">
        <span className="absolute inset-0 animate-ping rounded-3xl bg-accent/20" aria-hidden="true" />
        <span className="relative flex h-16 w-16 items-center justify-center rounded-3xl bg-gradient-to-br from-accent to-accent-strong text-white shadow-2xl shadow-accent/30">
          <svg viewBox="0 0 24 24" className="h-8 w-8" fill="none" aria-hidden="true">
            <path
              d="M4 12.5h3l2-5 3.2 9 2.3-6 1.5 2H20"
              stroke="currentColor"
              strokeWidth="1.9"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
          </svg>
        </span>
      </div>
      <div className="text-center">
        <p className="font-display text-xl font-bold tracking-tight text-fg">Пульс</p>
        <p className="mt-1 text-sm text-muted">Подключаемся…</p>
      </div>
    </div>
  )
}

export default function App() {
  const { user, loading } = useAuth()

  if (loading) return <Splash />
  if (!user) return <AuthScreen />
  return <ChatApp user={user} />
}