"use client";
import { useEffect, useState } from "react";
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";
import Card from "../components/Card";
import Modal from "../components/Modal";
import axios from "axios";
import { useAuthState } from "react-firebase-hooks/auth";
import { auth } from "@/app/firebase/config";
import { useRouter } from "next/navigation";

const Search = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [selectedCardId, setSelectedCardId] = useState<string | null>(null);
  const [data, setData] = useState<any[]>([]);
  const [searchQuery, setSearchQuery] = useState<string>("");
  const [loading, setLoading] = useState<boolean>(true); // Add loading state
  const [isAdmin, setIsAdmin] = useState(false);

  const [user] = useAuthState(auth);
  const router = useRouter();

  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-custom-data`
        );
        setData(response.data);
      } catch (error) {
        console.error("Error fetching data:", error);
      } finally {
        setLoading(false); // Hide spinner once data is loaded or an error occurs
      }
    };

    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-custom-data/${selectedCardId}`
        );
        // Refresh data after successful deletion
        const response = await axios.get(
          `${process.env.NEXT_PUBLIC_RENDER_LINK}/get-custom-data`
        );
        setData(response.data);
      } catch (error) {
        console.error("Error deleting item:", error);
      }
    }
    setIsModalOpen(false);
  };

  // Filter the data based on the search query
  const filteredData = data.filter(
    (item) =>
      item.C1.toLowerCase().includes(searchQuery.toLowerCase()) ||
      item.I6.toLowerCase().includes(searchQuery.toLowerCase())
  );

  return (
    <div>
      <Navbar isShow={false} toggleRightSidePage={() => {}}/>

      {/* 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>

      {/* Display loading spinner if data is still being fetched */}
      {loading ? (
        <div className="flex justify-center">
          <span className="loading loading-spinner loading-lg text-primary"></span>
        </div>
      ) : (
        <div className="flex flex-wrap justify-center">
          {/* Cards */}
          {filteredData.map((item) => (
            <div key={item._id} className="p-2">
              <Card
                showTittle={false}
                showUpdateButton={true}
                showAddButton={false}
                showCreateDeleteButton={false}
                showSearchDeleteButton={true}
                showReviewButton={true}
                title={item.C1}
                emirNo={item.I6}
                id={item._id}
                onDelete={handleDeleteClick} // Pass the handleDeleteClick callback
                isAdmin={isAdmin}
              />
            </div>
          ))}
        </div>
      )}

      <Footer />
      <Modal
        returnHome={false}
        warningMessage={"Bu formu silmek istediğinizden emin misiniz?"}
        isOpen={isModalOpen}
        onClose={handleCloseModal}
        onConfirm={handleConfirmDelete}
        link="/search"
      />
    </div>
  );
};

export default Search;