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 } 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 EditPhrase from '@admin/pages/marquee-phrases/edit-phrase';
import { PhraseFormFields } from '@admin/pages/marquee-phrases/phrase-form-fields';
import { Head, useForm } from '@inertiajs/react';
import { FormEvent, useState } from 'react';

type PhraseSummary = { id: number; phrase: string; status: boolean };
type PhraseRecord = PhraseSummary & { sort_order?: number };

const sidebarColumns: DataTableColumn<PhraseSummary>[] = [
    { header: 'Phrase', key: 'phrase', truncate: true },
    { header: 'Status', key: 'status', className: 'w-24' },
];

function CreatePhrase({ phrases }: { phrases: PhraseSummary[] }) {
    const { canEdit, canDelete } = useCrudPermissions('marquee-phrase');
    const [isEditModalOpen, setIsEditModalOpen] = useState(false);
    const [initialData, setInitialData] = useState<PhraseRecord | null>(null);
    const [deleteModal, setDeleteModal] = useState<{ show: boolean; phrase: PhraseSummary | null }>({ show: false, phrase: null });
    const { data, setData, post, processing, errors, reset } = useForm({ phrase: '', sort_order: phrases.length + 1, status: true });
    const action = useFormResponse({ onComplete: () => reset(), loadingMessage: 'Saving phrase...' });

    const handleSubmit = (event: FormEvent) => {
        event.preventDefault();
        post('/admin/api/create_marquee_phrase', { onStart: action.onStart, onSuccess: action.onSuccess, onError: action.onError, preserveScroll: true });
    };

    const handleEdit = async (row: PhraseSummary) => {
        try {
            const response = await fetch(`/admin/edit_marquee_phrase/${row.id}`);
            if (!response.ok) {
                throw new Error('Failed');
            }
            setInitialData((await response.json()) as PhraseRecord);
            setIsEditModalOpen(true);
        } catch {
            adminToast.error('Could not load phrase');
        }
    };

    return (
        <>
            <Head title="Add phrase" />
            <CreatePageLayout
                indexHref={route('admin.marquee-phrases')}
                form={
                    <div className="box">
                        <div className="box-header"><h5 className="box-title">Add phrase</h5></div>
                        <div className="box-body">
                            <form className={formClassName} noValidate onSubmit={handleSubmit}>
                                <PhraseFormFields data={data} errors={errors} setData={setData} />
                                <button type="submit" className="ti-btn ti-btn-primary" disabled={processing}>Save</button>
                            </form>
                        </div>
                    </div>
                }
                sidebar={<DataTable data={phrases} columns={sidebarColumns} title="Phrases" compact onEdit={canEdit ? handleEdit : undefined} onDelete={canDelete ? (row) => setDeleteModal({ show: true, phrase: row }) : undefined} showEdit={canEdit} showDelete={canDelete} noDataText="No phrases yet" />}
            />
            <DeleteConfirmationModal isOpen={deleteModal.show} onClose={() => setDeleteModal({ show: false, phrase: null })} itemName={deleteModal.phrase?.phrase || 'this phrase'} itemType="phrase" deleteEndpoint={`/admin/api/delete_marquee_phrase/${deleteModal.phrase?.id ?? ''}`} loadingMessage="Deleting phrase..." />
            <EditPhrase isOpen={isEditModalOpen} onClose={() => setIsEditModalOpen(false)} initialData={initialData} />
        </>
    );
}

export default Object.assign(CreatePhrase, { layout: dashboardPersistentLayout('Add phrase', 'Add a word to the homepage marquee') });