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 { useCrudPermissions } from '@admin/hooks/use-crud-permissions';
import { DeleteConfirmationModal } from '@admin/components/ui/delete-confirmation-modal';
import { dashboardPersistentLayout } from '@admin/layouts/dashboard-page-layout';
import EditAdministrativeUnit from '@admin/pages/administrative-units/edit-administrative-unit';
import { type AdministrativeUnitRow } from '@admin/types/administrative-unit';
import { Head } from '@inertiajs/react';
import { useState } from 'react';

type AdministrativeUnitsIndexProps = {
    units: AdministrativeUnitRow[];
};

function AdministrativeUnitsIndex({ units }: AdministrativeUnitsIndexProps) {
    const { canEdit, canDelete } = useCrudPermissions('administrative-unit');
    const [isEditModalOpen, setIsEditModalOpen] = useState(false);
    const [initialData, setInitialData] = useState<AdministrativeUnitRow | null>(null);
    const [deleteModal, setDeleteModal] = useState<{ show: boolean; unit: AdministrativeUnitRow | null }>({
        show: false,
        unit: null,
    });

    const columns: DataTableColumn<AdministrativeUnitRow>[] = [
        { header: 'Order', key: 'sort_order', className: 'w-20' },
        { header: 'Name', key: 'name', truncate: true },
        { header: 'Slug', key: 'slug', truncate: true },
        {
            header: 'Address',
            key: 'address',
            truncate: true,
            render: (row) => row.address?.trim() || '—',
        },
        { header: 'Users', key: 'users_count', className: 'w-24' },
        { header: 'Status', key: 'status' },
    ];

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

            const unitData = (await response.json()) as AdministrativeUnitRow;
            setInitialData(unitData);
            setIsEditModalOpen(true);
        } catch {
            adminToast.error('Could not load unit details');
        }
    };

    return (
        <>
            <Head title="Administrative units" />

            <div className="grid grid-cols-12 gap-6">
                <div className="col-span-12">
                    <CrudCreateLink
                        href={route('admin.administrative-units.create')}
                        label="Create unit"
                        resource="administrative-unit"
                    />
                    <DataTable
                        data={units}
                        columns={columns}
                        title="Administrative units"
                        itemsPerPage={10}
                        onEdit={canEdit ? handleEdit : undefined}
                        onDelete={canDelete ? (row) => setDeleteModal({ show: true, unit: row }) : undefined}
                        showEdit={canEdit}
                        showDelete={canDelete}
                        noDataText="No units found"
                    />
                </div>
            </div>

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

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

export default Object.assign(AdministrativeUnitsIndex, {
    layout: dashboardPersistentLayout('Administrative units', 'Centers used to scope staff and confidential documents'),
});