"use client";
import { useEffect, useState } from "react";
import Footer from "./components/Footer";
import Navbar from "./components/Navbar";
import Link from "next/link";
import Card from "./components/Card";
import RightSidePage from "./components/RightSidePage";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
import axios from "axios"; // Import axios for making HTTP requests
import Modal from "./components/Modal";
import { useAuthState } from "react-firebase-hooks/auth";
import { auth } from "@/app/firebase/config";
import { useRouter } from "next/navigation";

export default function Home() {
  const [data, setData] = useState<any[]>([]);
  const [isLoading, setIsLoading] = useState(true); // State for loading indicator
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [selectedCardId, setSelectedCardId] = useState<string | null>(null);
  const [isAdmin, setIsAdmin] = useState(false);
  const [user] = useAuthState(auth);
  const router = useRouter();
  const [searchQuery, setSearchQuery] = useState<string>("");

  const [isRightSidePageVisible, setIsRightSidePageVisible] = useState(false);

  const toggleRightSidePage = () => {
    setIsRightSidePageVisible(!isRightSidePageVisible);
  };

  const filteredData = data.filter((item) =>
    item.C1.toLowerCase().includes(searchQuery.toLowerCase())
  );

  useEffect(() => {
    if (typeof window !== "undefined") {
      const userSession = sessionStorage.getItem("user");

      console.log(user);

      if (!user && !userSession) {
        router.push("/login");
      }

      if (user?.uid === "SNxNSj2V9ChWLpE0TCcT4rrzx6t1") {
        setIsAdmin(true);
      }
    }
  }, [user, router]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get(
          `${process.env.NEXT_PUBLIC_RENDER_LINK}/get-create-data`
        );
        setData(response.data);
      } catch (error) {
        console.error("Error fetching data:", error);
      } finally {
        setIsLoading(false); // Stop loading when data is fetched
      }
    };

    fetchData();
  }, []);

  const handleDeleteClick = (id: string) => {
    setSelectedCardId(id);
    setIsModalOpen(true);
  };

  const handleCloseModal = () => {
    setIsModalOpen(false);
  };

  const handleConfirmDelete = async () => {
    if (selectedCardId) {
      try {
        await axios.delete(
          `${process.env.NEXT_PUBLIC_RENDER_LINK}/delete-create-data/${selectedCardId}`
        );
        // Refresh data after successful deletion
        const response = await axios.get(
          `${process.env.NEXT_PUBLIC_RENDER_LINK}/get-create-data`
        );
        setData(response.data);
      } catch (error) {
        console.error("Error deleting item:", error);
      }
    }
    setIsModalOpen(false);
  };

  return (
    <main className="flex flex-col md:flex-row h-screen">
      {/* Sol taraf */}
      <div className="flex-1 flex flex-col">
        <Navbar toggleRightSidePage={toggleRightSidePage} isShow={true}/>
        {/* Navbar sabit olacak */}
        <div className="flex-1 flex flex-col ">
          {/* İçerik bölümü */}
          <div className="flex-2 p-4">
            <div className="flex flex-col md:flex-row mb-4">
              {isAdmin && (
                <div className="flex-1 mr-2 mb-4 md:mb-0">
                  <h1 className="text-2xl font-bold border-b-2 border-gray-300 pb-2 mb-6 w-full md:w-3/4">
                    İŞ EMRİ OLUŞTUR
                  </h1>
                  <Link href="/create">
                    <button className="btn-wide btn-lg btn btn-outline btn-success">
                      <p className="text-3xl">+</p>
                    </button>
                  </Link>
                </div>
              )}
              <div className="flex-1 ml-2">
                <h1 className="text-2xl font-bold border-b-2 border-gray-300 pb-2 mb-6 w-full md:w-3/4">
                  İŞ EMİRLERİNİ ARA
                </h1>
                <Link href="/search">
                  <button className="btn-wide btn-lg btn btn-outline btn-info">
                    <FontAwesomeIcon
                      icon={faMagnifyingGlass}
                      className="size-5"
                    />
                  </button>
                </Link>
              </div>
            </div>
            <h1 className="text-2xl font-bold border-b-2 border-gray-300 pb-2 mb-6 mt-10 w-full md:w-2/4">
              HAZIR İŞ EMİRLERİ
            </h1>
            {/* Search Bar */}
            <div className="flex justify-center my-4">
              <label className="input input-bordered input-primary flex items-center gap-2">
                <input
                  type="text"
                  className="grow "
                  placeholder="Ara"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                />
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 16 16"
                  fill="currentColor"
                  className="h-4 w-4 opacity-70"
                >
                  <path
                    fillRule="evenodd"
                    d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
                    clipRule="evenodd"
                  />
                </svg>
              </label>
            </div>
            <div className="flex flex-wrap justify-center">
              {/* Loading Spinner */}
              {isLoading ? (
                <span className="loading loading-spinner text-primary"></span>
              ) : (
                // Cards
                filteredData.map((item) => (
                  <div key={item._id} className="p-2 w-full md:w-auto">
                    <Card
                      showTittle={true}
                      showUpdateButton={false}
                      showAddButton={true}
                      showSearchDeleteButton={false}
                      showCreateDeleteButton={true}
                      title={item.C1}
                      id={item._id}
                      showReviewButton={false}
                      emirNo=""
                      onDelete={handleDeleteClick}
                      isAdmin={isAdmin}
                    />
                  </div>
                ))
              )}
            </div>
          </div>
          {/* Sağ tarafta RightSidePage */}
          {isRightSidePageVisible && (
            <div className="md:w-[300px] flex-1 bg-base-300 p-4 mt-4 md:mt-0 absolute right-0 rounded-3xl">
              <RightSidePage />
            </div>
          )}
        </div>
        <Footer /> {/* Footer sabit olacak */}
      </div>
      {/* Modal */}
      <Modal
        returnHome={false}
        warningMessage={"Bu formu silmek istediğinizden emin misiniz?"}
        isOpen={isModalOpen}
        onClose={handleCloseModal}
        onConfirm={handleConfirmDelete}
        link="/"
      />
    </main>
  );
}