"use client";

import { useState, useEffect } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import StoryCard from "@/app/components/stories/StoryCard";

type Story = {
  id: number;
  slug: string;
  title: string;
  subtitle: string;
  thumbnail: string | undefined;
  pieceThumbnail: string | undefined;
  designHouse: string;
};

type FabricFamily = {
  id: number;
  name: string;
};

type Props = {
  initialStories: Story[];
  fabricFamilies: FabricFamily[];
};

export default function StoriesClient({ initialStories, fabricFamilies }: Props) {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [stories, setStories] = useState<Story[]>(initialStories);
  const [search, setSearch] = useState(searchParams.get("q") ?? "");
  const [selectedFabricFamily, setSelectedFabricFamily] = useState("");
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    const debounce = setTimeout(() => {
      const params = new URLSearchParams();
      if (search) params.set("q", search);
      router.replace(`/stories${params.toString() ? `?${params}` : ""}`, { scroll: false });

      const fetchStories = async () => {
        setIsLoading(true);
        try {
          const apiParams = new URLSearchParams();
          if (search) apiParams.append("search", search);
          if (selectedFabricFamily) apiParams.append("fabric_family", selectedFabricFamily);

          const url = `/api/stories${apiParams.toString() ? `?${apiParams}` : ""}`;
          const response = await fetch(url);
          if (response.ok) {
            const result = await response.json();
            if (result.success && result.data) {
              setStories(result.data);
            }
          }
        } catch (error) {
          console.error("Error fetching stories:", error);
        } finally {
          setIsLoading(false);
        }
      };

      fetchStories();
    }, 300);

    return () => clearTimeout(debounce);
  }, [search, selectedFabricFamily]);

  return (
    <>
      <div className="sticky top-10 z-20 w-full md:top-10">
        <div className="flex w-full items-center justify-center py-4 md:w-auto">
          <div className="relative grid w-full grid-cols-6 items-center justify-center gap-0 bg-gray-100/88 p-0 align-middle md:w-auto md:gap-2 md:p-4">
            <div className="mob-noise absolute top-0 left-0 z-1 h-full w-full" />
            <div className="relative z-10 col-span-4 border border-b-0 border-dashed border-gray-950/50 px-4 py-2.5 md:border-b-1">
              <form onSubmit={(e) => e.preventDefault()}>
                <input
                  type="search"
                  placeholder="Search stories..."
                  className="text-gray-950 placeholder:text-gray-950/75"
                  value={search}
                  onChange={(e) => setSearch(e.target.value)}
                />
              </form>
            </div>
            <div className="z-10 col-span-2 border cursor-pointer relative border-dashed border-gray-950/50 px-3 py-1.5">
              <select
                className="w-full text-xs text-gray-950 md:text-sm bg-transparent relative z-10 cursor-pointer"
                value={selectedFabricFamily}
                onChange={(e) => setSelectedFabricFamily(e.target.value)}
              >
                <option value="">Select Fabric Family</option>
                {fabricFamilies.map((family) => (
                  <option key={family.id} value={family.id}>
                    {family.name}
                  </option>
                ))}
              </select>
              <span className="absolute z-2 right-3 top-3 md:top-3.5 text-gray-950/50"><i className="icon-[tabler--caret-up-down-filled]"></i></span>
            </div>
          </div>
        </div>
      </div>
      <div className="mt-4 grid grid-cols-2 gap-2 md:grid-cols-3 md:gap-12 lg:grid-cols-4 2xl:grid-cols-5">
        {isLoading ? (
          <div className="col-span-full text-center py-8 text-gray-300">Loading...</div>
        ) : stories.length > 0 ? (
          stories.map((story) => <StoryCard key={story.id} story={story} />)
        ) : (
          <div className="col-span-full text-center py-8 text-gray-300">No stories found</div>
        )}
      </div>
    </>
  );
}