import { formClassName, formHelpClassName, primarySoftButtonClassName } from '@admin/components/ui/field-styles';
import { FormSection } from '@admin/components/ui/forms/form-section';
import { useFormResponse } from '@admin/hooks/use-form-response';
import { useCrudPermissions } from '@admin/hooks/use-crud-permissions';
import { dashboardPersistentLayout } from '@admin/layouts/dashboard-page-layout';
import { cn } from '@admin/lib/utils';
import {
    DocumentTemplateFormFields,
    type DocumentTemplateFormData,
    type DocumentTemplateFormSection,
} from '@admin/pages/qr-codes/documentations/templates/document-template-form-fields';
import {
    emptyDocumentLayout,
    type DocumentBlockTypeOption,
    type DocumentPresetOption,
    type DocumentPresetSchema,
    type DocumentSelectOption,
    type DocumentTemplateOption,
} from '@admin/types/document';
import type { AdministrativeUnitOption } from '@admin/types/administrative-unit';
import { Head, Link, useForm } from '@inertiajs/react';
import { FormEvent, useMemo, useState } from 'react';

type TemplateRecord = {
    id: number;
    parent_id: number | null;
    parent_name: string | null;
    administrative_unit_id: number | null;
    unit_name?: string | null;
    name: string;
    slug: string;
    kind: string;
    description: string | null;
    is_child: boolean;
    field_schema: DocumentTemplateFormData['field_schema'];
    layout: DocumentTemplateFormData['layout'];
    child_editable_keys: string[];
    sort_order: number;
    status: boolean;
};

type EditDocumentTemplatePageProps = {
    template: TemplateRecord;
    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[];
};

type TabId = Exclude<DocumentTemplateFormSection, 'all'>;

function EditDocumentTemplatePage({
    template,
    parents,
    presets,
    preset_schemas: presetSchemas,
    field_types: fieldTypes,
    style_options: styleOptions,
    qr_position_options: qrPositionOptions,
    editable_key_options: editableKeyOptions,
    units,
}: EditDocumentTemplatePageProps) {
    const { canEdit } = useCrudPermissions('documentation');
    const [activeTab, setActiveTab] = useState<TabId>('design');

    const { data, setData, put, processing, errors } = useForm<DocumentTemplateFormData>({
        parent_id: template.parent_id ? String(template.parent_id) : '',
        administrative_unit_id: template.administrative_unit_id ? String(template.administrative_unit_id) : '',
        name: template.name,
        slug: template.slug,
        kind: template.kind,
        description: template.description ?? '',
        preset:
            template.layout?.style === 'invoice'
                ? 'invoice'
                : template.layout?.style === 'builder'
                  ? 'builder'
                  : 'blank',
        field_schema: template.field_schema ?? [],
        layout: { ...emptyDocumentLayout(), ...(template.layout ?? {}) },
        child_editable_keys: template.child_editable_keys ?? [],
        sort_order: template.sort_order,
        status: template.status,
    });

    const action = useFormResponse({ loadingMessage: 'Saving template…' });

    const tabs = useMemo(() => {
        const items: Array<{ id: TabId; label: string; icon: string; hint: string }> = [
            { id: 'details', label: 'Details', icon: 'ri-file-info-line', hint: 'Name, status, and identity' },
            { id: 'fields', label: 'Columns', icon: 'ri-table-line', hint: 'Data columns for records' },
            { id: 'design', label: 'Design', icon: 'ri-palette-line', hint: 'Style, branding, and layout' },
        ];

        if (!template.is_child) {
            items.push({
                id: 'children',
                label: 'Child access',
                icon: 'ri-git-branch-line',
                hint: 'What child templates may override',
            });
        }

        return items;
    }, [template.is_child]);

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

        put(`/admin/api/update_document_template/${template.id}`, {
            onStart: action.onStart,
            onSuccess: action.onSuccess,
            onError: action.onError,
            preserveScroll: true,
        });
    };

    const active = tabs.find((tab) => tab.id === activeTab) ?? tabs[0];
    const builderUrl =
        data.layout.style === 'builder'
            ? route('admin.qr-codes.documentations.templates.builder', template.id)
            : null;

    return (
        <>
            <Head title={`Edit · ${template.name}`} />

            <div className="mb-4 flex flex-wrap items-start justify-between gap-3">
                <div>
                    <p className="text-sm text-textmuted">
                        <Link
                            href={route('admin.qr-codes.documentations.templates')}
                            className="text-primary hover:underline"
                        >
                            Templates
                        </Link>
                        <span className="mx-2">/</span>
                        Edit
                    </p>
                    <h1 className="text-xl font-semibold">{template.name}</h1>
                    <p className={formHelpClassName}>
                        {template.is_child
                            ? `Child template${template.parent_name ? ` of ${template.parent_name}` : ''}. Columns are inherited.`
                            : 'Configure details, columns, and design in separate tabs.'}
                    </p>
                </div>
                <div className="flex flex-wrap gap-2">
                    <Link
                        href={route('admin.qr-codes.documentations.templates')}
                        className={primarySoftButtonClassName}
                    >
                        Back to list
                    </Link>
                    {builderUrl && (
                        <a
                            href={builderUrl}
                            target="_blank"
                            rel="noopener noreferrer"
                            className={primarySoftButtonClassName}
                        >
                            <i className="ri-external-link-line me-1" />
                            Visual builder
                        </a>
                    )}
                    {canEdit && (
                        <button
                            type="button"
                            className="ti-btn ti-btn-primary"
                            disabled={processing}
                            onClick={() => handleSave()}
                        >
                            {processing ? 'Saving…' : 'Save changes'}
                        </button>
                    )}
                </div>
            </div>

            <div className="mb-4 flex flex-wrap gap-2 border-b border-defaultborder pb-3 dark:border-white/10">
                {tabs.map((tab) => (
                    <button
                        key={tab.id}
                        type="button"
                        className={cn(
                            'inline-flex items-center gap-2 rounded-sm px-3 py-2 text-sm font-medium transition',
                            activeTab === tab.id
                                ? 'bg-primary text-white'
                                : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-black/20 dark:text-white/80 dark:hover:bg-black/30',
                        )}
                        onClick={() => setActiveTab(tab.id)}
                    >
                        <i className={tab.icon} />
                        {tab.label}
                    </button>
                ))}
            </div>

            <form className={formClassName} noValidate onSubmit={handleSave}>
                <FormSection title={active.label} className="box mb-4">
                    <p className={cn('mb-4', formHelpClassName)}>{active.hint}</p>
                    <DocumentTemplateFormFields
                        data={data}
                        errors={errors}
                        parents={parents}
                        units={units}
                        presets={presets}
                        presetSchemas={presetSchemas}
                        fieldTypes={fieldTypes}
                        styleOptions={styleOptions}
                        qrPositionOptions={qrPositionOptions}
                        editableKeyOptions={editableKeyOptions}
                        templateId={template.id}
                        lockParent
                        section={activeTab}
                        setData={setData}
                    />
                </FormSection>

                {canEdit && (
                    <div className="flex flex-wrap items-center justify-between gap-3">
                        <p className={formHelpClassName}>Changes apply to all tabs when you save.</p>
                        <button type="submit" className="ti-btn ti-btn-primary" disabled={processing}>
                            {processing ? 'Saving…' : 'Save changes'}
                        </button>
                    </div>
                )}
            </form>
        </>
    );
}

export default Object.assign(EditDocumentTemplatePage, {
    layout: dashboardPersistentLayout('Edit document template', 'Details, columns, and design in one place'),
});