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

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

interface ProjectCardProps {
    project: ProjectListItemData;
    onEdit: (project: ProjectListItemData) => void;
    onDelete: (project: ProjectListItemData) => void;
}

export function ProjectCard({ project, onEdit, onDelete }: ProjectCardProps) {
    return (
        <div className="group relative flex flex-col rounded-2xl border bg-card transition-all hover:-translate-y-1 hover:shadow-xl">
            <div className="p-6">
                <div className="mb-4 flex items-center justify-between">
                    <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-primary text-primary-foreground shadow-lg">
                        <Folder size={20} />
                    </div>
                    <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={20} />
                            </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>
                </div>

                <Link
                    href={`/projects/${project.slug}`}
                    className="block transition-colors group-hover:text-blue-600"
                >
                    <h3 className="mb-2 text-lg font-semibold">
                        {project.projectName}
                    </h3>
                </Link>
                <p className="mb-6 line-clamp-2 text-sm text-muted-foreground">
                    {project.description}
                </p>

                <div className="mt-auto space-y-4">
                    <div className="space-y-2">
                        <div className="flex justify-between text-xs font-medium">
                            <span>Progress</span>
                            <span>
                                {project.progressStatus === 'DONE'
                                    ? '100%'
                                    : '65%'}
                            </span>
                        </div>
                        <div className="h-1.5 w-full rounded-full bg-muted">
                            <div
                                className="h-full rounded-full bg-blue-500 shadow-[0_0_8px_rgba(59,130,246,0.5)]"
                                style={{
                                    width:
                                        project.progressStatus === 'DONE'
                                            ? '100%'
                                            : '65%',
                                }}
                            ></div>
                        </div>
                    </div>

                    <div className="flex items-center justify-between border-t pt-4">
                        <div className="flex -space-x-2">
                            {[...Array(3)].map((_, i) => (
                                <div
                                    key={i}
                                    className="flex h-8 w-8 items-center justify-center rounded-full border-2 border-card bg-secondary text-[10px] font-bold"
                                >
                                    U{i + 1}
                                </div>
                            ))}
                            <div className="flex h-8 w-8 items-center justify-center rounded-full border-2 border-card bg-muted text-[10px] font-bold">
                                +{project.memberCount}
                            </div>
                        </div>
                        <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
                            <Calendar size={14} />
                            <span>{formatDate(project.deadline)}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}