"use client";

import Link from "next/link";
import { Badge } from "@/components/ui/badge";
import { Calendar, DollarSign } from "lucide-react";
import { cn } from "@/lib/utils";
import { useDataProvider } from "@/lib/demo/data-provider-context";
import type { TaskResponse } from "@/lib/api/tasks";

interface TaskCardProps {
  task: TaskResponse;
  isDragging?: boolean;
}

export function TaskCard({ task, isDragging }: TaskCardProps) {
  const { basePath } = useDataProvider();
  return (
    <Link href={`${basePath}/tasks/${task.id}`}>
      <div
        className={cn(
          "rounded-xl border bg-card p-3.5 space-y-2 transition-all duration-200 hover:shadow-[var(--shadow-warm-sm)] cursor-grab",
          isDragging && "shadow-lg ring-2 ring-primary rotate-[1deg] scale-[1.02]"
        )}
      >
        <div className="font-medium text-sm leading-snug line-clamp-2">
          {task.title}
        </div>

        {task.residence_name && (
          <p className="text-xs text-muted-foreground/70 truncate">
            {task.residence_name}
          </p>
        )}

        <div className="flex flex-wrap gap-1.5">
          {task.priority && (
            <Badge variant="outline" className="text-xs px-1.5 py-0 rounded-md">
              {task.priority.icon && (
                <span className="mr-0.5">{task.priority.icon}</span>
              )}
              {task.priority.name}
            </Badge>
          )}
          {task.category && (
            <Badge variant="secondary" className="text-xs px-1.5 py-0 rounded-md">
              {task.category.icon && (
                <span className="mr-0.5">{task.category.icon}</span>
              )}
              {task.category.name}
            </Badge>
          )}
        </div>

        <div className="flex items-center gap-3 text-xs text-muted-foreground/70">
          {task.due_date && (
            <span className="flex items-center gap-1">
              <Calendar className="size-3" aria-hidden="true" />
              <span className="sr-only">Due date:</span>
              {new Date(task.due_date).toLocaleDateString()}
            </span>
          )}
          {task.estimated_cost != null && task.estimated_cost > 0 && (
            <span className="flex items-center gap-1">
              <DollarSign className="size-3" aria-hidden="true" />
              <span className="sr-only">Estimated cost:</span>
              {task.estimated_cost.toFixed(2)}
            </span>
          )}
        </div>
      </div>
    </Link>
  );
}