"use client";

import RestaurantCard from "@/app/components/RestaurantCard";
import RestaurantsSkeleton from "@/app/components/RestaurantsSkeleton";
import { useGetAllRestaurants } from "@/app/hooks/useAppData";
import { PublicRestaurant } from "@/app/types/Types";
import SearchBox from "@/components/input/SearchBox";
import Image from "next/image";
import { useMemo, useState } from "react";
import "./home.css";

function filterRestaurants(restaurants: PublicRestaurant[], query: string): PublicRestaurant[] {
  const normalized = query.trim().toLowerCase();
  if (!normalized) return restaurants;

  return restaurants.filter((r) => r.name.toLowerCase().includes(normalized) || r.slug.toLowerCase().includes(normalized) || r.address?.toLowerCase().includes(normalized));
}

export default function Home() {
  const { data, isLoading, error } = useGetAllRestaurants();
  const [search, setSearch] = useState("");

  const restaurants = data?.data ?? [];
  const filtered = useMemo(() => filterRestaurants(restaurants, search), [restaurants, search]);

  return (
    <div className="danak-home flex h-full flex-col overflow-hidden bg-[#ff5e2b]/20">
      <header className="shrink-0 px-4 pt-6 pb-3">
        <div className="flex flex-col items-center text-center">
          <Image src="/icons/logo512.png" alt="BY DANAK" width={52} height={52} className="size-[52px] rounded-[14px] object-cover" priority />
          <h1 className="mt-3 text-base font-semibold text-foreground">دی‌منو پلاس</h1>
          <p className="mt-0.5 text-[11px] tracking-wide text-(--danak-orange)">BY DANAK</p>
        </div>

        <div className="mt-5">
          <SearchBox value={search} onChange={(e) => setSearch(e.target.value)} placeholder="جستجوی رستوران یا کافه..." />
        </div>
      </header>

      <main className="min-h-0 flex-1 overflow-y-auto noscrollbar">
        {!isLoading && !error && (
          <p className="px-4 pb-3 text-xs text-[#8C90A3]">
            {filtered.length.toLocaleString("fa-IR")} مورد
            {search.trim() ? " یافت شد" : ""}
          </p>
        )}

        {isLoading && <RestaurantsSkeleton />}

        {error && (
          <div className="mx-4 rounded-2xl border border-red-200 bg-red-50 px-4 py-6 text-center">
            <p className="text-sm font-medium text-red-700">خطا در دریافت لیست رستوران‌ها</p>
            <p className="mt-1 text-xs text-red-500">لطفاً اتصال اینترنت خود را بررسی کنید و دوباره تلاش کنید.</p>
          </div>
        )}

        {!isLoading && !error && filtered.length === 0 && (
          <div className="flex flex-col items-center justify-center px-4 py-16 text-center">
            <Image src="/icons/logo512.png" alt="" width={48} height={48} className="mb-4 size-12 rounded-xl object-cover opacity-40" />
            <p className="text-sm font-medium text-foreground">{search.trim() ? "نتیجه‌ای یافت نشد" : "رستورانی یافت نشد"}</p>
            <p className="mt-1 text-xs text-[#8C90A3]">{search.trim() ? "عبارت جستجو را تغییر دهید" : "در حال حاضر رستورانی در لیست وجود ندارد"}</p>
          </div>
        )}

        {!isLoading && !error && filtered.length > 0 && (
          <div className="space-y-3 px-4 pb-8">
            {filtered.map((restaurant) => (
              <RestaurantCard key={restaurant.slug} restaurant={restaurant} />
            ))}
          </div>
        )}
      </main>
    </div>
  );
}
