"use client";

import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import { Calendar, GripVertical, MoreHorizontal, Pencil, Trash2, UserCircle } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { cn } from "@/lib/utils";
import { formatDate } from "@/lib/format";

import { PRIORITY_COLOR, PRIORITY_LABEL, type TaskRow } from "./types";

type Props = {
  task: TaskRow;
  onEdit: (task: TaskRow) => void;
  onDelete: (task: TaskRow) => void;
  isOverlay?: boolean;
  currentUserId?: string;
};

export function TaskCard({ task, onEdit, onDelete, isOverlay, currentUserId }: Props) {
  const assignedToMe = currentUserId && task.assigneeId === currentUserId;
  const unassigned = !task.assigneeId;
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } =
    useSortable({ id: task.id, data: { type: "task", status: task.status } });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
  };

  const overdue =
    task.dueDate && task.status !== "done" && new Date(task.dueDate) < new Date();

  return (
    <div
      ref={setNodeRef}
      style={style}
      className={cn(
        "bg-card group rounded-lg border p-3 shadow-sm",
        assignedToMe && "border-primary/40 ring-primary/20 ring-1",
        unassigned && "border-dashed",
        isDragging && "opacity-30",
        isOverlay && "rotate-3 shadow-xl",
      )}
    >
      <div className="flex items-start gap-2">
        <button
          {...attributes}
          {...listeners}
          aria-label="Sürükle"
          className="text-muted-foreground hover:text-foreground mt-0.5 cursor-grab touch-none active:cursor-grabbing"
        >
          <GripVertical className="size-4" />
        </button>
        <div className="min-w-0 flex-1">
          <div className="flex items-start justify-between gap-2">
            <h3 className="line-clamp-2 text-sm font-medium leading-snug">{task.title}</h3>
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button
                  variant="ghost"
                  size="icon"
                  className="size-7 shrink-0 opacity-0 group-hover:opacity-100"
                >
                  <MoreHorizontal className="size-3.5" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuItem onClick={() => onEdit(task)}>
                  <Pencil className="size-3.5" />
                  Düzenle
                </DropdownMenuItem>
                <DropdownMenuItem variant="destructive" onClick={() => onDelete(task)}>
                  <Trash2 className="size-3.5" />
                  Sil
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>

          {task.description && (
            <p className="text-muted-foreground mt-1 line-clamp-2 text-xs">{task.description}</p>
          )}

          {task.customerName && (
            <p className="text-muted-foreground mt-1.5 text-xs">{task.customerName}</p>
          )}

          <div className="mt-2 flex flex-wrap items-center gap-1.5">
            <Badge
              variant="outline"
              className={cn("border-0 text-xs", PRIORITY_COLOR[task.priority])}
            >
              {PRIORITY_LABEL[task.priority]}
            </Badge>

            {task.dueDate && (
              <Badge
                variant="outline"
                className={cn(
                  "gap-1 text-xs",
                  overdue && "text-destructive border-destructive/50",
                )}
              >
                <Calendar className="size-3" />
                {formatDate(task.dueDate)}
              </Badge>
            )}

            {assignedToMe ? (
              <Badge
                variant="outline"
                className="bg-primary/10 text-primary border-primary/30 gap-1 text-xs"
              >
                <UserCircle className="size-3" />
                Bana atanmış
              </Badge>
            ) : task.assigneeName ? (
              <Badge variant="outline" className="gap-1 text-xs">
                <UserCircle className="size-3" />
                {task.assigneeName}
              </Badge>
            ) : (
              <Badge variant="outline" className="text-muted-foreground text-xs">
                Atanmamış
              </Badge>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}
