"use client";


import { ManagerDecisionTrendChart } from "./ManagerDecisionTrendChart";
import { ManagerinProgressTasksWidget } from "./ManagerProgressTasksWidget";
import { ManagerTaskStatsCards } from "./ManagerTaskStatsCards";
import { useTaskSocket } from "@/hooks/useTaskSocket";
import { useAppSelector } from "@/lib/store";

export function ManagerDashboard() {
  const orgId = useAppSelector((s) => s.auth.user?.organizationId);
  useTaskSocket(orgId, [
    "manager-tasks",
    "manager-dashboard-task-stats",
    "manager-dashboard-decision-trend",
    "manager-dashboard-team-performance",
  ]);
  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-2xl font-bold tracking-tight text-foreground">
          Manager Dashboard
        </h2>
        <p className="text-muted-foreground text-sm mt-0.5">
          Team oversight and approval activity
        </p>
      </div>

      <ManagerTaskStatsCards />

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-5 items-stretch">
        <ManagerDecisionTrendChart />
        <ManagerinProgressTasksWidget />
      </div>
    </div>
  );
}