"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 { ClipboardList, Flag, ArrowRight } from "lucide-react";
import { useRouter } from "next/navigation";

import { getStatusVariant } from "@/lib/status-variant";
import { useGetEmployeeTasks } from "../../tasks/hooks/task.hooks";

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

  const { data, isLoading } = useGetEmployeeTasks({
    page: 1,
    limit: 5,
    search: "",
    status: "PENDING",
  });

  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">
          <ClipboardList className="h-4 w-4 text-muted-foreground" />
          Pending Tasks
        </CardTitle>

        <Button
          variant="ghost"
          size="sm"
          onClick={() => router.push("/employee/tasks?status=PENDING")}
          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, 3].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-10 text-center gap-1">
            <p className="text-xs text-muted-foreground">No pending tasks </p>
          </div>
        ) : (
          <div className="divide-y divide-border">
            {tasks.map((task) => (
              <div
                key={task.id}
                onClick={() => router.push(`/employee/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>
                   <div className="flex flex-col items-end gap-1 shrink-0">
                  {task.status && (
                    <Badge variant={getStatusVariant(task.status)} className="text-[10px]">
                      {task.status}
                    </Badge>
                  )}
                  {task.dueDate && (
                    <span className="text-[10px] text-muted-foreground">
                      {new Date(task.dueDate).toLocaleDateString("en-IN", {
                        day: "2-digit",
                        month: "short",
                        year: "numeric",
                      })}
                    </span>
                  )}
                </div>
              </div>
            ))}
          </div>
        )}
      </CardContent>
    </Card>
  );
}