"use client";

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

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

import { LEAD_SOURCE_LABEL, LEAD_STATUS_CONFIG, type LeadRow } from "./types";

type Props = {
  lead: LeadRow;
  onEdit: (lead: LeadRow) => void;
  onDetail: (lead: LeadRow) => void;
  onDelete: (lead: LeadRow) => void;
  isOverlay?: boolean;
};

export function LeadCard({ lead, onEdit, onDetail, onDelete, isOverlay }: Props) {
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
    id: lead.id,
    data: { type: "lead", status: lead.status },
  });

  const style = { transform: CSS.Transform.toString(transform), transition };
  const cfg = LEAD_STATUS_CONFIG[lead.status];
  const isOverdue = lead.nextFollowUpAt && new Date(lead.nextFollowUpAt) < new Date();

  return (
    <div
      ref={setNodeRef}
      style={style}
      className={cn(
        "bg-card group cursor-pointer rounded-lg border p-3 shadow-sm transition-shadow hover:shadow-md",
        isDragging && "opacity-30",
        isOverlay && "rotate-2 shadow-xl",
      )}
      onClick={() => onDetail(lead)}
    >
      <div className="flex items-start gap-2">
        <button
          {...attributes}
          {...listeners}
          aria-label="Sürükle"
          onClick={(e) => e.stopPropagation()}
          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">
            <div className="min-w-0">
              <h3 className="truncate text-sm font-semibold leading-snug">{lead.name}</h3>
              {lead.contactName && (
                <p className="text-muted-foreground truncate text-xs">{lead.contactName}</p>
              )}
            </div>
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button
                  variant="ghost"
                  size="icon"
                  className="size-7 shrink-0 opacity-0 group-hover:opacity-100"
                  onClick={(e) => e.stopPropagation()}
                >
                  <MoreHorizontal className="size-3.5" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuItem onClick={(e) => { e.stopPropagation(); onDetail(lead); }}>
                  <UserCircle className="size-3.5" />
                  Detay & Aktiviteler
                </DropdownMenuItem>
                <DropdownMenuItem onClick={(e) => { e.stopPropagation(); onEdit(lead); }}>
                  <Pencil className="size-3.5" />
                  Düzenle
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem variant="destructive" onClick={(e) => { e.stopPropagation(); onDelete(lead); }}>
                  <Trash2 className="size-3.5" />
                  Sil
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>

          <div className="mt-2 flex flex-wrap items-center gap-1.5">
            <Badge variant="outline" className={cn("border text-xs", cfg.color, cfg.bg, cfg.border)}>
              {LEAD_SOURCE_LABEL[lead.source]}
            </Badge>

            {lead.estimatedValue != null && lead.estimatedValue > 0 && (
              <Badge variant="secondary" className="text-xs font-medium">
                {formatCurrency(lead.estimatedValue, lead.currency)}
              </Badge>
            )}
          </div>

          <div className="mt-2 flex flex-wrap items-center gap-2 text-xs">
            {lead.phone && (
              <span className="text-muted-foreground flex items-center gap-1">
                <Phone className="size-3" />
                {lead.phone}
              </span>
            )}
            {lead.nextFollowUpAt && (
              <span className={cn(
                "flex items-center gap-1",
                isOverdue ? "text-destructive font-medium" : "text-muted-foreground",
              )}>
                <Calendar className="size-3" />
                {formatDate(lead.nextFollowUpAt)}
                {isOverdue && " — gecikti"}
              </span>
            )}
          </div>

          {lead.assigneeName && (
            <div className="mt-1.5 flex items-center gap-1">
              <UserCircle className="text-muted-foreground size-3" />
              <span className="text-muted-foreground text-xs">{lead.assigneeName}</span>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}
