import { adminToast } from '@admin/components/ui/admin-toast';
import { CreatePageLayout } from '@admin/components/ui/create-page-layout';
import { DataTable, type DataTableColumn } from '@admin/components/ui/data-table';
import { DeleteConfirmationModal } from '@admin/components/ui/delete-confirmation-modal';
import { formClassName, formHelpClassName } from '@admin/components/ui/field-styles';
import { useCrudPermissions } from '@admin/hooks/use-crud-permissions';
import { useFormResponse } from '@admin/hooks/use-form-response';
import { dashboardPersistentLayout } from '@admin/layouts/dashboard-page-layout';
import {
    DocumentRecordFormFields,
    type DocumentRecordFormData,
} from '@admin/pages/qr-codes/documentations/document-record-form-fields';
import EditDocumentRecord from '@admin/pages/qr-codes/documentations/edit-document-record';
import { type DocumentTemplateOption } from '@admin/types/document';
import type { AdministrativeUnitOption } from '@admin/types/administrative-unit';
import { Head, Link, useForm } from '@inertiajs/react';
import { FormEvent, useState } from 'react';

type RecordSummary = {
    id: number;
    reference: string;
    status: boolean;
    can_edit?: boolean;
    can_delete?: boolean;
};

type CreateDocumentRecordProps = {
    records: RecordSummary[];
    templates: DocumentTemplateOption[];
    can_manage_templates: boolean;
    can_choose_unit: boolean;
    current_unit: { id: number; name: string } | null;
    units: AdministrativeUnitOption[];
};

const sidebarColumns: DataTableColumn<RecordSummary>[] = [
    { header: 'Reference', key: 'reference', truncate: true, className: 'w-[50%]' },
    { header: 'Status', key: 'status', className: 'w-24' },
];

const initialFormState: DocumentRecordFormData = {
    document_template_id: '',
    reference: '',
    values: {},
    sort_order: 0,
    status: true,
};

function CreateDocumentRecord({
    records,
    templates,
    can_manage_templates: canManageTemplates,
    can_choose_unit: canChooseUnit,
    current_unit: currentUnit,
    units,
}: CreateDocumentRecordProps) {
    const { canEdit, canDelete } = useCrudPermissions('documentation');
    const [isEditModalOpen, setIsEditModalOpen] = useState(false);
    const [initialData, setInitialData] = useState<Record<string, unknown> | null>(null);
    const [deleteModal, setDeleteModal] = useState<{ show: boolean; record: RecordSummary | null }>({
        show: false,
        record: null,
    });

    const { data, setData, post, processing, errors, reset } = useForm(initialFormState);
    const action = useFormResponse({ onComplete: reset, loadingMessage: 'Creating document...' });

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

            setInitialData((await response.json()) as Record<string, unknown>);
            setIsEditModalOpen(true);
        } catch {
            adminToast.error('Could not load document details');
        }
    };

    const handleSubmit = (event: FormEvent) => {
        event.preventDefault();

        post('/admin/api/create_document_record', {
            onStart: action.onStart,
            onSuccess: action.onSuccess,
            onError: action.onError,
            preserveScroll: true,
        });
    };

    return (
        <>
            <Head title="Create documentation" />

            {templates.length === 0 && (
                <p className={formHelpClassName}>
                    {canManageTemplates ? (
                        <>
                            Create a{' '}
                            <Link href={route('admin.qr-codes.documentations.templates.create')} className="text-primary">
                                document template
                            </Link>{' '}
                            before adding records.
                        </>
                    ) : (
                        'Ask a Super Admin to create a document template for your administrative unit before adding records.'
                    )}
                </p>
            )}

            <CreatePageLayout
                indexHref={route('admin.qr-codes.documentations')}
                form={
                    <div className="box">
                        <div className="box-header">
                            <h5 className="box-title">Add document</h5>
                        </div>
                        <div className="box-body">
                            <form className={formClassName} noValidate onSubmit={handleSubmit}>
                                <DocumentRecordFormFields
                                    data={data}
                                    errors={errors}
                                    templates={templates}
                                    canChooseUnit={canChooseUnit}
                                    currentUnit={currentUnit}
                                    units={units}
                                    setData={setData}
                                />
                                <button
                                    type="submit"
                                    className="ti-btn ti-btn-primary"
                                    disabled={processing || templates.length === 0}
                                >
                                    Save and generate QR
                                </button>
                            </form>
                        </div>
                    </div>
                }
                sidebar={
                    <DataTable
                        data={records}
                        columns={sidebarColumns}
                        title="Documents"
                        compact
                        onEdit={canEdit ? handleEdit : undefined}
                        onDelete={canDelete ? (row) => setDeleteModal({ show: true, record: row }) : undefined}
                        showEdit={canEdit}
                        showDelete={canDelete}
                        canEditRow={(row) => row.can_edit !== false}
                        canDeleteRow={(row) => row.can_delete !== false}
                        noDataText="No documents yet"
                    />
                }
            />

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

            <EditDocumentRecord
                isOpen={isEditModalOpen}
                onClose={() => setIsEditModalOpen(false)}
                initialData={initialData as never}
                templates={templates}
            />
        </>
    );
}

export default Object.assign(CreateDocumentRecord, {
    layout: dashboardPersistentLayout('Create documentation', 'Enter a record, then generate a verification QR code'),
});