import { useEffect, useMemo, useState } from 'react';
import { ArrowLeft } from 'lucide-react';
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '../../../../components/ui/dialog';
import { DismissibleAlert } from '../../../../components/ui/dismissible-alert';
import { usePublicFormService } from '../../../../services/PublicFormService.tsx';
import { describePublicFormChanges, PublicFormSnapshot } from '../../../../utils/publicFormChanges.ts';
import { EmptyState } from '../../../../components/ui/empty-state';

interface Props {
    formHandle: string;
    draft: PublicFormSnapshot;
    publishing: boolean;
    error?: string;
    onBack: () => void;
    onClose?: () => void;
    onConfirm: () => void;
}

const VERB = { added: 'Added', removed: 'Removed', changed: 'Changed' } as const;

export function PublishedFormUpdateReview({ formHandle, draft, publishing, error, onBack, onClose, onConfirm }: Props) {
    const { getPublishedSnapshot } = usePublicFormService();
    const [live, setLive] = useState<PublicFormSnapshot>();
    const [readFailed, setReadFailed] = useState(false);
    const [attempt, setAttempt] = useState(0);

    useEffect(() => {
        let current = true;
        setLive(undefined);
        setReadFailed(false);
        getPublishedSnapshot(formHandle)
            .then((snapshot) => current && setLive(snapshot))
            .catch(() => current && setReadFailed(true));
        return () => {
            current = false;
        };
    }, [formHandle, attempt, getPublishedSnapshot]);

    const changes = useMemo(() => (live ? describePublicFormChanges(live, draft) : []), [live, draft]);

    return (
        <Dialog open onOpenChange={(open) => { if (!open) (onClose ?? onBack)(); }}>
            <DialogContent className="flex flex-col gap-0 p-0 w-full max-w-lg">
                <DialogHeader className="ak-overlay__header border-b border-border">
                    <DialogTitle>Update published form?</DialogTitle>
                </DialogHeader>

                <div className="ak-overlay__body flex flex-col gap-3">
                    {error && (
                        <DismissibleAlert status="error">
                            <div className="whitespace-pre-line">{error}</div>
                        </DismissibleAlert>
                    )}

                    <p className="ak-body">{draft.title}</p>

                    {readFailed ? (
                        <DismissibleAlert status="error">
                            The published version could not be read, so the changes cannot be shown. Nothing has been updated.
                            <div className="mt-2">
                                <button type="button" className="btn btn-blue-ghost-sm" onClick={() => setAttempt((count) => count + 1)}>
                                    Try again
                                </button>
                            </div>
                        </DismissibleAlert>
                    ) : !live ? (
                        <p className="ak-status-line">Comparing with the published version...</p>
                    ) : changes.length === 0 ? (
                        <EmptyState size="compact" title="This draft matches the published form." description="There is nothing to update." />
                    ) : (
                        <ul aria-label="Changes to the published form" className="ak-body ak-bullets">
                            {changes.map((change, index) => (
                                <li key={change.kind + change.label + index}>
                                    {VERB[change.kind]}: {change.label}
                                    {change.details.length > 0 && (
                                        <small className="block">{change.details.join('; ')}</small>
                                    )}
                                </li>
                            ))}
                        </ul>
                    )}

                    <p className="ak-notice">
                        This updates the form wherever it is already embedded. Existing submissions are retained. It does
                        not create, edit or publish a WordPress page.
                    </p>
                </div>

                <DialogFooter className="ak-overlay__footer flex-row">
                    <button type="button" className="btn btn-blue-ghost mr-auto" onClick={onBack} disabled={publishing}>
                        <ArrowLeft className="size-4" aria-hidden="true"/>
                        Back
                    </button>
                    <button type="button"
                            className="btn btn-green"
                            onClick={onConfirm}
                            disabled={publishing || !live || changes.length === 0}>
                        {publishing ? 'Updating...' : 'Update published form'}
                    </button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}