import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { AlignLeft, Calendar, ChevronUp, ChevronRight, ChevronDown } from 'lucide-react';
import type { CardResponse } from '@/client';

interface KanbanCardProps {
    card: CardResponse;
    onEdit?: (card: CardResponse) => void;
}

const PRIORITY = {
    high: {
        border: 'border-l-red-500',
        bg: 'bg-red-50',
        badge: 'bg-red-100 text-red-600',
        icon: ChevronUp,
        label: 'High',
    },
    medium: {
        border: 'border-l-amber-500',
        bg: 'bg-amber-50',
        badge: 'bg-amber-100 text-amber-600',
        icon: ChevronRight,
        label: 'Medium',
    },
    low: {
        border: 'border-l-blue-500',
        bg: 'bg-blue-50',
        badge: 'bg-blue-100 text-blue-600',
        icon: ChevronDown,
        label: 'Low',
    },
} as const;

export function KanbanCard({ card, onEdit }: KanbanCardProps) {
    const {
        attributes,
        listeners,
        setNodeRef,
        transform,
        transition,
        isDragging,
    } = useSortable({ id: card.id, data: { type: 'Card', card } });

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

    const priority = PRIORITY[card.priority as keyof typeof PRIORITY];
    const hasPriority = !!priority;

    const formatDate = (dateStr: string | null | undefined) => {
        if (!dateStr) return null;
        const d = new Date(dateStr);
        return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
    };

    return (
        <div
            ref={setNodeRef}
            style={style}
            {...attributes}
            {...listeners}
            onClick={() => onEdit?.(card)}
            className={`group relative rounded-lg border bg-white p-3 text-sm shadow-sm cursor-grab active:cursor-grabbing border-l-4 transition-all ${
                hasPriority ? priority!.border : 'border-l-transparent'
            } ${
                hasPriority ? priority!.bg : ''
            } ${
                isDragging
                    ? 'opacity-50 shadow-lg ring-2 ring-[#18181B]/30'
                    : 'hover:shadow-md hover:border-foreground/20'
            }`}
        >
            {/* Title row */}
            <div className="flex items-start justify-between gap-2">
                <span className="text-[13px] font-medium leading-snug text-[#18181B]">
                    {card.title}
                </span>
                {hasPriority && (
                    <span className={`shrink-0 inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-semibold ${priority!.badge}`}>
                        {(() => {
                            const Icon = priority!.icon;
                            return <Icon className="h-3 w-3" />;
                        })()}
                        {priority!.label}
                    </span>
                )}
            </div>

            {/* Meta row */}
            {(card.issue_id || card.description || card.due_date || card.assignee_id) && (
                <div className="mt-2 flex flex-wrap items-center gap-2 text-[11px] text-[#71717A]">
                    {card.issue_id && (
                        <span className="inline-flex items-center gap-1 rounded bg-[#F4F4F5] px-1.5 py-0.5 font-mono text-[#52525B]">
                            #{card.issue_id}
                        </span>
                    )}
                    {card.description && (
                        <span className="inline-flex items-center gap-1">
                            <AlignLeft className="h-3 w-3" />
                        </span>
                    )}
                    {card.due_date && (
                        <span className="inline-flex items-center gap-1">
                            <Calendar className="h-3 w-3" />
                            {formatDate(card.due_date)}
                        </span>
                    )}
                    {card.assignee_id && (
                        <span className="inline-flex items-center gap-1">
                            <svg className="h-3 w-3" viewBox="0 0 16 16" fill="currentColor">
                                <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM2 14a6 6 0 0 1 12 0H2Z"/>
                            </svg>
                        </span>
                    )}
                </div>
            )}
        </div>
    );
}
