import { router } from '@inertiajs/react';
import { Loader2 } from 'lucide-react';
import { useState } from 'react';
import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogBody,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogIconClose,
    DialogTitle,
} from '@/components/ui/dialog';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import type { DocumentReviewAction } from '@/features/documents/lib/review-workflow';
import { useI18n } from '@/hooks/use-i18n';

type ReviewActionDialogProps = {
    documentId: number;
    action: DocumentReviewAction | null;
    open: boolean;
    title: string;
    description: string;
    reasonLabel: string;
    reasonPlaceholder: string;
    reasonRequired: boolean;
    onOpenChange: (open: boolean) => void;
};

type ReviewActionDialogFormData = {
    reason: string;
};

export function ReviewActionDialog({
    documentId,
    action,
    open,
    title,
    description,
    reasonLabel,
    reasonPlaceholder,
    reasonRequired,
    onOpenChange,
}: ReviewActionDialogProps) {
    const { t } = useI18n();
    const [form, setForm] = useState<ReviewActionDialogFormData>({
        reason: '',
    });
    const [errors, setErrors] = useState<{ reason?: string; action?: string }>({});
    const [isSubmitting, setIsSubmitting] = useState(false);

    const closeDialog = () => {
        onOpenChange(false);
        setForm({ reason: '' });
        setErrors({});
    };

    const submit = () => {
        if (!action) {
            return;
        }

        router.post(
            `/admin/documents/${documentId}/review`,
            {
                action,
                reason: form.reason,
            },
            {
                preserveScroll: true,
                preserveState: true,
                onStart: () => {
                    setIsSubmitting(true);
                    setErrors({});
                },
                onError: (pageErrors) => {
                    setErrors({
                        reason: pageErrors.reason,
                        action: pageErrors.action,
                    });
                },
                onSuccess: closeDialog,
                onFinish: () => setIsSubmitting(false),
            },
        );
    };

    return (
        <Dialog open={open} onOpenChange={(nextOpen) => (!nextOpen ? closeDialog() : onOpenChange(nextOpen))}>
            <DialogContent className="gap-0 sm:max-w-lg">
                <DialogHeader>
                    <div className="flex items-start justify-between gap-3">
                        <div className="min-w-0">
                            <DialogTitle>{title}</DialogTitle>
                            <DialogDescription>{description}</DialogDescription>
                        </div>
                        <DialogIconClose />
                    </div>
                </DialogHeader>

                <DialogBody className="space-y-2">
                    <Label htmlFor="review-reason">
                        {reasonLabel}
                        {reasonRequired ? ' *' : ''}
                    </Label>
                    <Textarea
                        id="review-reason"
                        rows={4}
                        value={form.reason}
                        placeholder={reasonPlaceholder}
                        onChange={(event) => setForm((current) => ({ ...current, reason: event.target.value }))}
                        disabled={isSubmitting}
                    />
                    {errors.reason ? (
                        <p className="text-sm text-destructive">{errors.reason}</p>
                    ) : null}
                    {errors.action ? (
                        <p className="text-sm text-destructive">{errors.action}</p>
                    ) : null}
                </DialogBody>

                <DialogFooter>
                    <Button type="button" variant="outline" onClick={closeDialog} disabled={isSubmitting}>
                        {t('documents.admin_show.review_dialog.cancel')}
                    </Button>
                    <Button type="button" onClick={submit} disabled={isSubmitting}>
                        {isSubmitting ? (
                            <span className="inline-flex items-center gap-2">
                                <Loader2 className="h-4 w-4 animate-spin" />
                                {t('documents.admin_show.review_dialog.saving')}
                            </span>
                        ) : (
                            t('documents.admin_show.review_dialog.confirm')
                        )}
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}