import React, { useState, useEffect } from "react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { getAuth, signInWithPopup, GoogleAuthProvider, signOut } from "firebase/auth";
import { getFirestore, doc, setDoc, getDoc, collection, getDocs, addDoc } from "firebase/firestore";
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";

const firebaseConfig = {
apiKey: "AIzaSyArAFYXPoZFGs_UT9YqUcFpYZlCuHaNHaM",
authDomain: "careiatric-ddd32.firebaseapp.com",
projectId: "careiatric-ddd32",
storageBucket: "careiatric-ddd32.appspot.com",
messagingSenderId: "429987321537",
appId: "1:429987321537:web:e6ff02754abc3e0b9ce640",
measurementId: "G-HVEVHM4RHB"
};

const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const auth = getAuth(app);
const db = getFirestore(app);

export default function CareiatricMVP() {
const [query, setQuery] = useState("");
const [filteredSchemes, setFilteredSchemes] = useState([]);
const [isLoggedIn, setIsLoggedIn] = useState(false);
const [user, setUser] = useState(null);
const [schemes, setSchemes] = useState([]);
const [isAdmin, setIsAdmin] = useState(false);
const [communityPosts, setCommunityPosts] = useState([]);
const [newPost, setNewPost] = useState("");

useEffect(() => {
const fetchSchemes = async () => {
try {
const querySnapshot = await getDocs(collection(db, "schemes"));
const schemesData = querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
setSchemes(schemesData);
} catch (error) {
console.error("Error fetching schemes:", error);
}
};
fetchSchemes();

const fetchCommunityPosts = async () => {  
  try {  
    const querySnapshot = await getDocs(collection(db, "communityPosts"));  
    const postsData = querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));  
    setCommunityPosts(postsData);  
  } catch (error) {  
    console.error("Error fetching community posts:", error);  
  }  
};  
fetchCommunityPosts();  

}, []);

const handleGoogleLogin = async () => {
const provider = new GoogleAuthProvider();
try {
const result = await signInWithPopup(auth, provider);
const user = result.user;
if (!user || !user.email) {
throw new Error("User email is missing or invalid.");
}
setUser(user);
setIsLoggedIn(true);

  const userRef = doc(db, "users", user.uid);  
  const userSnap = await getDoc(userRef);  
  if (!userSnap.exists()) {  
    await setDoc(userRef, {  
      uid: user.uid,  
      name: user.displayName || "Anonymous",  
      email: user.email,  
      admin: false  
    });  
  }  
} catch (error) {  
  console.error("Login Failed", error.code || "Unknown error", error.message || error);  
  alert(`Login Failed: ${error.code || "Unknown error"} - ${error.message || "No error details"}`);  
}  

};

const handlePostSubmit = async () => {
if (!newPost.trim()) return;
try {
await addDoc(collection(db, "communityPosts"), {
text: newPost,
user: user?.displayName || "Anonymous",
timestamp: new Date()
});
setNewPost("");
} catch (error) {
console.error("Error posting to community:", error);
}
};

return (
<div className="p-6 max-w-3xl mx-auto relative bg-gray-100 min-h-screen text-gray-900">
<h1 className="text-3xl font-bold text-center text-blue-700 mb-6">Careiatric - Find Your Scheme</h1>
<Button onClick={handleGoogleLogin} className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md w-full">Login with Google</Button>
{isLoggedIn && (
<div className="mt-6">
<h2 className="text-xl font-bold">Community Discussions</h2>
<Input
type="text"
placeholder="Share your thoughts..."
value={newPost}
onChange={(e) => setNewPost(e.target.value)}
className="w-full mt-2"
/>
<Button onClick={handlePostSubmit} className="mt-2 bg-green-600 hover:bg-green-700 text-white">Post</Button>
<div className="mt-4">
{communityPosts.map((post) => (
<Card key={post.id} className="mt-2 p-4 border rounded-md bg-white shadow">
<CardContent>
<p className="font-semibold">{post.user}</p>
<p>{post.text}</p>
<Button className="mt-2 bg-red-600 hover:bg-red-700 text-white" size="sm">Report</Button>
</CardContent>
</Card>
))}
</div>
</div>
)}
</div>
);
}