import { useState } from "react";
import { motion } from "framer-motion";
import { MusicalNoteIcon } from "@heroicons/react/24/outline";
import LoginForm from "../components/auth/LoginForm";
import RegisterForm from "../components/auth/RegisterForm";

export default function AuthPage() {
  const [activeTab, setActiveTab] = useState<"login" | "register">("login");

  const handleLoginSuccess = () => {
    // Navigation will be handled by App.tsx checking auth state
  };

  const handleRegisterSuccess = () => {
    setActiveTab("login");
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-purple-900 to-gray-900 flex items-center justify-center p-4">
      <motion.div
        initial={{ opacity: 0, scale: 0.9 }}
        animate={{ opacity: 1, scale: 1 }}
        transition={{ duration: 0.5 }}
        className="w-full max-w-md"
      >
        <div className="bg-gray-900/80 backdrop-blur-xl rounded-2xl shadow-2xl p-8 border border-gray-800">
          <div className="text-center mb-8">
            <motion.div
              initial={{ rotate: 0 }}
              animate={{ rotate: 360 }}
              transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
              className="inline-block"
            >
              <MusicalNoteIcon className="h-16 w-16 text-primary-500 mx-auto mb-4" />
            </motion.div>
            <h1 className="text-4xl font-bold text-white mb-2">PolyPhonia</h1>
            <p className="text-gray-400">Mix Tones, Create Magic</p>
          </div>

          <div className="flex mb-6 bg-gray-800 rounded-lg p-1">
            <button
              onClick={() => setActiveTab("login")}
              className={`flex-1 py-2 px-4 rounded-md font-medium transition-all ${
                activeTab === "login"
                  ? "bg-primary-600 text-white shadow-lg"
                  : "text-gray-400 hover:text-white"
              }`}
            >
              Login
            </button>
            <button
              onClick={() => setActiveTab("register")}
              className={`flex-1 py-2 px-4 rounded-md font-medium transition-all ${
                activeTab === "register"
                  ? "bg-green-600 text-white shadow-lg"
                  : "text-gray-400 hover:text-white"
              }`}
            >
              Register
            </button>
          </div>

          {activeTab === "login" ? (
            <LoginForm onSuccess={handleLoginSuccess} />
          ) : (
            <RegisterForm onSuccess={handleRegisterSuccess} />
          )}
        </div>
      </motion.div>
    </div>
  );
}