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 type { ProjectListItemData } from '@/types/project';

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

export function ProjectCard({ project, onEdit, onDelete }: ProjectCardProps) {
    const formatDate = (dateString: string) => {
        return new Date(dateString).toLocaleDateString('id-ID', {
            day: 'numeric',
            month: 'short',
            year: 'numeric',
        });
    };

    return (
        <div className="group relative flex flex-col rounded-2xl border bg-white transition-all hover:-translate-y-1 hover:shadow-xl dark:bg-neutral-900">
            <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-black text-white shadow-lg dark:bg-white dark:text-black">
                        <Folder size={20} />
                    </div>
                    <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                            <button
                                className="rounded-md p-1 text-muted-foreground transition-colors hover:bg-neutral-100 hover:text-foreground dark:hover:bg-neutral-800"
                                aria-label={`Buka aksi proyek ${project.projectName}`}
                            >
                                <MoreVertical size={20} />
                            </button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent
                            align="end"
                            className="w-40 rounded-xl border-neutral-200 dark:border-neutral-800"
                        >
                            <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-neutral-100 dark:bg-neutral-800">
                            <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-white bg-neutral-200 text-[10px] font-bold dark:border-neutral-900 dark:bg-neutral-700"
                                >
                                    U{i + 1}
                                </div>
                            ))}
                            <div className="flex h-8 w-8 items-center justify-center rounded-full border-2 border-white bg-neutral-100 text-[10px] font-bold dark:border-neutral-900 dark:bg-neutral-800">
                                +{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>
    );
}