import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { motion } from "framer-motion";

// 🔥 Firebase
import { initializeApp } from "firebase/app";
import {
  getAuth,
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword
} from "firebase/auth";

// ⚠️ Replace with your Firebase config
const firebaseConfig = {
  apiKey: "AIzaSyBysYblJvIJ5ycv8HETsfMv-L9jLLYunA4",
  authDomain: "compsjid-40c98.firebaseapp.com",
  projectId: "compsjid-40c98",
  storageBucket: "compsjid-40c98.firebasestorage.app",
  messagingSenderId: "557714116982",
  appId: "1:557714116982:web:cbbc125116f79572ef2a57"
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

export default function CompsjidUI() {
  const [authMode, setAuthMode] = useState(null);
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [name, setName] = useState("");
  const [role, setRole] = useState("Étudiant");
  const [message, setMessage] = useState("");

  // 🔐 Register
  const handleRegister = async (e) => {
    e.preventDefault();
    try {
      await createUserWithEmailAndPassword(auth, email, password);
      setMessage("Compte créé avec succès ✅");
      setAuthMode(null);
    } catch (error) {
      setMessage(error.message);
    }
  };

  // 🔐 Login
  const handleLogin = async (e) => {
    e.preventDefault();
    try {
      await signInWithEmailAndPassword(auth, email, password);
      setMessage("Connexion réussie ✅");
      setAuthMode(null);
    } catch (error) {
      setMessage(error.message);
    }
  };

  return (
    <div className="min-h-screen bg-gray-50 text-gray-900">
      {/* Navbar */}
      <nav className="flex justify-between items-center px-8 py-4 bg-white shadow-sm">
        <h1 className="text-2xl font-bold">COMPSJID</h1>
        <div className="space-x-6 hidden md:block">
          <a href="#">Accueil</a>
          <a href="#">À propos</a>
          <a href="#">Boutique</a>
          <a href="#">Collaboration</a>
          <a href="#">Contact</a>
        </div>
        <div className="flex gap-2">
          <Button variant="outline" onClick={() => setAuthMode("login")}>Connexion</Button>
          <Button onClick={() => setAuthMode("register")}>Inscription</Button>
        </div>
      </nav>

      {/* Auth Modal */}
      {authMode && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
          <div className="bg-white rounded-2xl shadow-xl w-full max-w-md p-6 relative">
            <h2 className="text-2xl font-bold mb-4 text-center">
              {authMode === "login" ? "Connexion" : "Créer un compte"}
            </h2>

            <form
              className="space-y-4"
              onSubmit={authMode === "login" ? handleLogin : handleRegister}
            >
              {authMode === "register" && (
                <input
                  type="text"
                  placeholder="Nom complet"
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                  className="w-full p-3 border rounded-lg"
                />
              )}

              <input
                type="email"
                placeholder="Email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                className="w-full p-3 border rounded-lg"
                required
              />

              <input
                type="password"
                placeholder="Mot de passe"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                className="w-full p-3 border rounded-lg"
                required
              />

              {authMode === "register" && (
                <select
                  className="w-full p-3 border rounded-lg"
                  value={role}
                  onChange={(e) => setRole(e.target.value)}
                >
                  <option>Étudiant</option>
                  <option>Enseignant</option>
                </select>
              )}

              <Button className="w-full" type="submit">
                {authMode === "login" ? "Se connecter" : "S'inscrire"}
              </Button>
            </form>

            {message && (
              <p className="text-center text-sm mt-3 text-gray-600">{message}</p>
            )}

            <div className="text-center mt-4">
              {authMode === "login" ? (
                <p>
                  Pas de compte ?{" "}
                  <span
                    className="text-blue-600 cursor-pointer"
                    onClick={() => setAuthMode("register")}
                  >
                    S'inscrire
                  </span>
                </p>
              ) : (
                <p>
                  Déjà un compte ?{" "}
                  <span
                    className="text-blue-600 cursor-pointer"
                    onClick={() => setAuthMode("login")}
                  >
                    Connexion
                  </span>
                </p>
              )}
            </div>

            <button
              className="absolute top-4 right-4 text-gray-500"
              onClick={() => setAuthMode(null)}
            >
              ✕
            </button>
          </div>
        </div>
      )}

      {/* Hero */}
      <section className="text-center py-20 px-6 bg-gradient-to-r from-blue-600 to-blue-400 text-white">
        <motion.h2
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          className="text-4xl md:text-5xl font-bold mb-4"
        >
          Ensemble vers le savoir et l’innovation
        </motion.h2>
        <p className="mb-8 text-lg">Plateforme éducative marocaine 100%</p>
      </section>

      {/* Footer */}
      <footer className="py-8 px-6 bg-gray-900 text-gray-300 text-center">
        <p>© 2026 COMPSJID – Tous droits réservés</p>
      </footer>
    </div>
  );
}