import React, { useState, useEffect } from "react";
import { initializeApp } from "firebase/app";
import {
  getAuth,
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  onAuthStateChanged,
  signOut,
} from "firebase/auth";
import {
  getFirestore,
  collection,
  addDoc,
  getDocs,
  query,
  where,
  deleteDoc,
  doc,
} from "firebase/firestore";
import {
  getStorage,
  ref,
  uploadBytes,
  getDownloadURL,
  deleteObject,
} from "firebase/storage";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { UploadCloud, FolderPlus, LogOut, Trash2, Moon, Sun } from "lucide-react";
import { motion } from "framer-motion";

// 🔥 GANTI DENGAN CONFIG FIREBASE KAMU
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID",
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const storage = getStorage(app);

const MAX_STORAGE_MB = 50; // 📦 batas kapasitas per user

export default function CloudStorageFull() {
  const [user, setUser] = useState(null);
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [files, setFiles] = useState([]);
  const [folders, setFolders] = useState([]);
  const [currentFolder, setCurrentFolder] = useState("root");
  const [search, setSearch] = useState("");
  const [darkMode, setDarkMode] = useState(false);
  const [usedStorage, setUsedStorage] = useState(0);

  useEffect(() => {
    onAuthStateChanged(auth, (u) => {
      if (u) {
        setUser(u);
        loadFiles(u.uid);
        loadFolders(u.uid);
      } else {
        setUser(null);
      }
    });
  }, []);

  const register = async () => {
    await createUserWithEmailAndPassword(auth, email, password);
  };

  const login = async () => {
    await signInWithEmailAndPassword(auth, email, password);
  };

  const logout = async () => {
    await signOut(auth);
  };

  const loadFiles = async (uid) => {
    const q = query(collection(db, "files"), where("uid", "==", uid));
    const snapshot = await getDocs(q);
    const data = snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() }));
    setFiles(data);
    const total = data.reduce((acc, f) => acc + f.sizeMB, 0);
    setUsedStorage(total);
  };

  const loadFolders = async (uid) => {
    const q = query(collection(db, "folders"), where("uid", "==", uid));
    const snapshot = await getDocs(q);
    setFolders(snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() })));
  };

  const createFolder = async () => {
    const name = prompt("Nama folder:");
    if (!name) return;
    await addDoc(collection(db, "folders"), {
      uid: user.uid,
      name,
    });
    loadFolders(user.uid);
  };

  const uploadFile = async (e) => {
    const file = e.target.files[0];
    if (!file) return;

    const sizeMB = file.size / 1024 / 1024;
    if (usedStorage + sizeMB > MAX_STORAGE_MB) {
      alert("Storage penuh! Maks 50MB.");
      return;
    }

    const storageRef = ref(storage, `${user.uid}/${file.name}`);
    await uploadBytes(storageRef, file);
    const url = await getDownloadURL(storageRef);

    await addDoc(collection(db, "files"), {
      uid: user.uid,
      name: file.name,
      url,
      folder: currentFolder,
      sizeMB,
    });

    loadFiles(user.uid);
  };

  const deleteFile = async (file) => {
    await deleteObject(ref(storage, `${user.uid}/${file.name}`));
    await deleteDoc(doc(db, "files", file.id));
    loadFiles(user.uid);
  };

  if (!user) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-100">
        <Card className="p-6 w-96 rounded-2xl shadow-xl">
          <CardContent className="flex flex-col gap-4">
            <h1 className="text-2xl font-bold text-center">Login / Register</h1>
            <Input placeholder="Email" onChange={(e) => setEmail(e.target.value)} />
            <Input
              type="password"
              placeholder="Password"
              onChange={(e) => setPassword(e.target.value)}
            />
            <Button onClick={login}>Login</Button>
            <Button variant="secondary" onClick={register}>
              Register
            </Button>
          </CardContent>
        </Card>
      </div>
    );
  }

  const filteredFiles = files.filter(
    (f) =>
      f.folder === currentFolder &&
      f.name.toLowerCase().includes(search.toLowerCase())
  );

  return (
    <div className={darkMode ? "dark bg-gray-900 text-white" : "bg-gray-100"}>
      <div className="p-6 max-w-6xl mx-auto min-h-screen">
        <div className="flex justify-between items-center mb-6">
          <h1 className="text-3xl font-bold">My Drive</h1>
          <div className="flex gap-3">
            <Button onClick={() => setDarkMode(!darkMode)}>
              {darkMode ? <Sun size={18} /> : <Moon size={18} />}
            </Button>
            <Button onClick={logout} variant="destructive">
              <LogOut size={18} />
            </Button>
          </div>
        </div>

        <div className="mb-4 flex gap-3">
          <Input
            placeholder="Search file..."
            onChange={(e) => setSearch(e.target.value)}
          />
          <Button onClick={createFolder}>
            <FolderPlus size={18} />
          </Button>
          <label>
            <input type="file" hidden onChange={uploadFile} />
            <Button>
              <UploadCloud size={18} />
            </Button>
          </label>
        </div>

        <p className="mb-4 text-sm">
          Storage: {usedStorage.toFixed(2)} MB / {MAX_STORAGE_MB} MB
        </p>

        <div className="flex gap-3 mb-6 flex-wrap">
          <Button
            variant={currentFolder === "root" ? "default" : "secondary"}
            onClick={() => setCurrentFolder("root")}
          >
            Root
          </Button>
          {folders.map((folder) => (
            <Button
              key={folder.id}
              variant={currentFolder === folder.name ? "default" : "secondary"}
              onClick={() => setCurrentFolder(folder.name)}
            >
              {folder.name}
            </Button>
          ))}
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
          {filteredFiles.map((file) => (
            <motion.div key={file.id} whileHover={{ scale: 1.05 }}>
              <Card className="rounded-2xl shadow-lg">
                <CardContent className="p-4">
                  <p className="font-semibold truncate">{file.name}</p>
                  <a
                    href={file.url}
                    target="_blank"
                    rel="noreferrer"
                    className="text-blue-500 text-sm"
                  >
                    Open
                  </a>
                  <Button
                    size="sm"
                    variant="destructive"
                    className="mt-3"
                    onClick={() => deleteFile(file)}
                  >
                    <Trash2 size={16} />
                  </Button>
                </CardContent>
              </Card>
            </motion.div>
          ))}
        </div>
      </div>
    </div>
  );
}