import { Head } from '@inertiajs/react';
import AppLayout from '@/layouts/app-layout';
import type { BreadcrumbItem } from '@/types';
import IndexPageLayout from '@/components/core/IndexPageLayout';
import { PaginationLink } from '@/types/dashboard';
import { ImageMangeType } from '@/types/dashboard/image';
import { TablePagination } from '@/components/core/TablePagination';
import { PopoverTrigger, PopoverContent, Popover } from '@/components/ui/popover';
import { Separator } from '@/components/ui/separator';
import { DeleteAlertButton } from '@/components/core/DeleteAlertButton';


const breadcrumbs: BreadcrumbItem[] = [
    {
        title: 'Images Manage',
        href: '/dashboard/images',
    },
];





interface PageProps {
    images: {
        data: ImageMangeType[],
        links: PaginationLink[],
        path: string,
        current_page: number
        last_page: number
        per_page: number
        total: number
    };
}

export default function Index({ images }: PageProps) {


    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title="Images Manage" />
            <IndexPageLayout title='Images Manage' path='/dashboard/images' >
                <div className="flex  flex-wrap gap-2">

                    {images.data.map((img) => (
                        <div key={img.id} className=" rounded-sm overflow-hidden   hover:shadow transition w-fit"    >

                            {/* Image preview */}
                            <div className=" aspect-5/3 h-30   flex items-center justify-center overflow-hidden">
                                <img
                                    src={img.url}
                                    alt={img.title ?? 'image'}
                                    className="w-full h-full object-contain"
                                />
                            </div>

                            <div className="p-3 space-y-1 text-sm">

                                <p className="font-medium truncate max-w-44">
                                    {img.title ?? 'Untitled'}
                                </p>

                                <p className="text-gray-500 dark:text-gray-400 text-xs">
                                    {(img.file_size / 1024).toFixed(1)} KB |  {img.width} × {img.height}
                                </p>

                                <div className='flex justify-between'>
                                    {img.used_in.length > 0 ? (
                                        <Popover>
                                            <PopoverTrigger className="text-xs text-green-500 hover:text-green-400 transition underline pt-0 cursor-pointer">
                                                View usage ({img.usage_count})
                                            </PopoverTrigger>

                                            <PopoverContent className="w-80 max-h-72 overflow-auto ">

                                                <div className="space-y-2">
                                                    <div className="text-sm font-medium text-gray-900 dark:text-white">
                                                        {img.title ?? 'Untitled'}
                                                    </div>

                                                    <Separator />

                                                    <p className="text-xs font-semibold text-gray-800 dark:text-gray-200">
                                                        Used Locations
                                                    </p>

                                                    <div className="space-y-1">
                                                        {img.used_in.map((u, i) => (
                                                            <div
                                                                key={i}
                                                                className="flex justify-between items-center  rounded text-sm border p-2 text-gray-700 dark:text-gray-300  transition"
                                                            >
                                                                <span className="capitalize">{u.type} (#{u.id})</span>
                                                                <span className=" text-gray-500 dark:text-gray-400">
                                                                    {u.role ?? "default"}
                                                                </span>
                                                            </div>
                                                        ))}
                                                    </div>
                                                </div>
                                            </PopoverContent>
                                        </Popover>
                                    ) : (
                                        <div className="text-xs text-red-500 pt-1">  Not used anywhere </div>
                                    )}

                                    <DeleteAlertButton deleteId={img.id} model='image-manage' title='Image' variant='ghost' />
                                </div>
                            </div>

                        </div>
                    ))}

                </div>

                <TablePagination links={images.links} meta={images} />
            </IndexPageLayout>
        </AppLayout >
    );
}
