import { useMemo } from "react";
import { useStoreData, useSuppliers } from "../../hooks";
import { useAppStore } from "../../store";
import { normalize } from "../../lib/normalize";
import { Header, PageLayout } from "../../components/layout/Header";
import { TopicGrid } from "../../components/TopicGrid";
import { useNavigate } from "react-router-dom";

// صفحه‌ی تأمین‌کننده‌ها — انتخاب موضوع (دسته‌ها از API می‌آیند)
export function SuppliersPage() {
  useStoreData();
  const suppliers = useSuppliers();
  const topics = useAppStore((s) => s.topics);
  const navigate = useNavigate();

  const counts = useMemo(() => {
    const out: Record<string, number> = {};
    topics.forEach((t) => {
      out[t.name] = suppliers.filter((s) => normalize(s.topic) === normalize(t.name)).length;
    });
    return out;
  }, [topics, suppliers]);

  return (
    <div className="min-h-screen">
      <Header
        title="تأمین‌کننده‌ها"
        sub="اول دسته‌بندی را انتخاب کنید"
        backTo="/"
        backLabel="بازگشت به دفتر"
      />
      <PageLayout>
        <TopicGrid
          topics={topics}
          onSelect={(topic) => navigate(`/suppliers/category/${encodeURIComponent(topic)}`)}
          showCounts
          counts={counts}
        />
      </PageLayout>
    </div>
  );
}