import { ReactNode } from 'react';
import { Button, Modal } from '@heroui/react';

interface FormModalProps {
    isOpen: boolean;
    onOpenChange: (open: boolean) => void;
    title: string;
    subtitle?: string;
    icon?: ReactNode;
    children: ReactNode;
    onSubmit: () => void;
    submitLabel?: string;
    isSubmitting?: boolean;
}

export function FormModal({ isOpen, onOpenChange, title, subtitle, icon, children, onSubmit, submitLabel = 'Simpan', isSubmitting }: FormModalProps) {
    return (
        <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
            <Modal.Backdrop>
                <Modal.Container>
                    <Modal.Dialog className="max-w-2xl w-full bg-gray-50">
                        <Modal.Header className="flex-row! items-center gap-3 pb-3 mb-2 border-b border-gray-200">
                            {icon && <Modal.Icon className="bg-sky-100 text-sky-600">{icon}</Modal.Icon>}
                            <div>
                                <Modal.Heading>{title}</Modal.Heading>
                                {subtitle && <p className="text-sm text-muted">{subtitle}</p>}
                            </div>
                        </Modal.Header>
                        <Modal.CloseTrigger />
                        <Modal.Body>
                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-4 items-start max-h-[60vh] overflow-y-auto pl-2 pr-3 py-1">
                                {children}
                            </div>
                        </Modal.Body>
                        <Modal.Footer className="border-t border-gray-200 pt-3 mt-2">
                            <Button variant="outline" onPress={() => onOpenChange(false)}>
                                Batal
                            </Button>
                            <Button variant="primary" onPress={onSubmit} isDisabled={isSubmitting}>
                                {isSubmitting ? 'Menyimpan...' : submitLabel}
                            </Button>
                        </Modal.Footer>
                    </Modal.Dialog>
                </Modal.Container>
            </Modal.Backdrop>
        </Modal>
    );
}

export function FormSection({ label, first }: { label: string; first?: boolean }) {
    return (
        <div className={`sm:col-span-2 ${first ? '' : 'border-t border-gray-200 pt-4'}`}>
            <span className="text-xs font-semibold uppercase tracking-wide text-gray-500">{label}</span>
        </div>
    );
}

export function FullWidth({ children }: { children: ReactNode }) {
    return <div className="sm:col-span-2">{children}</div>;
}