/**
 * Configure Knowledge Base Dialog Component
 * @description Dialog for managing knowledge base collections
 */

import { useEscapeKey, useBodyScrollLock } from '@/hooks';
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
    DialogDescription,
    DialogClose,
} from './dialog';

/**
 * ConfigureKnowledgeBaseDialog component props
 */
interface ConfigureKnowledgeBaseDialogProps {
    /** Whether the dialog is open */
    open: boolean;
    /** Callback when dialog open state changes */
    onOpenChange: (open: boolean) => void;
    /** Callback when Add Knowledge Base button is clicked */
    onAddKnowledgeBase?: () => void;
}

/**
 * ConfigureKnowledgeBaseDialog component
 * @description Modal dialog for managing knowledge base collections with empty state
 * @param props - Component props
 * @returns {JSX.Element} ConfigureKnowledgeBaseDialog element
 */
export function ConfigureKnowledgeBaseDialog({
    open,
    onOpenChange,
    onAddKnowledgeBase,
}: ConfigureKnowledgeBaseDialogProps): JSX.Element {
    useEscapeKey(() => onOpenChange(false), open);
    useBodyScrollLock(open);

    /**
     * Handle Add Knowledge Base button click
     * @description Triggers the onAddKnowledgeBase callback and closes dialog
     */
    const handleAddKnowledgeBase = (): void => {
        if (onAddKnowledgeBase) {
            onAddKnowledgeBase();
        }
        onOpenChange(false);
    };

    /**
     * Handle keyboard events on Add Knowledge Base button
     * @description Handles Enter and Space key presses
     * @param e - Keyboard event
     */
    const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>): void => {
        if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            handleAddKnowledgeBase();
        }
    };

    // Icon from Figma design - database icon with exclamation
    const emptyStateIcon = 'https://www.figma.com/api/mcp/asset/31344752-2e10-42c5-9678-5d2cb0b3dadb';

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="w-[620px]">
                <DialogHeader>
                    <div className="flex flex-col gap-0.5">
                        <DialogTitle className="font-semibold text-[22px] text-black leading-normal">
                            Add Knowledge Base
                        </DialogTitle>
                        <DialogDescription className="font-normal text-sm text-[rgba(0,0,0,0.75)] max-w-[484px]">
                            Manage your document collections and knowledge sources
                        </DialogDescription>
                    </div>
                    <DialogClose onClick={() => onOpenChange(false)} />
                </DialogHeader>

                <div className="px-8 pt-6 pb-8">
                    <div className="flex flex-col gap-8 items-end relative shrink-0">
                        {/* Empty State Content */}
                        <div className="flex flex-col items-center justify-center relative shrink-0 w-full">
                            <div className="flex flex-col gap-4 items-center relative shrink-0">
                                {/* Database Icon */}
                                <div className="h-[61px] relative shrink-0 w-[59px]">
                                    <img
                                        alt="Database icon"
                                        className="block max-w-none size-full"
                                        src={emptyStateIcon}
                                    />
                                </div>

                                {/* Empty State Messages */}
                                <div className="flex flex-col gap-[11px] items-center not-italic relative shrink-0 text-center">
                                    <div className="flex flex-col font-semibold justify-center leading-normal min-w-full relative shrink-0 text-[#252526] text-base tracking-[0.25px] w-[min-content]">
                                        <p className="leading-normal whitespace-pre-wrap">
                                            No knowledge bases found
                                        </p>
                                    </div>
                                    <p className="font-normal leading-normal relative shrink-0 text-[#6d6b70] text-sm w-[266px] whitespace-pre-wrap">
                                        Get started by adding your first knowledge base
                                    </p>
                                </div>
                            </div>
                        </div>

                        {/* Add Knowledge Base Button */}
                        <div className="flex items-center justify-center relative shrink-0 w-full">
                            <button
                                type="button"
                                onClick={handleAddKnowledgeBase}
                                onKeyDown={handleKeyDown}
                                className="bg-[#03f] flex flex-1 items-center justify-center px-[42px] py-[14px] relative rounded-[12px] hover:bg-[#002BCC] active:bg-[#0025AA] transition-colors cursor-pointer focus:outline-none focus:ring-2 focus:ring-[#0033FF] focus:ring-offset-2"
                                aria-label="Add Knowledge Base"
                            >
                                <p className="capitalize font-medium leading-[18px] not-italic relative shrink-0 text-sm text-center text-white">
                                    Add Knowledge base
                                </p>
                            </button>
                        </div>
                    </div>
                </div>
            </DialogContent>
        </Dialog>
    );
}