import React, { useState, useEffect, useRef, useCallback } from 'react';
import { createPortal } from 'react-dom';
import { Area } from '../../entities/Area';
import { Project } from '../../entities/Project';
import ConfirmDialog from '../Shared/ConfirmDialog';
import { useToast } from '../Shared/ToastContext';
import TagInput from '../Tag/TagInput';
import PriorityDropdown from '../Shared/PriorityDropdown';
import AreaDropdown from '../Shared/AreaDropdown';
import DatePicker from '../Shared/DatePicker';
import { PriorityType } from '../../entities/Task';
import Switch from '../Shared/Switch';
import { useStore } from '../../store/useStore';
import { useTranslation } from 'react-i18next';
import {
    TagIcon,
    Squares2X2Icon,
    TrashIcon,
    CameraIcon,
    CalendarIcon,
    ExclamationTriangleIcon,
    PowerIcon,
} from '@heroicons/react/24/outline';

interface ProjectModalProps {
    isOpen: boolean;
    onClose: () => void;
    onSave: (project: Project) => void;
    onDelete?: (projectId: number) => Promise<void>;
    project?: Project;
    areas: Area[];
}

const ProjectModal: React.FC<ProjectModalProps> = ({
    isOpen,
    onClose,
    onSave,
    onDelete,
    project,
    areas,
}) => {
    const [modalJustOpened, setModalJustOpened] = useState(false);
    const [formData, setFormData] = useState<Project>(
        project || {
            name: '',
            description: '',
            area_id: null,
            active: true,
            tags: [],
            priority: 'low',
            due_date_at: null,
            image_url: '',
        }
    );

    const [tags, setTags] = useState<string[]>(
        project?.tags?.map((tag) => tag.name) || []
    );
    const [imageFile, setImageFile] = useState<File | null>(null);
    const [imagePreview, setImagePreview] = useState<string>(
        project?.image_url || ''
    );
    const [isUploading, setIsUploading] = useState(false);

    const { tagsStore } = useStore();
    // Avoid calling getTags() during component initialization to prevent remounting
    const availableTags = tagsStore.tags;
    const { addNewTags } = tagsStore;

    const modalRef = useRef<HTMLDivElement>(null);
    const fileInputRef = useRef<HTMLInputElement>(null);
    const nameInputRef = useRef<HTMLInputElement>(null);
    const [isClosing, setIsClosing] = useState(false);
    const [showConfirmDialog, setShowConfirmDialog] = useState(false);
    const [error, setError] = useState<string | null>(null);

    // Collapsible sections state
    const [expandedSections, setExpandedSections] = useState({
        tags: false,
        area: false,
        image: false,
        priority: false,
        dueDate: false,
        active: true,
    });

    const { showSuccessToast, showErrorToast } = useToast();
    const { t } = useTranslation();

    // Load tags when modal opens and auto-focus on the name input
    useEffect(() => {
        if (isOpen) {
            // Load tags with a delay to avoid conflicts with modal state
            if (!tagsStore.hasLoaded && !tagsStore.isLoading) {
                // Delay tag loading to avoid immediate state conflicts
                setTimeout(() => {
                    if (isOpen) {
                        // Only load if modal is still open
                        tagsStore.loadTags();
                    }
                }, 300);
            }
            setTimeout(() => {
                nameInputRef.current?.focus();
            }, 200);
        }
    }, [isOpen, tagsStore]);

    // Manage body scroll when modal is open
    useEffect(() => {
        if (isOpen) {
            document.body.style.overflow = 'hidden';
        } else {
            document.body.style.overflow = 'unset';
        }
        return () => {
            document.body.style.overflow = 'unset';
        };
    }, [isOpen]);

    useEffect(() => {
        if (project) {
            // Convert ISO date to YYYY-MM-DD format if needed
            let dueDateValue = project.due_date_at;
            if (dueDateValue && dueDateValue.includes('T')) {
                dueDateValue = dueDateValue.split('T')[0];
            }

            setFormData({
                ...project,
                tags: project.tags || [],
                due_date_at: dueDateValue || null,
                image_url: project.image_url || '',
            });
            setTags(project.tags?.map((tag) => tag.name) || []);
            setImagePreview(project.image_url || '');
        } else {
            setFormData({
                name: '',
                description: '',
                area_id: null,
                active: true,
                tags: [],
                priority: 'low',
                due_date_at: null,
                image_url: '',
            });
            setTags([]);
            setImagePreview('');
        }
        setImageFile(null);
        setError(null);
    }, [project]);

    useEffect(() => {
        const handleClickOutside = (event: MouseEvent) => {
            const target = event.target as Node;

            // Check if click is inside modal
            if (modalRef.current && modalRef.current.contains(target)) {
                return;
            }

            // Check if click is on priority dropdown (which is portaled to document.body)
            const clickedElement = target as Element;
            if (
                clickedElement &&
                clickedElement.closest &&
                clickedElement.closest(
                    '.fixed.z-50.bg-white, .fixed.z-50.bg-gray-700'
                )
            ) {
                return;
            }

            handleClose();
        };

        if (isOpen) {
            document.addEventListener('mousedown', handleClickOutside);
        }
        return () => {
            document.removeEventListener('mousedown', handleClickOutside);
        };
    }, [isOpen]);

    useEffect(() => {
        const handleKeyDown = (event: KeyboardEvent) => {
            if (event.key === 'Escape') {
                handleClose();
            }
        };
        if (isOpen) {
            document.addEventListener('keydown', handleKeyDown);
        }
        return () => {
            document.removeEventListener('keydown', handleKeyDown);
        };
    }, [isOpen]);

    const handleChange = (
        e: React.ChangeEvent<
            HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
        >
    ) => {
        const target = e.target;
        const { name, type, value } = target;

        // Clear error when user starts typing in the name field
        if (name === 'name' && error) {
            setError(null);
        }

        if (type === 'checkbox') {
            if (target instanceof HTMLInputElement) {
                const checked = target.checked;
                setFormData((prev) => ({
                    ...prev,
                    [name]: checked,
                }));
            }
        } else {
            // Handle empty date values by converting to null
            let processedValue: any = value;
            if (name === 'due_date_at' && value === '') {
                processedValue = null;
            }

            setFormData((prev) => ({
                ...prev,
                [name]: processedValue,
            }));
        }
    };

    const handleTagsChange = useCallback((newTags: string[]) => {
        setTags(newTags);
        setFormData((prev) => ({
            ...prev,
            tags: newTags.map((name) => ({ name })),
        }));
    }, []);

    // Track when modal opens to prevent immediate backdrop clicks
    useEffect(() => {
        if (isOpen) {
            setModalJustOpened(true);
            const timer = setTimeout(() => {
                setModalJustOpened(false);
            }, 200); // Prevent backdrop clicks for 200ms after opening
            return () => clearTimeout(timer);
        }
    }, [isOpen]);

    const handleDueDateChange = (value: string) => {
        setFormData((prev) => ({
            ...prev,
            due_date_at: value || null,
        }));
    };

    const handleImageSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
        const file = e.target.files?.[0];
        if (file) {
            setImageFile(file);

            // Create preview
            const reader = new FileReader();
            reader.onload = (e) => {
                setImagePreview(e.target?.result as string);
            };
            reader.readAsDataURL(file);
        }
    };

    const handleImageUpload = async (): Promise<string | null> => {
        if (!imageFile) return null;

        setIsUploading(true);
        try {
            const formData = new FormData();
            formData.append('image', imageFile);

            const response = await fetch('/api/upload/project-image', {
                method: 'POST',
                credentials: 'include',
                body: formData,
            });

            if (!response.ok) {
                throw new Error('Failed to upload image');
            }

            const result = await response.json();
            return result.imageUrl;
        } catch (error) {
            console.error('Error uploading image:', error);
            return null;
        } finally {
            setIsUploading(false);
        }
    };

    const handleRemoveImage = () => {
        setImageFile(null);
        setImagePreview('');
        setFormData((prev) => ({
            ...prev,
            image_url: '',
        }));
        if (fileInputRef.current) {
            fileInputRef.current.value = '';
        }
    };

    const handleSubmit = async () => {
        // Validate required fields
        if (!formData.name.trim()) {
            setError(
                t('errors.projectNameRequired', 'Project name is required')
            );
            return;
        }

        try {
            // Add new tags to the global store
            const existingTagNames = availableTags.map((tag: any) => tag.name);
            const newTagNames = tags.filter(
                (tag) => !existingTagNames.includes(tag)
            );
            if (newTagNames.length > 0) {
                addNewTags(newTagNames);
            }

            let imageUrl = formData.image_url;

            // Upload image if a new one was selected
            if (imageFile) {
                const uploadedImageUrl = await handleImageUpload();
                if (uploadedImageUrl) {
                    imageUrl = uploadedImageUrl;
                }
            }

            const projectData = {
                ...formData,
                image_url: imageUrl,
                tags: tags.map((name) => ({ name })),
            };

            // Save the project
            onSave(projectData);

            showSuccessToast(
                project
                    ? 'Project updated successfully!'
                    : 'Project created successfully!'
            );

            handleClose();
        } catch (error) {
            console.error('Error saving project:', error);
            setError(t('errors.projectSaveFailed', 'Failed to save project'));
        }
    };

    const handleDeleteClick = () => {
        setShowConfirmDialog(true);
    };

    const handleDeleteConfirm = async () => {
        if (project && project.id && onDelete) {
            try {
                await onDelete(project.id);
                showSuccessToast(t('success.projectDeleted'));
                setShowConfirmDialog(false);
                handleClose();
            } catch (error) {
                console.error('Error deleting project:', error);
                showErrorToast(t('errors.failedToDeleteProject'));
            }
        }
    };

    const handleClose = () => {
        setIsClosing(true);
        setTimeout(() => {
            onClose();
            setIsClosing(false);
        }, 300);
    };

    const handleToggleActive = () => {
        setFormData((prev) => ({
            ...prev,
            active: !prev.active,
        }));
    };

    const toggleSection = useCallback(
        (section: keyof typeof expandedSections) => {
            setExpandedSections((prev) => {
                const newExpanded = {
                    ...prev,
                    [section]: !prev[section],
                };

                // Auto-scroll to show the expanded section
                if (newExpanded[section]) {
                    setTimeout(() => {
                        // Try multiple selectors to find the scroll container
                        const scrollContainer =
                            modalRef.current?.querySelector(
                                '.absolute.inset-0.overflow-y-auto'
                            ) ||
                            modalRef.current?.querySelector(
                                '[style*="overflow-y"]'
                            ) ||
                            modalRef.current?.querySelector(
                                '.overflow-y-auto'
                            ) ||
                            document.querySelector(
                                '.absolute.inset-0.overflow-y-auto'
                            );

                        if (scrollContainer) {
                            scrollContainer.scrollTo({
                                top: scrollContainer.scrollHeight,
                                behavior: 'smooth',
                            });
                        }
                    }, 250); // Increased delay to ensure DOM is updated
                }

                return newExpanded;
            });
        },
        []
    );

    if (!isOpen) return null;

    // Don't render if areas aren't loaded yet (prevents race condition)
    if (!areas || !Array.isArray(areas)) return null;

    return createPortal(
        <>
            ,
            <div
                className={`fixed top-16 left-0 right-0 bottom-0 flex items-start sm:items-center justify-center bg-gray-900 bg-opacity-80 z-40 transition-opacity duration-300 ${
                    isClosing ? 'opacity-0' : 'opacity-100'
                }`}
                onClick={(e) => {
                    // Close modal when clicking on backdrop, but not on the modal content
                    // Also prevent immediate closes after modal opens
                    if (e.target === e.currentTarget && !modalJustOpened) {
                        handleClose();
                    }
                }}
            >
                <div
                    ref={modalRef}
                    className={`bg-white dark:bg-gray-800 border-0 sm:border sm:border-gray-200 sm:dark:border-gray-800 sm:rounded-lg sm:shadow-2xl w-full sm:max-w-2xl transform transition-transform duration-300 ${
                        isClosing ? 'scale-95' : 'scale-100'
                    } h-full sm:h-auto sm:my-4`}
                >
                    <div className="flex flex-col h-full sm:min-h-[500px] sm:max-h-[80vh]">
                        {/* Main Form Section */}
                        <div className="flex-1 flex flex-col transition-all duration-300 bg-white dark:bg-gray-800 sm:rounded-lg">
                            <div className="flex-1 relative">
                                <div
                                    className="absolute inset-0 overflow-y-auto overflow-x-hidden"
                                    style={{ WebkitOverflowScrolling: 'touch' }}
                                >
                                    <form
                                        className="h-full"
                                        onSubmit={(e) => {
                                            e.preventDefault();
                                            handleSubmit();
                                        }}
                                    >
                                        <fieldset className="h-full flex flex-col">
                                            {/* Project Title Section - Always Visible */}
                                            <div className="border-b border-gray-200 dark:border-gray-700 pb-4 mb-4 px-4 pt-4 sm:rounded-t-lg">
                                                <input
                                                    ref={nameInputRef}
                                                    type="text"
                                                    id="projectName"
                                                    name="name"
                                                    value={formData.name}
                                                    onChange={handleChange}
                                                    onKeyDown={(e) => {
                                                        if (e.key === 'Enter') {
                                                            e.preventDefault();
                                                            handleSubmit();
                                                        }
                                                    }}
                                                    required
                                                    className={`block w-full text-xl font-semibold bg-transparent text-black dark:text-white border-none focus:outline-none shadow-sm py-2`}
                                                    placeholder={t(
                                                        'project.name',
                                                        'Enter project name'
                                                    )}
                                                />
                                                {error && (
                                                    <div className="mt-2 text-red-500 text-sm font-medium">
                                                        {error}
                                                    </div>
                                                )}
                                            </div>

                                            {/* Description Section - Always Visible */}
                                            <div className="flex-1 border-b border-gray-200 dark:border-gray-700 pb-4 px-4 flex flex-col mb-2">
                                                <textarea
                                                    id="projectDescription"
                                                    name="description"
                                                    value={
                                                        formData.description ||
                                                        ''
                                                    }
                                                    onChange={handleChange}
                                                    className="block w-full h-full min-h-0 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm p-3 text-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 transition duration-150 ease-in-out resize-none"
                                                    placeholder={t(
                                                        'forms.projectDescriptionPlaceholder',
                                                        'Enter project description (optional)'
                                                    )}
                                                />
                                            </div>

                                            {/* Expandable Sections - Only show when expanded */}
                                            {/* Active Status Section - First */}
                                            {expandedSections.active && (
                                                <div className="border-b border-gray-200 dark:border-gray-700 pb-4 mb-4 px-4">
                                                    <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
                                                        {t(
                                                            'projects.active',
                                                            'Status'
                                                        )}
                                                    </h3>
                                                    <div className="flex items-center">
                                                        <Switch
                                                            isChecked={
                                                                formData.active
                                                            }
                                                            onToggle={
                                                                handleToggleActive
                                                            }
                                                        />
                                                        <label
                                                            htmlFor="active"
                                                            className="ml-2 block text-sm text-gray-700 dark:text-gray-300"
                                                        >
                                                            {t(
                                                                'projects.active',
                                                                'Active'
                                                            )}
                                                        </label>
                                                    </div>
                                                </div>
                                            )}

                                            {expandedSections.tags && (
                                                <div className="border-b border-gray-200 dark:border-gray-700 pb-4 mb-4 px-4">
                                                    <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
                                                        {t(
                                                            'forms.tags',
                                                            'Tags'
                                                        )}
                                                    </h3>
                                                    <TagInput
                                                        onTagsChange={
                                                            handleTagsChange
                                                        }
                                                        initialTags={tags}
                                                        availableTags={
                                                            availableTags
                                                        }
                                                    />
                                                </div>
                                            )}

                                            {expandedSections.area && (
                                                <div className="border-b border-gray-200 dark:border-gray-700 pb-4 mb-4 px-4">
                                                    <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
                                                        {t(
                                                            'common.area',
                                                            'Area'
                                                        )}
                                                    </h3>
                                                    <div className="overflow-visible">
                                                        <AreaDropdown
                                                            value={
                                                                formData.area_id ||
                                                                null
                                                            }
                                                            onChange={(value) =>
                                                                setFormData(
                                                                    (prev) => ({
                                                                        ...prev,
                                                                        area_id:
                                                                            value,
                                                                    })
                                                                )
                                                            }
                                                            areas={areas}
                                                        />
                                                    </div>
                                                </div>
                                            )}

                                            {expandedSections.image && (
                                                <div className="border-b border-gray-200 dark:border-gray-700 pb-4 mb-4 px-4">
                                                    <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
                                                        {t(
                                                            'project.projectImage',
                                                            'Project Image'
                                                        )}
                                                    </h3>

                                                    {imagePreview ? (
                                                        <div className="mb-3">
                                                            <div className="relative inline-block">
                                                                <img
                                                                    src={
                                                                        imagePreview
                                                                    }
                                                                    alt="Project preview"
                                                                    className="w-32 h-20 object-cover rounded-md border border-gray-300 dark:border-gray-600"
                                                                />
                                                                <button
                                                                    type="button"
                                                                    onClick={
                                                                        handleRemoveImage
                                                                    }
                                                                    className="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs hover:bg-red-600"
                                                                >
                                                                    ×
                                                                </button>
                                                            </div>
                                                        </div>
                                                    ) : null}

                                                    <input
                                                        ref={fileInputRef}
                                                        type="file"
                                                        accept="image/*"
                                                        onChange={
                                                            handleImageSelect
                                                        }
                                                        className="hidden"
                                                    />
                                                    <button
                                                        type="button"
                                                        onClick={() =>
                                                            fileInputRef.current?.click()
                                                        }
                                                        className="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
                                                    >
                                                        <svg
                                                            className="w-4 h-4 mr-2"
                                                            fill="none"
                                                            stroke="currentColor"
                                                            viewBox="0 0 24 24"
                                                        >
                                                            <path
                                                                strokeLinecap="round"
                                                                strokeLinejoin="round"
                                                                strokeWidth={2}
                                                                d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
                                                            />
                                                        </svg>
                                                        {t(
                                                            'project.browseImage',
                                                            'Browse Image'
                                                        )}
                                                    </button>
                                                    <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                                        {t(
                                                            'project.uploadImageHint',
                                                            'Upload an image for your project (max 5MB)'
                                                        )}
                                                    </p>
                                                </div>
                                            )}

                                            {expandedSections.priority && (
                                                <div className="border-b border-gray-200 dark:border-gray-700 pb-4 mb-4 px-4">
                                                    <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
                                                        {t(
                                                            'forms.priority',
                                                            'Priority'
                                                        )}
                                                    </h3>
                                                    <PriorityDropdown
                                                        value={
                                                            formData.priority ||
                                                            'medium'
                                                        }
                                                        onChange={(
                                                            value: PriorityType
                                                        ) =>
                                                            setFormData({
                                                                ...formData,
                                                                priority: value,
                                                            })
                                                        }
                                                    />
                                                </div>
                                            )}

                                            {expandedSections.dueDate && (
                                                <div className="border-b border-gray-200 dark:border-gray-700 pb-4 mb-4 px-4 overflow-visible">
                                                    <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
                                                        {t(
                                                            'forms.dueDate',
                                                            'Due Date'
                                                        )}
                                                    </h3>
                                                    <div className="overflow-visible">
                                                        <DatePicker
                                                            value={
                                                                formData.due_date_at ||
                                                                ''
                                                            }
                                                            onChange={
                                                                handleDueDateChange
                                                            }
                                                            placeholder="Select due date"
                                                        />
                                                    </div>
                                                </div>
                                            )}
                                        </fieldset>
                                    </form>
                                </div>
                            </div>

                            {/* Section Icons - Above border, split layout */}
                            <div className="flex-shrink-0 bg-white dark:bg-gray-800 px-3 py-2">
                                <div className="flex items-center justify-between">
                                    {/* Left side: Section icons */}
                                    <div className="flex items-center space-x-1">
                                        {/* Active Status Toggle - First */}
                                        <button
                                            type="button"
                                            onClick={() =>
                                                toggleSection('active')
                                            }
                                            className={`relative p-2 rounded-full transition-colors ${
                                                expandedSections.active
                                                    ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400'
                                                    : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700'
                                            }`}
                                            title={t(
                                                'projects.active',
                                                'Status'
                                            )}
                                        >
                                            <PowerIcon className="h-5 w-5" />
                                            {!formData.active && (
                                                <span className="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full"></span>
                                            )}
                                        </button>

                                        {/* Tags Toggle */}
                                        <button
                                            type="button"
                                            onClick={() =>
                                                toggleSection('tags')
                                            }
                                            className={`relative p-2 rounded-full transition-colors ${
                                                expandedSections.tags
                                                    ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400'
                                                    : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700'
                                            }`}
                                            title={t('forms.tags', 'Tags')}
                                        >
                                            <TagIcon className="h-5 w-5" />
                                            {formData.tags &&
                                                formData.tags.length > 0 && (
                                                    <span className="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full"></span>
                                                )}
                                        </button>

                                        {/* Area Toggle */}
                                        <button
                                            type="button"
                                            onClick={() =>
                                                toggleSection('area')
                                            }
                                            className={`relative p-2 rounded-full transition-colors ${
                                                expandedSections.area
                                                    ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400'
                                                    : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700'
                                            }`}
                                            title={t('common.area', 'Area')}
                                        >
                                            <Squares2X2Icon className="h-5 w-5" />
                                            {formData.area_id && (
                                                <span className="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full"></span>
                                            )}
                                        </button>

                                        {/* Project Image Toggle */}
                                        <button
                                            type="button"
                                            onClick={() =>
                                                toggleSection('image')
                                            }
                                            className={`relative p-2 rounded-full transition-colors ${
                                                expandedSections.image
                                                    ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400'
                                                    : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700'
                                            }`}
                                            title={t(
                                                'project.projectImage',
                                                'Project Image'
                                            )}
                                        >
                                            <CameraIcon className="h-5 w-5" />
                                            {formData.image_url && (
                                                <span className="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full"></span>
                                            )}
                                        </button>

                                        {/* Priority Toggle */}
                                        <button
                                            type="button"
                                            onClick={() =>
                                                toggleSection('priority')
                                            }
                                            className={`relative p-2 rounded-full transition-colors ${
                                                expandedSections.priority
                                                    ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400'
                                                    : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700'
                                            }`}
                                            title={t(
                                                'forms.priority',
                                                'Priority'
                                            )}
                                        >
                                            <ExclamationTriangleIcon className="h-5 w-5" />
                                            {formData.priority !== 'medium' && (
                                                <span className="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full"></span>
                                            )}
                                        </button>

                                        {/* Due Date Toggle */}
                                        <button
                                            type="button"
                                            onClick={() =>
                                                toggleSection('dueDate')
                                            }
                                            className={`relative p-2 rounded-full transition-colors ${
                                                expandedSections.dueDate
                                                    ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400'
                                                    : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700'
                                            }`}
                                            title={t(
                                                'forms.dueDate',
                                                'Due Date'
                                            )}
                                        >
                                            <CalendarIcon className="h-5 w-5" />
                                            {formData.due_date_at && (
                                                <span className="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full"></span>
                                            )}
                                        </button>
                                    </div>
                                </div>
                            </div>

                            {/* Action Buttons - Below border with custom layout */}
                            <div className="flex-shrink-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 px-3 py-2 flex items-center justify-between sm:rounded-b-lg">
                                {/* Left side: Delete and Cancel */}
                                <div className="flex items-center space-x-3">
                                    {project && project.id && onDelete && (
                                        <button
                                            type="button"
                                            onClick={handleDeleteClick}
                                            className="p-2 border border-red-300 dark:border-red-600 text-red-600 dark:text-red-400 rounded-md hover:bg-red-50 dark:hover:bg-red-900/20 focus:outline-none transition duration-150 ease-in-out"
                                            title={t('common.delete', 'Delete')}
                                        >
                                            <TrashIcon className="h-4 w-4" />
                                        </button>
                                    )}
                                    <button
                                        type="button"
                                        onClick={handleClose}
                                        className="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 focus:outline-none transition duration-150 ease-in-out text-sm"
                                    >
                                        {t('common.cancel', 'Cancel')}
                                    </button>
                                </div>

                                {/* Right side: Save */}
                                <button
                                    type="button"
                                    onClick={handleSubmit}
                                    disabled={isUploading}
                                    className={`px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 focus:outline-none transition duration-150 ease-in-out text-sm ${
                                        isUploading
                                            ? 'opacity-50 cursor-not-allowed'
                                            : ''
                                    }`}
                                >
                                    {isUploading
                                        ? 'Uploading...'
                                        : project
                                          ? t(
                                                'modals.updateProject',
                                                'Update Project'
                                            )
                                          : t(
                                                'modals.createProject',
                                                'Create Project'
                                            )}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {showConfirmDialog && (
                <ConfirmDialog
                    title={t('modals.deleteProject.title', 'Delete Project')}
                    message={t(
                        'modals.deleteProject.message',
                        'Deleting this project will remove the project only. All items inside will be retained but will no longer belong to any project. Continue?'
                    )}
                    onConfirm={handleDeleteConfirm}
                    onCancel={() => setShowConfirmDialog(false)}
                />
            )}
        </>,
        document.body
    );
};

export default ProjectModal;