import { useState } from 'react';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { CalendarDaysIcon, ExclamationTriangleIcon, PencilSquareIcon, TrashIcon, XMarkIcon } from '@heroicons/react/24/solid';
import { ConfirmDialog } from '@/Components/ui/ConfirmDialog';
import { AttachmentPreviewModal, AttachmentThumb } from './AttachmentPreviewModal';
import { formatDate } from '@/lib/formatDate';

export interface TaskCardData {
    id: number;
    title: string;
    start_date: string | null;
    due_date: string | null;
    assignee?: { id: number; name: string } | null;
    labels?: { id: number; name: string; color: string }[];
    attachments?: { id: number; original_name: string; url: string }[];
}

function initials(name?: string) {
    if (!name) return '?';
    return name.trim().split(/\s+/).slice(0, 2).map((p) => p[0]).join('').toUpperCase();
}

export function TaskCard({
    task, onClick, onDelete, onRemoveLabel, dimmed, canDrag = true, isLabelDropTarget, isOverdue,
}: {
    task: TaskCardData;
    onClick: () => void;
    onDelete?: () => void;
    onRemoveLabel?: (labelId: number) => void;
    dimmed?: boolean;
    canDrag?: boolean;
    isLabelDropTarget?: boolean;
    isOverdue?: boolean;
}) {
    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: task.id, disabled: !canDrag });
    const [confirmOpen, setConfirmOpen] = useState(false);
    const [previewFile, setPreviewFile] = useState<{ original_name: string; url: string } | null>(null);

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

    if (isDragging) {
        return <div ref={setNodeRef} style={style} className="rounded-lg border-2 border-dashed border-sky-300 bg-sky-50/60 h-[90px]" />;
    }

    return (
        <div
            ref={setNodeRef}
            style={style}
            {...attributes}
            {...(canDrag ? listeners : {})}
            onClick={onClick}
            title={canDrag ? undefined : 'Hanya penanggung jawab yang bisa memindahkan tugas ini'}
            className={`group relative border rounded-lg p-3 shadow-sm ${canDrag ? 'cursor-grab active:cursor-grabbing' : 'cursor-pointer'} transition-all flex flex-col gap-2 ${dimmed ? 'opacity-30' : ''} ${
                isLabelDropTarget
                    ? 'border-sky-400 ring-2 ring-sky-300 scale-[1.02] shadow-lg bg-white'
                    : isOverdue
                        ? 'border-red-300 bg-red-50 hover:border-red-400 hover:shadow-md'
                        : 'border-gray-200 bg-white hover:border-sky-300 hover:shadow-md'
            }`}
        >
            <div data-no-dnd className="absolute top-1.5 right-1.5 flex gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
                <button
                    type="button"
                    onClick={(e) => { e.stopPropagation(); onClick(); }}
                    title="Edit tugas"
                    className="p-1.5 rounded-md bg-white/90 text-gray-400 hover:text-amber-600 hover:bg-amber-50"
                >
                    <PencilSquareIcon className="w-4 h-4" />
                </button>
                {onDelete && (
                    <button
                        type="button"
                        onClick={(e) => { e.stopPropagation(); setConfirmOpen(true); }}
                        title="Hapus tugas"
                        className="p-1.5 rounded-md bg-white/90 text-gray-400 hover:text-red-600 hover:bg-red-50"
                    >
                        <TrashIcon className="w-4 h-4" />
                    </button>
                )}
            </div>

            {task.labels && task.labels.length > 0 && (
                <div data-no-dnd className="flex flex-wrap gap-1 pr-14">
                    {task.labels.map((l) => (
                        <span
                            key={l.id}
                            className="group/label inline-flex items-center gap-1 text-xs font-semibold pl-2 pr-1 py-0.5 rounded-full text-white"
                            style={{ backgroundColor: l.color }}
                        >
                            {l.name}
                            {onRemoveLabel && (
                                <button
                                    type="button"
                                    onClick={(e) => { e.stopPropagation(); onRemoveLabel(l.id); }}
                                    title="Hapus label ini"
                                    className="rounded-full hover:bg-black/20 p-0.5"
                                >
                                    <XMarkIcon className="w-3 h-3" />
                                </button>
                            )}
                        </span>
                    ))}
                </div>
            )}
            <p className="text-[15px] text-gray-800 leading-snug pr-14">{task.title}</p>

            {task.attachments && task.attachments.length > 0 && (
                <div data-no-dnd className="flex flex-wrap gap-1.5">
                    {task.attachments.map((a) => (
                        <button
                            key={a.id}
                            type="button"
                            onClick={(e) => { e.stopPropagation(); setPreviewFile(a); }}
                            title={a.original_name}
                        >
                            <AttachmentThumb file={a} className="w-12 h-12" />
                        </button>
                    ))}
                </div>
            )}

            <div className="flex items-center justify-between gap-2">
                {task.due_date ? (
                    <span className={`inline-flex items-center gap-1 text-sm shrink-0 ${isOverdue ? 'text-red-600 font-semibold' : 'text-gray-500'}`}>
                        {isOverdue ? <ExclamationTriangleIcon className="w-4 h-4" /> : <CalendarDaysIcon className="w-4 h-4" />}
                        {task.start_date && (
                            <>{formatDate(task.start_date, { day: 'numeric', month: 'short' })}&ndash;</>
                        )}
                        {formatDate(task.due_date, { day: 'numeric', month: 'short' })}
                    </span>
                ) : <span />}
                {task.assignee ? (
                    <span className="inline-flex items-center gap-1.5 min-w-0" title={task.assignee.name}>
                        <span className="w-6 h-6 rounded-full bg-sky-600 text-white text-[10px] font-semibold flex items-center justify-center shrink-0">
                            {initials(task.assignee.name)}
                        </span>
                        <span className="text-sm text-gray-600 truncate max-w-24">{task.assignee.name}</span>
                    </span>
                ) : (
                    <span className="text-sm text-gray-300 italic">Belum ditugaskan</span>
                )}
            </div>

            {onDelete && (
                <ConfirmDialog
                    isOpen={confirmOpen}
                    onOpenChange={setConfirmOpen}
                    title="Hapus tugas ini?"
                    description={`"${task.title}" akan dihapus permanen beserta komentar dan lampirannya.`}
                    onConfirm={onDelete}
                />
            )}

            <AttachmentPreviewModal file={previewFile} onOpenChange={(open) => !open && setPreviewFile(null)} />
        </div>
    );
}