"use client";

import { TaskStatsCards } from "./TaskStatsCards";
import { TaskStatusPieChart } from "./TaskStatusPieChart";
import { TaskTrendChart } from "./TaskTrendChart";
import { TaskRejectionsPanel } from "./TaskRejectionsPanel";
import { ClientPendingApprovalWidget } from "./ClientPendingApprovalWidget";
import { useTaskSocket } from "@/hooks/useTaskSocket";
import { useAppSelector } from "@/lib/store";

export function ClientDashboard() {
  const orgId = useAppSelector((s) => s.auth.user?.organizationId);
  useTaskSocket(orgId, [
    "tasks",
    "client-dashboard-task-stats",
    "client-dashboard-task-trend",
    "client-dashboard-all-rejections",
  ]);
  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-2xl font-bold tracking-tight text-foreground">
          Dashboard
        </h2>
        <p className="text-muted-foreground text-sm mt-0.5">
          Overview of your tasks and activity
        </p>
      </div>

      <TaskStatsCards />

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-5 items-stretch">
        <TaskTrendChart />
        <TaskStatusPieChart />
      </div>

    

       <div className="grid grid-cols-1 lg:grid-cols-2 gap-5 items-stretch">
         <ClientPendingApprovalWidget />
         
        <TaskRejectionsPanel />
      </div>

      {/* <div>
        <h3 className="text-base font-semibold text-foreground mb-3">Rejected Tasks</h3>
        <TaskRejectionsPanel />
      </div> */}
    </div>
  );
}