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 { FormSelect } from '@admin/components/ui/forms/form-select';
import { QrFormatDownloads } from '@admin/components/qr/qr-format-downloads';
import { QrPreviewImage } from '@admin/components/qr/qr-preview-image';
import { QrSettingsForm } from '@admin/components/qr/qr-settings-form';
import { TableActionTooltip } from '@admin/components/ui/table-action-tooltip';
import { formHelpClassName, tableStatusClassName } from '@admin/components/ui/field-styles';
import { useCrudPermissions } from '@admin/hooks/use-crud-permissions';
import { useQrCodeSettings } from '@admin/hooks/use-qr-code-settings';
import { dashboardPersistentLayout } from '@admin/layouts/dashboard-page-layout';
import { buildQrUrl } from '@admin/lib/qr-code';
import { cn } from '@admin/lib/utils';
import EditDocumentRecord from '@admin/pages/qr-codes/documentations/edit-document-record';
import type { QrCodeDefaults } from '@admin/types/qr-code';
import type { AdministrativeUnitOption } from '@admin/types/administrative-unit';
import {
    templateLabel,
    type DocumentRecordRow,
    type DocumentTemplateOption,
} from '@admin/types/document';
import { Head, Link } from '@inertiajs/react';
import { useMemo, useState } from 'react';

type DocumentationsIndexProps = {
    records: DocumentRecordRow[];
    templates: DocumentTemplateOption[];
    defaults: QrCodeDefaults;
    can_manage_templates: boolean;
    can_choose_unit: boolean;
    current_unit: { id: number; name: string } | null;
    units: AdministrativeUnitOption[];
    creators: Array<{ id: number; name: string }>;
};

