"use client";

import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import type { AppDispatch, RootState } from "@/state/store";
import {
  fetchDashboardStats,
  fetchRecentActivity,
  fetchRecentQuotes,
  fetchRecentOffers,
  fetchRecentEnquiries,
  fetchTopCategories,
} from "@/state/dashboard/dashboardSlice";
import ProductsOverviewChart from "@/components/dashboard/ProductsOverviewChart";
import RecentActivityList from "@/components/dashboard/RecentActivityList";
import RecentOffersTable from "@/components/dashboard/RecentOffersTable";
import RecentQuestionsTable from "@/components/dashboard/RecentQuestionsTable";
import RecentQuotesTable from "@/components/dashboard/RecentQuotesTable";
import StatsCard from "@/components/dashboard/StatsCard";
import TopListedCategories from "@/components/dashboard/TopListedCategories";

export default function DashboardPage() {
  const dispatch = useDispatch<AppDispatch>();
  const { stats, loading } = useSelector((state: RootState) => state.dashboard);

  useEffect(() => {
    dispatch(fetchDashboardStats());
    dispatch(fetchRecentActivity());
    dispatch(fetchRecentQuotes(5));
    dispatch(fetchRecentOffers(5));
    dispatch(fetchRecentEnquiries(5));
    dispatch(fetchTopCategories(7));
  }, [dispatch]);

  const statsCards = [
    {
      title: "Total Sellers",
      value: stats?.totalSellers?.value ?? 0,
      change: stats?.totalSellers?.label || "0% from last month",
      isPositive: stats?.totalSellers?.direction !== "down",
      icon: "sellers" as const,
    },
    {
      title: "New Products",
      value: stats?.newProducts?.value ?? 0,
      change: stats?.newProducts?.label || "0% from last month",
      isPositive: stats?.newProducts?.direction !== "down",
      icon: "newProducts" as const,
    },
    {
      title: "Used Products",
      value: stats?.usedProducts?.value ?? 0,
      change: stats?.usedProducts?.label || "0% from last month",
      isPositive: stats?.usedProducts?.direction !== "down",
      icon: "usedProducts" as const,
    },
    {
      title: "Pending Quotes",
      value: stats?.pendingQuotes?.value ?? 0,
      change: stats?.pendingQuotes?.label || "0% from last month",
      isPositive: stats?.pendingQuotes?.direction !== "down",
      icon: "quotes" as const,
    },
    {
      title: "Pending Offers",
      value: stats?.pendingOffers?.value ?? 0,
      change: stats?.pendingOffers?.label || "0% from last month",
      isPositive: stats?.pendingOffers?.direction !== "down",
      icon: "offers" as const,
    },
  ];

  return (
    <div className="min-w-0">
      <h1 className="text-[20px] font-bold text-[#101828]">Dashboard</h1>
      <p className="mt-1 text-[13px] text-[#667085]">
        Welcome back! Here is what is happening with BroadcastAV today.
      </p>

      <div className="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-5">
        {statsCards.map((stat) => (
          <StatsCard
            key={stat.title}
            {...stat}
            loading={loading.stats && !stats}
          />
        ))}
      </div>

      <div className="mt-4 grid grid-cols-1 gap-4 xl:grid-cols-[minmax(0,1fr)_360px]">
        <ProductsOverviewChart />
        <TopListedCategories />
      </div>

      <div className="mt-4">
        <RecentQuotesTable />
      </div>

      <div className="mt-4">
        <RecentOffersTable />
      </div>

      <div className="mt-4 grid grid-cols-1 gap-4 xl:grid-cols-2">
        <RecentQuestionsTable />
        <RecentActivityList />
      </div>
    </div>
  );
}