import { Link } from '@inertiajs/react';
import { Calendar, MoreVertical, Pencil, Trash2 } from 'lucide-react';

import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { TableCell, TableRow } from '@/components/ui/table';
import { formatDate } from '@/lib/utils';
import type { ProjectListItemData } from '@/types/project';

interface ProjectListItemProps {
    project: ProjectListItemData;
    index: number;
    onEdit: (project: ProjectListItemData) => void;
    onDelete: (project: ProjectListItemData) => void;
}

export function ProjectListItem({
    project,
    index,
    onEdit,
    onDelete,
}: ProjectListItemProps) {
    return (
        <TableRow className="group">
            <TableCell className="w-12 text-center font-mono text-xs font-medium text-muted-foreground">
                {index}.
            </TableCell>

            <TableCell className="min-w-50">
                <div className="flex flex-col">
                    <Link
                        href={`/projects/${project.slug}`}
                        className="truncate font-semibold transition-colors group-hover:text-blue-600"
                    >
                        {project.projectName}
                    </Link>
                    <p className="line-clamp-1 text-xs text-muted-foreground">
                        {project.description}
                    </p>
                </div>
            </TableCell>

            <TableCell>
                <span className="inline-flex rounded-full bg-blue-50 px-2.5 py-0.5 text-[10px] font-semibold text-blue-700 dark:bg-blue-900/30 dark:text-blue-300">
                    {project.progressStatus}
                </span>
            </TableCell>

            <TableCell className="hidden md:table-cell">
                <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
                    <Calendar size={14} />
                    <span>{formatDate(project.deadline)}</span>
                </div>
            </TableCell>

            <TableCell className="text-right">
                <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                        <button
                            className="cursor-pointer rounded-md p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
                            aria-label={`Buka aksi proyek ${project.projectName}`}
                        >
                            <MoreVertical size={18} />
                        </button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent
                        align="end"
                        className="w-40 rounded-lg"
                    >
                        <DropdownMenuItem
                            onClick={() => onEdit(project)}
                            className="cursor-pointer gap-2 focus:bg-blue-50 focus:text-blue-600 dark:focus:bg-blue-900/20"
                        >
                            <Pencil size={14} /> Edit Project
                        </DropdownMenuItem>
                        <DropdownMenuItem
                            onClick={() => onDelete(project)}
                            className="cursor-pointer gap-2 text-red-600 focus:bg-red-50 focus:text-red-600 dark:focus:bg-red-900/20"
                        >
                            <Trash2 size={14} /> Delete Project
                        </DropdownMenuItem>
                    </DropdownMenuContent>
                </DropdownMenu>
            </TableCell>
        </TableRow>
    );
}