function DocumentationsIndex({
    records,
    templates,
    defaults,
    can_manage_templates: canManageTemplates,
    can_choose_unit: canChooseUnit,
    units,
    creators,
}: DocumentationsIndexProps) {
    const { canEdit, canDelete } = useCrudPermissions('documentation');
    const settings = useQrCodeSettings(defaults);
    const [templateFilter, setTemplateFilter] = useState('');
    const [statusFilter, setStatusFilter] = useState('');
    const [unitFilter, setUnitFilter] = useState('');
    const [creatorFilter, setCreatorFilter] = useState('');
    const [isEditModalOpen, setIsEditModalOpen] = useState(false);
    const [initialData, setInitialData] = useState<Record<string, unknown> | null>(null);
    const [deleteModal, setDeleteModal] = useState<{ show: boolean; record: DocumentRecordRow | null }>({
        show: false,
        record: null,
    });

    const filteredRecords = useMemo(
        () =>
            records.filter((row) => {
                if (templateFilter && String(row.document_template_id) !== templateFilter) {
                    return false;
                }

                if (unitFilter && String(row.administrative_unit_id ?? '') !== unitFilter) {
                    return false;
                }

                if (creatorFilter && String(row.created_by ?? '') !== creatorFilter) {
                    return false;
                }

                if (statusFilter === '1') {
                    return row.status === true;
                }

                if (statusFilter === '0') {
                    return row.status === false;
                }

                return true;
            }),
        [records, templateFilter, statusFilter, unitFilter, creatorFilter],
    );

    const columns: DataTableColumn<DocumentRecordRow>[] = [
        {
            header: 'Reference',
            key: 'reference',
            truncate: true,
            className: 'w-36',
        },
        {
            header: 'Template',
            key: 'template_name',
            truncate: false,
            render: (row) => row.template_name ?? '—',
        },
        {
            header: 'Unit',
            key: 'unit_name',
            truncate: true,
            render: (row) => row.unit_name ?? '—',
        },
        {
            header: 'Created by',
            key: 'created_by_name',
            truncate: true,
            render: (row) => row.created_by_name ?? '—',
        },
        {
            header: 'Preview',
            key: 'verification_url',
            className: tableStatusClassName,
            render: (row) => (
                <TableActionTooltip
                    href={row.verification_url}
                    label="Open"
                    tooltip="Preview document"
                    target="_blank"
                    uppercase={false}
                />
            ),
        },
        {
            header: 'QR',
            key: 'preview_url',
            className: 'w-24',
            render: (row) => (
                <QrPreviewImage
                    src={buildQrUrl(row.preview_url, { ...settings.previewOptions, format: 'png' })}
                    alt={`${row.reference} QR code`}
                    size={56}
                />
            ),
        },
        {
            header: 'Download',
            key: 'kind',
            className: 'w-56',
            render: (row) => (
                <QrFormatDownloads
                    baseUrl={row.preview_url}
                    formats={[...settings.formats.filter((format) => format !== 'pdf'), 'pdf']}
                    pdfHref={row.download_url}
                    {...settings.qrOptions}
                />
            ),
        },
        { header: 'Status', key: 'status', className: tableStatusClassName },
    ];

    const handleEdit = async (row: DocumentRecordRow) => {
        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');
        }
    };

    return (
        <>
            <Head title="Documentations" />

            <div className="grid grid-cols-12 gap-6">
                <div className="col-span-12">
                    <QrSettingsForm settings={settings} />
                </div>

                <div className="col-span-12">
                    <div className="mb-4 flex flex-wrap gap-2">
                        <CrudCreateLink
                            href={route('admin.qr-codes.documentations.create')}
                            label="Create document"
                            resource="documentation"
                            className="ti-btn ti-btn-primary"
                        />
                        {canManageTemplates && (
                            <Link
                                href={route('admin.qr-codes.documentations.templates')}
                                className="ti-btn ti-btn-outline-primary"
                            >
                                Templates
                            </Link>
                        )}
                    </div>
                    <p className={cn('mb-4', formHelpClassName)}>
                        Each record generates a QR code that opens the public verification page, with print and download.
                    </p>

                    <div className="mb-4 grid grid-cols-12 gap-4">
                        {canChooseUnit && (
                            <div className="col-span-12 sm:col-span-4 lg:col-span-3">
                                <FormSelect
                                    label="Unit"
                                    value={unitFilter}
                                    placeholder="All units"
                                    options={units.map((unit) => ({
                                        value: String(unit.id),
                                        label: unit.name,
                                    }))}
                                    onChange={setUnitFilter}
                                />
                            </div>
                        )}
                        {creators.length > 0 && (
                            <div className="col-span-12 sm:col-span-4 lg:col-span-3">
                                <FormSelect
                                    label="Created by"
                                    value={creatorFilter}
                                    placeholder="All users"
                                    options={creators.map((creator) => ({
                                        value: String(creator.id),
                                        label: creator.name,
                                    }))}
                                    onChange={setCreatorFilter}
                                />
                            </div>
                        )}
                        <div className="col-span-12 sm:col-span-4 lg:col-span-3">
                            <FormSelect
                                label="Template"
                                value={templateFilter}
                                placeholder="All templates"
                                options={templates.map((template) => ({
                                    value: String(template.id),
                                    label: templateLabel(template),
                                }))}
                                onChange={setTemplateFilter}
                            />
                        </div>
                        <div className="col-span-12 sm:col-span-4 lg:col-span-3">
                            <FormSelect
                                label="Status"
                                value={statusFilter}
                                placeholder="All statuses"
                                sortAlphabetically={false}
                                options={[
                                    { value: '1', label: 'Active' },
                                    { value: '0', label: 'Inactive' },
                                ]}
                                onChange={setStatusFilter}
                            />
                        </div>
                    </div>

                    <DataTable
                        data={filteredRecords}
                        columns={columns}
                        title="Documentations"
                        itemsPerPage={10}
                        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 found"
                    />
                </div>
            </div>

            <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(DocumentationsIndex, {
    layout: dashboardPersistentLayout('Documentations', 'QR-backed documents with public verification'),
});