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 { useCrudPermissions } from '@admin/hooks/use-crud-permissions';
import { dashboardPersistentLayout } from '@admin/layouts/dashboard-page-layout';
import EditPhrase from '@admin/pages/marquee-phrases/edit-phrase';
import { Head } from '@inertiajs/react';
import { useState } from 'react';

type PhraseRow = { id: number; phrase: string; sort_order: number; status: boolean };

function MarqueeIndex({ phrases }: { phrases: PhraseRow[] }) {
    const { canEdit, canDelete } = useCrudPermissions('marquee-phrase');
    const [isEditModalOpen, setIsEditModalOpen] = useState(false);
    const [initialData, setInitialData] = useState<PhraseRow | null>(null);
    const [deleteModal, setDeleteModal] = useState<{ show: boolean; phrase: PhraseRow | null }>({ show: false, phrase: null });
    const columns: DataTableColumn<PhraseRow>[] = [
        { header: 'Order', key: 'sort_order', className: 'w-20' },
        { header: 'Phrase', key: 'phrase' },
        { header: 'Status', key: 'status' },
    ];

    const handleEdit = async (row: PhraseRow) => {
        try {
            const response = await fetch(`/admin/edit_marquee_phrase/${row.id}`);
            if (!response.ok) {
                throw new Error('Failed');
            }
            setInitialData((await response.json()) as PhraseRow);
            setIsEditModalOpen(true);
        } catch {
            adminToast.error('Could not load phrase');
        }
    };

    return (
        <>
            <Head title="Marquee" />
            <div className="grid grid-cols-12 gap-6">
                <div className="col-span-12">
                    <CrudCreateLink href={route('admin.marquee-phrases.create')} label="Add phrase" resource="marquee-phrase" />
                    <DataTable data={phrases} columns={columns} title="Marquee" itemsPerPage={10} onEdit={canEdit ? handleEdit : undefined} onDelete={canDelete ? (row) => setDeleteModal({ show: true, phrase: row }) : undefined} showEdit={canEdit} showDelete={canDelete} noDataText="No phrases found" />
                </div>
            </div>
            <DeleteConfirmationModal isOpen={deleteModal.show} onClose={() => setDeleteModal({ show: false, phrase: null })} itemName={deleteModal.phrase?.phrase || 'this phrase'} itemType="phrase" deleteEndpoint={`/admin/api/delete_marquee_phrase/${deleteModal.phrase?.id ?? ''}`} loadingMessage="Deleting phrase..." />
            <EditPhrase isOpen={isEditModalOpen} onClose={() => setIsEditModalOpen(false)} initialData={initialData} />
        </>
    );
}

export default Object.assign(MarqueeIndex, { layout: dashboardPersistentLayout('Marquee', 'Words in the scrolling line on the homepage') });