import { AlertTriangle } from 'lucide-react';
import { Button } from '@/Components/ui/button';
import {
    Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle,
} from '@/Components/ui/dialog';

/**
 * "These fields are still empty" popup for long form pages.
 *
 * Names every missing field explicitly instead of saying "please complete the form" — on a
 * two-column, collapsible-section page the generic wording leaves the user hunting, which is
 * exactly the failure this replaces.
 *
 * Deliberately the project Dialog, never window.alert(): alert() cannot list, cannot be styled,
 * cannot offer a jump action, and blocks the whole page (banned outright — see
 * .claude/rules/notifications.md and ATURAN ABSOLUT).
 *
 * Not a notification channel: it says nothing about a request. It is a pre-submit gate, and the
 * toast + inline field errors keep their existing jobs untouched.
 *
 * @param {Array<{key: string, label: string}>} fields  missing fields, in form order
 * @param {() => void} onFix  close and jump to the first empty control
 */
export function RequiredFieldsDialog({ open, onOpenChange, fields = [], onFix, title, description }) {
    const count = fields.length;

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="sm:max-w-lg">
                <DialogHeader>
                    <DialogTitle className="flex items-center gap-2.5">
                        <span className="inline-grid size-8 shrink-0 place-items-center rounded-md bg-danger-bg text-danger-text">
                            <AlertTriangle aria-hidden="true" className="size-4.5" />
                        </span>
                        {title ?? `${count} field wajib belum diisi`}
                    </DialogTitle>
                    <DialogDescription>
                        {description ?? 'Lengkapi field berikut dulu, lalu simpan lagi.'}
                    </DialogDescription>
                </DialogHeader>

                {/* max-h + scroll: the list is as long as the form demands, and the dialog must
                    not grow past the viewport on a short screen. */}
                <ul className="max-h-64 list-none overflow-y-auto rounded-lg border border-danger/30 bg-danger-bg/40 p-1">
                    {fields.map((field) => (
                        <li
                            key={field.key}
                            className="flex items-center gap-2.5 px-2.5 py-1.5 text-[12px] font-semibold text-card-foreground"
                        >
                            <span aria-hidden="true" className="size-1.5 shrink-0 rounded-full bg-danger" />
                            {field.label}
                        </li>
                    ))}
                </ul>

                {/* Primary FIRST, row left-aligned — DialogFooter already defaults to
                    sm:justify-start (see .claude/rules/ui-conventions.md). */}
                <DialogFooter>
                    <Button type="button" onClick={onFix}>Isi Sekarang</Button>
                    <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>Tutup</Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}