import { useAuth } from "@/_core/hooks/useAuth";
import { useState } from "react";
import AdminDashboard from "./AdminDashboard";
import ClientLogin from "./ClientLogin";
import MusicPlayer from "./MusicPlayer";
import { Button } from "@/components/ui/button";
import { startLogin } from "@/const";

export default function Home() {
  const { user, loading, isAuthenticated } = useAuth();
  const [clientCredentials, setClientCredentials] = useState<{ username: string; password: string } | null>(null);

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-purple-600"></div>
      </div>
    );
  }

  // Admin panel
  if (isAuthenticated && user?.role === "admin") {
    return <AdminDashboard />;
  }

  // Client music player
  if (clientCredentials) {
    return (
      <MusicPlayer
        credentials={clientCredentials}
        onLogout={() => setClientCredentials(null)}
      />
    );
  }

  // Client login
  if (!isAuthenticated) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 flex flex-col items-center justify-center p-4">
        <div className="max-w-md w-full">
          <div className="text-center mb-8">
            <h1 className="text-4xl font-bold text-slate-900 mb-2">Xtream Music System</h1>
            <p className="text-slate-600">Escolha como deseja acessar</p>
          </div>

          <div className="space-y-4">
            <Button
              onClick={() => startLogin()}
              className="w-full h-12 text-lg bg-purple-600 hover:bg-purple-700"
            >
              Painel Administrativo
            </Button>
            <Button
              onClick={() => setClientCredentials({ username: "", password: "" })}
              variant="outline"
              className="w-full h-12 text-lg"
            >
              Área do Cliente
            </Button>
          </div>
        </div>
      </div>
    );
  }

  // Default fallback
  return (
    <ClientLogin
      onLoginSuccess={(credentials) => setClientCredentials(credentials)}
    />
  );
}
