"use client";
import React, { useState, useEffect } from "react";
import Modal from "../../components/AddPost"; // Import modal component
import Cookies from 'js-cookie'
import { useGetUserProfileDetailsQuery } from '@/app/store/api/GetUserProfileDetails'
import RoundedShimmer from "@/app/components/RoundedShimmer";
import { showModal } from "@/app/store/Slice/modalSlice";
import { useAppDispatch } from "@/app/hooks/hooks";
import TextTranslate from "@/app/utils/TextTranslate";
import { openAddPostModal } from "@/app/store/Slice/AddPostSlice";

function Search() {
  const token = Cookies.get("Snapta_auth_token");
  const { data: user_profile, isLoading } = useGetUserProfileDetailsQuery({ token: token || "" });
  const user_profile_details = user_profile?.user_data;
  const dispatch = useAppDispatch();

  const handleOpenModal = (type: "image" | "video" | "feed") => {
    dispatch(openAddPostModal(type));
  };

  return (
    <div 
      className="rounded-[10px] px-4 py-4 mx-2 sm:mx-0 mt-5 sm:mt-0 bg-[var(--bg-primary)] dark:border dark:border-[color-mix(in_srgb,var(--border-color),white_07%)] transition-colors duration-200" 
      style={{ 
        boxShadow: "0px 4px 20px 0px rgba(0, 0, 0, 0.08), 0px 0px 10px 0px rgba(255, 255, 255, 0.02)" 
      }}
    >
      {/* Image and search */}
      <div className="flex gap-3 items-center">
        <div className="flex-shrink-0">
          {isLoading ? (
            <div className="w-10 h-10 sm:w-12 sm:h-12 rounded-full overflow-hidden">
              <RoundedShimmer />
            </div>
          ) : (
            <img 
              src={user_profile_details?.profile_pic || "/assets/ProfilePicRounded"} 
              className="rounded-full w-10 h-10 sm:w-12 sm:h-12 object-cover border border-[var(--border-color)]" 
              alt="User Profile" 
            />
          )}
        </div>

        {/* Search/Input trigger - Opens Feed post */}
        <button 
          className="flex-1 text-start pl-4 bg-[color-mix(in_srgb,var(--text-primary),transparent_95%)] border border-[var(--border-color)] dark:border-[color-mix(in_srgb,var(--border-color),white_07%)] text-[var(--text-secondary)] text-sm font-gilroy_regular cursor-pointer py-2.5 rounded-xl hover:bg-[color-mix(in_srgb,var(--text-primary),transparent_92%)] transition-all"
          onClick={() => handleOpenModal("feed")}
        >
          <TextTranslate text="What's on your mind?"/>
        </button>

        {/* Action Buttons */}
        <div className="flex gap-2">
          {/* Gallery/Photo button */}
          <button
            className="p-2.5 rounded-xl flex items-center justify-center border border-[var(--border-color)] dark:border-[color-mix(in_srgb,var(--border-color),white_07%)] bg-gradient-bg hover:opacity-90 transition-opacity active:scale-95"
            onClick={() => handleOpenModal("image")}
          >
            <img src="/assets/gallery1.png" alt="Gallery" className="w-5 h-5 img-theme hover:opacity-80" />
          </button>
          
          {/* Video button */}
          <button
            className="p-2.5 rounded-xl flex items-center justify-center border border-[var(--border-color)] dark:border-[color-mix(in_srgb,var(--border-color),white_07%)] bg-gradient-bg hover:opacity-90 transition-opacity active:scale-95"
            onClick={() => handleOpenModal("video")}
          >
            <img src="/assets/Video.png" alt="Video" className="w-5 h-5 img-theme hover:opacity-80" />
          </button>
        </div>
      </div>
    </div>
  );
}

export default Search;