"use client";

import { useSession, signIn } from "next-auth/react";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { FaSpinner } from "react-icons/fa"; // For a spinner icon
import { Banner } from "@/components/Banner";
import { Navbar } from "@/components/Navbar";

const DashboardPage = () => {
  const { data: session, status } = useSession();
  const router = useRouter();
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [guilds, setGuilds] = useState<any[]>([]); // Update type as needed

  useEffect(() => {
    if (status === "loading") return;

    if (status === "unauthenticated") {
      signIn();
    } else {
      console.log("Session Data:", session); // Log session data

      const fetchGuilds = async () => {
        try {
          const response = await fetch('/api/user/guilds');
          console.log("API Response Status:", response.status); // Log the response status
          
          if (!response.ok) {
            throw new Error(`Network response was not ok: ${response.statusText}`);
          }
          const data = await response.json();
          console.log('Guild data:', data); // Log the guild data
          setGuilds(data.userGuilds || []); // Set guild data in state
        } catch (error) {
          console.error('Error fetching guilds:', error);
          setError('Failed to load guild data.');
        } finally {
          setLoading(false);
        }
      };

      fetchGuilds();
    }
  }, [status, router, session]);

  if (status === "loading" || loading) {
    return (
      <div className="flex text-white items-center justify-center h-screen bg-black">
        <div className="flex items-center space-x-2">
          <FaSpinner className="animate-spin text-4xl" style={{ color: '#fb1c5b' }} />
          <span className="text-lg">Loading...</span>
        </div>
      </div>
    );
  }

  if (status === "unauthenticated") {
    return (
      <div className="flex items-center justify-center h-screen bg-gray-100">
        <h1 className="text-xl font-bold text-red-600">
          You need to sign in to access the dashboard.
        </h1>
      </div>
    );
  }

  return (
    <div className="bg-black min-h-screen">      
      <Banner />
      <Navbar />
      <main className="container mx-auto p-6 text-white">
        <div className="flex items-center space-x-4 mb-6">
          <img
            src={session?.user?.image || '/default-avatar.png'} // Default image if none is provided
            alt="User Avatar"
            className="w-16 h-16 rounded-full border-2 border-gray-700"
          />
          <div>
            <h1 className="text-2xl font-bold mb-1">Welcome, {session?.user?.name}!</h1>
            <p className="text-gray-400">ID: {session?.user?.id}</p>
          </div>
        </div>
        {error && <p className="text-red-500 mb-4">{error}</p>}
      </main>
    </div>
  );
};

export default DashboardPage;