import { adminToast } from '@admin/components/ui/admin-toast';
import { CrudCreateLink } from '@admin/components/ui/crud-create-link';
import { DataTable, type DataTableColumn } from '@admin/components/ui/data-table';
import { DeleteConfirmationModal } from '@admin/components/ui/delete-confirmation-modal';
import { QrPreviewImage } from '@admin/components/qr/qr-preview-image';
import { formHelpClassName } from '@admin/components/ui/field-styles';
import { useCrudPermissions } from '@admin/hooks/use-crud-permissions';
import { dashboardPersistentLayout } from '@admin/layouts/dashboard-page-layout';
import { cn } from '@admin/lib/utils';
import EditQrCode from '@admin/pages/qr-codes/edit-qr-code';
import type { QrCodeRow } from '@admin/types/qr-code';
import { Head } from '@inertiajs/react';
import { useState } from 'react';

type QrCodesIndexProps = {
    qrCodes: QrCodeRow[];
};

function QrCodesIndex({ qrCodes }: QrCodesIndexProps) {
    const { canEdit, canDelete } = useCrudPermissions('qr-code');
    const [isEditModalOpen, setIsEditModalOpen] = useState(false);
    const [initialData, setInitialData] = useState<QrCodeRow | null>(null);
    const [deleteModal, setDeleteModal] = useState<{ show: boolean; qrCode: QrCodeRow | null }>({
        show: false,
        qrCode: null,
    });

    const columns: DataTableColumn<QrCodeRow>[] = [
        { header: 'Name', key: 'name', truncate: true },
        { header: 'URL', key: 'content', truncate: true },
        {
            header: 'QR',
            key: 'preview_url',
            className: 'w-28',
            render: (row) => (
                <QrPreviewImage src={`${row.preview_url}?size=280`} alt={`${row.name} QR code`} size={88} />
            ),
        },
        {
            header: 'Download',
            key: 'type',
            render: (row) => (
                <a className="ti-btn ti-btn-sm ti-btn-outline-primary" href={`${row.preview_url}?download=1`}>
                    PNG
                </a>
            ),
        },
        { header: 'Status', key: 'status' },
    ];

    const handleEdit = async (row: QrCodeRow) => {
        try {
            const response = await fetch(`/admin/edit_qr_code/${row.id}`);
            if (!response.ok) {
                throw new Error('Failed to fetch QR code');
            }

            setInitialData((await response.json()) as QrCodeRow);
            setIsEditModalOpen(true);
        } catch {
            adminToast.error('Could not load QR code details');
        }
    };

    return (
        <>
            <Head title="QR codes" />

            <CrudCreateLink href={route('admin.qr-codes.create')} label="Add QR code" resource="qr-code" />
            <p className={cn('mb-4', formHelpClassName)}>
                Add a link. The QR code is generated from that address and can be downloaded as a PNG.
            </p>

            <DataTable
                data={qrCodes}
                columns={columns}
                title="QR codes"
                itemsPerPage={10}
                onEdit={canEdit ? handleEdit : undefined}
                onDelete={canDelete ? (row) => setDeleteModal({ show: true, qrCode: row }) : undefined}
                showEdit={canEdit}
                showDelete={canDelete}
                noDataText="No QR codes yet"
            />

            <DeleteConfirmationModal
                isOpen={deleteModal.show}
                onClose={() => setDeleteModal({ show: false, qrCode: null })}
                itemName={deleteModal.qrCode?.name ?? 'this QR code'}
                itemType="QR code"
                deleteEndpoint={`/admin/api/delete_qr_code/${deleteModal.qrCode?.id ?? ''}`}
                loadingMessage="Deleting QR code..."
            />

            <EditQrCode isOpen={isEditModalOpen} onClose={() => setIsEditModalOpen(false)} initialData={initialData} />
        </>
    );
}

export default Object.assign(QrCodesIndex, {
    layout: dashboardPersistentLayout('QR codes', 'Add a link and download its code'),
});