"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Skeleton } from "@/components/ui/skeleton";
import { Button } from "@/components/ui/button";
import { ArrowRight, CheckCircle2 } from "lucide-react";
import { useRouter } from "next/navigation";

import { getStatusVariant } from "@/lib/status-variant";
import { useGetTasks } from "../../task/hook/task.hook";

export function ClientPendingApprovalWidget() {
  const router = useRouter();

  const { data, isLoading } = useGetTasks({
    page: 1,
    limit: 10,
    search: "",
    status: "CLIENT_APPROVAL",
  });

  const tasks = data?.data ?? [];

  return (
    <Card className="border-border bg-card shadow-sm rounded-xl overflow-hidden gap-0 py-0">
      <CardHeader className="border-b border-border py-3.5 px-5 bg-muted/40 flex flex-row items-center justify-between">
        <CardTitle className="flex items-center gap-2 text-sm font-semibold text-foreground">
        Tasks for Approval
          {tasks.length > 0 && (
            <Badge variant="destructive" className="text-[10px]">{tasks.length}</Badge>
          )}
        </CardTitle>
        <Button
          variant="ghost"
          size="sm"
          onClick={() => router.push("/client/tasks?status=CLIENT_APPROVAL")}
          className="flex items-center gap-1 text-xs text-primary hover:underline"
        >
          View all <ArrowRight className="h-3 w-3" />
        </Button>
      </CardHeader>

      <CardContent className="p-0">
        {isLoading ? (
          <div className="p-4 space-y-2.5">
            {[1, 2].map((i) => (
              <Skeleton key={i} className="h-10 w-full rounded-lg" />
            ))}
          </div>
        ) : tasks.length === 0 ? (
          <div className="flex flex-col items-center justify-center py-5 text-center gap-1.5">
            <CheckCircle2 className="h-5 w-5 text-green-600" />
            <p className="text-xs text-muted-foreground">No tasks waiting on your approval right now.</p>
          </div>
        ) : (
          <div className="divide-y divide-border">
            {tasks.map((task) => (
              <div
                key={task.id}
                onClick={() => router.push(`/client/tasks/${task.id}`)}
                className="flex items-center justify-between gap-3 px-5 py-3 cursor-pointer hover:bg-secondary/20 transition-colors"
              >
                <div className="min-w-0">
                  <p className="text-xs font-medium text-foreground truncate">{task.title}</p>
                  <p className="text-[10px] text-muted-foreground mt-0.5">
                    {task.service?.name ?? "—"}
                  </p>
                </div>
                <Badge variant={getStatusVariant(task.status)} className="text-[10px] shrink-0">
                  {task.status.replace(/_/g, " ")}
                </Badge>
              </div>
            ))}
          </div>
        )}
      </CardContent>
    </Card>
  );
}