import React, { useEffect, useState } from 'react';
import tw from 'twin.macro';
import { Dialog } from '@/components/elements/dialog';
import { Button } from '@/components/elements/button';
import Input from '@/components/elements/Input';
import Label from '@/components/elements/Label';
import FlashMessageRender from '@/components/FlashMessageRender';
import useFlash from '@/plugins/useFlash';
import { ServerContext } from '@/state/server';
import { httpErrorToHuman } from '@/api/http';
import { dropTable, OperationResponse } from '../api/tableDataOperations';

interface DeleteTableDialogContext {
    databaseId: string;
    tableName: string;
}

interface DeleteTableDialogProps {
    open: boolean;
    onClose: () => void;
    context: DeleteTableDialogContext;
    onSuccess?: (response: OperationResponse) => void;
}

const FLASH_KEY = 'database:content:delete-table-dialog';

const DeleteTableDialog = ({ open, onClose, context, onSuccess }: DeleteTableDialogProps) => {
    const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
    const { clearFlashes, addError } = useFlash();

    const [isSubmitting, setIsSubmitting] = useState(false);
    const [force, setForce] = useState(false);
    const [confirmationText, setConfirmationText] = useState('');

    useEffect(() => {
        if (!open) {
            clearFlashes(FLASH_KEY);
            setIsSubmitting(false);
            setForce(false);
            setConfirmationText('');
            return;
        }

        clearFlashes(FLASH_KEY);
    }, [open]);

    const canDelete =
        !!context.databaseId.trim() && !!context.tableName.trim() && confirmationText.trim() === context.tableName;

    const submit = async () => {
        clearFlashes(FLASH_KEY);

        if (!context.databaseId.trim() || !context.tableName.trim()) {
            addError({ key: FLASH_KEY, message: 'Database table context is missing. Close and reopen the dialog.' });
            return;
        }

        if (confirmationText.trim() !== context.tableName) {
            addError({ key: FLASH_KEY, message: 'Confirmation text must match the table name.' });
            return;
        }

        setIsSubmitting(true);

        try {
            const response = await dropTable(uuid, context.databaseId, context.tableName, force);

            if (!response.success) {
                throw new Error(response.error || 'Failed to delete table.');
            }

            onSuccess?.(response);
            onClose();
        } catch (error) {
            addError({ key: FLASH_KEY, message: httpErrorToHuman(error) });
        }

        setIsSubmitting(false);
    };

    return (
        <Dialog
            open={open}
            onClose={onClose}
            title={'Delete table'}
            description={`This will permanently delete table "${context.tableName || '-'}".`}
            preventExternalClose={isSubmitting}
        >
            <div css={tw`mt-6 space-y-4`}>
                <FlashMessageRender byKey={FLASH_KEY} css={tw`mb-2`} />

                <p css={tw`text-sm text-neutral-300`}>
                    Type the table name to confirm deletion. Enable force to override related foreign key checks.
                </p>

                <div>
                    <Label htmlFor={'delete-table-confirmation'}>Confirm table name</Label>
                    <Input
                        id={'delete-table-confirmation'}
                        value={confirmationText}
                        onChange={(event) => setConfirmationText(event.currentTarget.value)}
                        disabled={isSubmitting}
                    />
                </div>

                <div css={tw`flex items-center`}>
                    <Input
                        id={'delete-table-force'}
                        type={'checkbox'}
                        checked={force}
                        onChange={(event) => setForce(event.currentTarget.checked)}
                        disabled={isSubmitting}
                    />
                    <Label htmlFor={'delete-table-force'} css={tw`ml-3 mb-0`}>
                        Force override
                    </Label>
                </div>
            </div>

            <Dialog.Footer>
                <Button type={'button'} variant={Button.Variants.Secondary} onClick={onClose} disabled={isSubmitting}>
                    Cancel
                </Button>
                <Button.Danger type={'button'} onClick={submit} disabled={isSubmitting || !canDelete}>
                    Delete Table
                </Button.Danger>
            </Dialog.Footer>
        </Dialog>
    );
};

export default DeleteTableDialog;