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 { FormSection } from '@admin/components/ui/forms/form-section';
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 {
    DocumentTemplateFormFields,
    type DocumentTemplateFormData,
} from '@admin/pages/qr-codes/documentations/templates/document-template-form-fields';
import {
    emptyDocumentLayout,
    defaultChildEditableKeys,
    type DocumentBlockTypeOption,
    type DocumentPresetOption,
    type DocumentPresetSchema,
    type DocumentSelectOption,
    type DocumentTemplateOption,
} from '@admin/types/document';
import type { AdministrativeUnitOption } from '@admin/types/administrative-unit';
import { Head, router, useForm } from '@inertiajs/react';
import { FormEvent, useState } from 'react';

type TemplateSummary = {
    id: number;
    parent_id?: number | null;
    name: string;
    kind?: string;
    status: boolean;
    edit_url?: string;
};

type CreateDocumentTemplateProps = {
    templates: TemplateSummary[];
    parents: DocumentTemplateOption[];
    presets: DocumentPresetOption[];
    preset_schemas: Record<string, DocumentPresetSchema>;
    field_types: DocumentSelectOption[];
    style_options: DocumentSelectOption[];
    qr_position_options: DocumentSelectOption[];
    editable_key_options: DocumentSelectOption[];
    block_type_options: DocumentBlockTypeOption[];
    units: AdministrativeUnitOption[];
};

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

const initialFormState: DocumentTemplateFormData = {
    parent_id: '',
    administrative_unit_id: '',
    name: '',
    slug: '',
    kind: 'document',
    description: '',
    preset: 'blank',
    field_schema: [
        { key: 'title', label: 'Title', type: 'text', required: true, unique: false, help: null, options: [] },
        { key: 'body', label: 'Details', type: 'textarea', required: false, unique: false, help: null, options: [] },
    ],
    layout: emptyDocumentLayout(),
    child_editable_keys: defaultChildEditableKeys(),
    sort_order: 0,
    status: true,
};

function CreateDocumentTemplate({
    templates,
    parents,
    presets,
    preset_schemas: presetSchemas,
    field_types: fieldTypes,
    style_options: styleOptions,
    qr_position_options: qrPositionOptions,
    editable_key_options: editableKeyOptions,
    units,
}: CreateDocumentTemplateProps) {
    const { canEdit, canDelete } = useCrudPermissions('documentation');
    const [deleteModal, setDeleteModal] = useState<{ show: boolean; template: TemplateSummary | null }>({
        show: false,
        template: null,
    });

    const { data, setData, post, processing, errors, transform } = useForm(initialFormState);

    transform((payload) => ({
        parent_id: payload.parent_id || null,
        administrative_unit_id: payload.administrative_unit_id || null,
        name: payload.name,
        slug: payload.slug,
        kind: payload.kind,
        description: payload.description,
        field_schema: payload.field_schema,
        layout: payload.layout,
        child_editable_keys: payload.child_editable_keys,
        sort_order: payload.sort_order,
        status: payload.status,
    }));

    const action = useFormResponse({ loadingMessage: 'Creating template...' });

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

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

    return (
        <>
            <Head title="Create document template" />

            <CreatePageLayout
                indexHref={route('admin.qr-codes.documentations.templates')}
                form={
                    <form className={formClassName} noValidate onSubmit={handleSubmit}>
                        <FormSection title="Details">
                            <p className={`${formHelpClassName} mb-4`}>
                                Start from a preset or blank template, then set identity and status. Columns are edited
                                on the template page after you save.
                            </p>
                            <DocumentTemplateFormFields
                                data={data}
                                errors={errors}
                                parents={parents}
                                units={units}
                                presets={presets}
                                presetSchemas={presetSchemas}
                                fieldTypes={fieldTypes}
                                styleOptions={styleOptions}
                                qrPositionOptions={qrPositionOptions}
                                editableKeyOptions={editableKeyOptions}
                                section="details"
                                setData={setData}
                            />
                        </FormSection>

                        <FormSection title="Design">
                            <DocumentTemplateFormFields
                                data={data}
                                errors={errors}
                                parents={parents}
                                units={units}
                                presets={presets}
                                presetSchemas={presetSchemas}
                                fieldTypes={fieldTypes}
                                styleOptions={styleOptions}
                                qrPositionOptions={qrPositionOptions}
                                editableKeyOptions={editableKeyOptions}
                                section="design"
                                setData={setData}
                            />
                        </FormSection>

                        {!data.parent_id && (
                            <FormSection title="Child access">
                                <DocumentTemplateFormFields
                                    data={data}
                                    errors={errors}
                                    parents={parents}
                                    units={units}
                                    presets={presets}
                                    presetSchemas={presetSchemas}
                                    fieldTypes={fieldTypes}
                                    styleOptions={styleOptions}
                                    qrPositionOptions={qrPositionOptions}
                                    editableKeyOptions={editableKeyOptions}
                                    section="children"
                                    setData={setData}
                                />
                            </FormSection>
                        )}

                        <button type="submit" className="ti-btn ti-btn-primary" disabled={processing}>
                            Save
                        </button>
                    </form>
                }
                sidebar={
                    <DataTable
                        data={templates}
                        columns={sidebarColumns}
                        title="Templates"
                        compact
                        onEdit={
                            canEdit
                                ? (row) =>
                                      router.visit(
                                          route('admin.qr-codes.documentations.templates.edit', row.id),
                                      )
                                : undefined
                        }
                        onDelete={canDelete ? (row) => setDeleteModal({ show: true, template: row }) : undefined}
                        showEdit={canEdit}
                        showDelete={canDelete}
                        noDataText="No templates yet"
                    />
                }
            />

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

export default Object.assign(CreateDocumentTemplate, {
    layout: dashboardPersistentLayout('Create document template', 'Add a parent or child document template'),
});