import React, {
    useState,
    useEffect,
    useRef,
    useCallback,
    useMemo,
} from 'react';
import { Note } from '../../entities/Note';
import { Project } from '../../entities/Project';
import { useToast } from '../Shared/ToastContext';
import TagInput from '../Tag/TagInput';
import MarkdownRenderer from '../Shared/MarkdownRenderer';
import { Tag } from '../../entities/Tag';
import { fetchTags } from '../../utils/tagsService';
import { useTranslation } from 'react-i18next';
import {
    EyeIcon,
    PencilIcon,
    FolderIcon,
    TagIcon,
    TrashIcon,
} from '@heroicons/react/24/outline';

interface NoteModalProps {
    isOpen: boolean;
    onClose: () => void;
    note?: Note | null;
    onSave: (noteData: Note) => Promise<void>;
    onDelete?: (noteId: number) => Promise<void>;
    projects?: Project[];
    onCreateProject?: (name: string) => Promise<Project>;
}

const NoteModal: React.FC<NoteModalProps> = ({
    isOpen,
    onClose,
    note,
    onSave,
    onDelete,
    projects = [],
    onCreateProject,
}) => {
    const { t } = useTranslation();
    const [formData, setFormData] = useState<Note>({
        id: note?.id,
        title: note?.title || '',
        content: note?.content || '',
        tags: note?.tags || [],
    });
    const [tags, setTags] = useState<string[]>(
        note?.tags?.map((tag) => tag.name) || []
    );
    const [availableTags, setAvailableTags] = useState<Tag[]>([]);
    const [error, setError] = useState<string | null>(null);
    const modalRef = useRef<HTMLDivElement>(null);
    const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
    const [isClosing, setIsClosing] = useState(false);
    const [activeTab, setActiveTab] = useState<'edit' | 'preview'>('edit');

    // Project-related state
    const [filteredProjects, setFilteredProjects] = useState<Project[]>([]);
    const [newProjectName, setNewProjectName] = useState<string>('');
    const [isCreatingProject, setIsCreatingProject] = useState(false);
    const [dropdownOpen, setDropdownOpen] = useState(false);

    // Collapsible sections state
    const [expandedSections, setExpandedSections] = useState({
        tags: false,
        project: false,
    });

    const { showSuccessToast, showErrorToast } = useToast();

    // Memoize projects to prevent infinite re-renders
    const memoizedProjects = useMemo(() => projects || [], [projects]);

    useEffect(() => {
        if (!isOpen) return;

        const loadTags = async () => {
            try {
                const data = await fetchTags();
                setAvailableTags(data);
            } catch (error) {
                console.error('Failed to fetch tags', error);
                showErrorToast('Failed to load tags');
            }
        };

        loadTags();
    }, [isOpen]);

    // Initialize filtered projects from props - like TaskModal
    useEffect(() => {
        setFilteredProjects(memoizedProjects);
    }, [memoizedProjects]);

    // Initialize form data when modal opens - exactly like TaskModal
    useEffect(() => {
        if (isOpen) {
            // Initialize form data
            const tagNames = note?.tags?.map((tag) => tag.name) || [];
            setFormData({
                id: note?.id,
                title: note?.title || '',
                content: note?.content || '',
                tags: note?.tags || [],
            });
            setTags(tagNames);
            setError(null);

            // Initialize project name from note - exactly like TaskModal
            const currentProject = memoizedProjects.find(
                (project) =>
                    project.id === (note?.project?.id || note?.Project?.id)
            );
            setNewProjectName(currentProject ? currentProject.name : '');
        }
    }, [isOpen, note, memoizedProjects]);

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

    useEffect(() => {
        const handleClickOutside = (event: MouseEvent) => {
            if (
                modalRef.current &&
                !modalRef.current.contains(event.target as Node)
            ) {
                handleClose();
            }
        };

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

    useEffect(() => {
        const handleKeyDown = (event: KeyboardEvent) => {
            if (event.key === 'Escape') {
                handleClose();
            }
        };

        if (isOpen) {
            document.addEventListener('keydown', handleKeyDown);
        }
        return () => {
            document.removeEventListener('keydown', handleKeyDown);
        };
    }, [isOpen, handleClose]);

    const handleChange = (
        e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
    ) => {
        const { name, value } = e.target;
        setFormData((prev) => ({
            ...prev,
            [name]: value,
        }));
    };

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

    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(() => {
                        const scrollContainer = document.querySelector(
                            '.absolute.inset-0.overflow-y-auto'
                        );
                        if (scrollContainer) {
                            scrollContainer.scrollTo({
                                top: scrollContainer.scrollHeight,
                                behavior: 'smooth',
                            });
                        }
                    }, 100); // Small delay to ensure DOM is updated
                }

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

    const handleProjectSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
        const value = e.target.value;
        setNewProjectName(value);
        setDropdownOpen(true);

        if (!projects || projects.length === 0) {
            setFilteredProjects([]);
            return;
        }

        const query = value.toLowerCase();
        const filtered = projects.filter((project) =>
            project.name.toLowerCase().includes(query)
        );
        setFilteredProjects(filtered);
    };

    const handleProjectSelection = (project: Project) => {
        setFormData((prev) => ({
            ...prev,
            project: { id: project.id!, name: project.name },
            project_id: project.id,
        }));
        setNewProjectName(project.name);
        setDropdownOpen(false);
    };

    const handleCreateProject = async () => {
        if (newProjectName.trim() !== '' && onCreateProject) {
            setIsCreatingProject(true);
            try {
                const newProject = await onCreateProject(newProjectName.trim());
                setFormData((prev) => ({
                    ...prev,
                    project: { id: newProject.id!, name: newProject.name },
                    project_id: newProject.id,
                }));
                setFilteredProjects([...filteredProjects, newProject]);
                setNewProjectName(newProject.name);
                setDropdownOpen(false);
                showSuccessToast(t('success.projectCreated'));
            } catch (error) {
                showErrorToast(t('errors.projectCreationFailed'));
                console.error('Error creating project:', error);
            } finally {
                setIsCreatingProject(false);
            }
        }
    };

    const handleSubmit = async () => {
        if (!formData.title.trim()) {
            setError(t('errors.noteTitleRequired'));
            return;
        }

        setIsSubmitting(true);
        setError(null);

        try {
            // Convert string tags to tag objects
            const noteTags: Tag[] = tags.map((tagName) => ({ name: tagName }));

            // Create final form data with the tags
            const finalFormData = { ...formData, tags: noteTags };

            await onSave(finalFormData);
            showSuccessToast(
                formData.id && formData.id !== 0
                    ? t('success.noteUpdated')
                    : t('success.noteCreated')
            );
            handleClose();
        } catch (err) {
            setError((err as Error).message);
            showErrorToast(t('errors.failedToSaveNote'));
        } finally {
            setIsSubmitting(false);
        }
    };

    const handleDeleteNote = async () => {
        if (formData.id && formData.id !== 0 && onDelete) {
            try {
                await onDelete(formData.id);
                showSuccessToast(t('success.noteDeleted'));
                handleClose();
            } catch (err) {
                setError((err as Error).message);
                showErrorToast(t('errors.failedToDeleteNote'));
            }
        }
    };

    if (!isOpen) return null;

    return (
        <>
            <div
                className={`fixed top-16 left-0 right-0 bottom-0 bg-gray-900 bg-opacity-80 z-40 transition-opacity duration-300 overflow-hidden sm:overflow-y-auto ${
                    isClosing ? 'opacity-0' : 'opacity-100'
                }`}
            >
                <div className="h-full flex items-start justify-center sm:px-4 sm:py-4">
                    <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-[600px] sm:max-h-[90vh]">
                            {/* Main Form Section */}
                            <div className="flex-1 flex flex-col transition-all duration-300 bg-white dark:bg-gray-800">
                                <div className="flex-1 relative">
                                    <div
                                        className="absolute inset-0 overflow-y-auto overflow-x-hidden"
                                        style={{
                                            WebkitOverflowScrolling: 'touch',
                                        }}
                                    >
                                        <form className="h-full">
                                            <fieldset className="h-full flex flex-col">
                                                {/* Note Title Section - Always Visible */}
                                                <div className="border-b border-gray-200 dark:border-gray-700 pb-4 mb-4 px-4 pt-4">
                                                    <input
                                                        type="text"
                                                        id="noteTitle"
                                                        name="title"
                                                        value={formData.title}
                                                        onChange={handleChange}
                                                        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(
                                                            'forms.noteTitlePlaceholder'
                                                        )}
                                                    />
                                                </div>

                                                {/* Content Section - Always Visible */}
                                                <div className="border-b border-gray-200 dark:border-gray-700 pb-4 mb-4 px-4">
                                                    <div className="flex items-center justify-between mb-2">
                                                        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                                            {t(
                                                                'forms.noteContent'
                                                            )}{' '}
                                                            <span className="text-gray-500">
                                                                (Markdown
                                                                supported)
                                                            </span>
                                                        </label>
                                                        <div className="flex space-x-1">
                                                            <button
                                                                type="button"
                                                                onClick={() =>
                                                                    setActiveTab(
                                                                        'edit'
                                                                    )
                                                                }
                                                                className={`px-3 py-1 text-xs rounded-md flex items-center space-x-1 transition-colors ${
                                                                    activeTab ===
                                                                    'edit'
                                                                        ? 'bg-blue-600 text-white'
                                                                        : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600'
                                                                }`}
                                                            >
                                                                <PencilIcon className="h-3 w-3" />
                                                                <span>
                                                                    Edit
                                                                </span>
                                                            </button>
                                                            <button
                                                                type="button"
                                                                onClick={() =>
                                                                    setActiveTab(
                                                                        'preview'
                                                                    )
                                                                }
                                                                className={`px-3 py-1 text-xs rounded-md flex items-center space-x-1 transition-colors ${
                                                                    activeTab ===
                                                                    'preview'
                                                                        ? 'bg-blue-600 text-white'
                                                                        : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600'
                                                                }`}
                                                            >
                                                                <EyeIcon className="h-3 w-3" />
                                                                <span>
                                                                    Preview
                                                                </span>
                                                            </button>
                                                        </div>
                                                    </div>

                                                    {activeTab === 'edit' ? (
                                                        <textarea
                                                            id="noteContent"
                                                            name="content"
                                                            value={
                                                                formData.content
                                                            }
                                                            onChange={
                                                                handleChange
                                                            }
                                                            rows={15}
                                                            className="block w-full 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="Write your content using Markdown formatting...&#10;&#10;Examples:&#10;# Heading&#10;**Bold text**&#10;*Italic text*&#10;- List item&#10;```code```"
                                                        />
                                                    ) : (
                                                        <div
                                                            className="block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm p-3 text-sm bg-gray-50 dark:bg-gray-800 overflow-y-auto"
                                                            style={{
                                                                minHeight:
                                                                    '300px',
                                                                maxHeight:
                                                                    '400px',
                                                            }}
                                                        >
                                                            {formData.content ? (
                                                                <MarkdownRenderer
                                                                    content={
                                                                        formData.content
                                                                    }
                                                                />
                                                            ) : (
                                                                <p className="text-gray-500 dark:text-gray-400 italic">
                                                                    No content
                                                                    to preview.
                                                                    Switch to
                                                                    Edit tab to
                                                                    add content.
                                                                </p>
                                                            )}
                                                        </div>
                                                    )}
                                                </div>

                                                {/* Expandable Sections - Only show when expanded */}
                                                {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')}
                                                        </h3>
                                                        <TagInput
                                                            onTagsChange={
                                                                handleTagsChange
                                                            }
                                                            initialTags={tags}
                                                            availableTags={
                                                                availableTags
                                                            }
                                                        />
                                                    </div>
                                                )}

                                                {expandedSections.project && (
                                                    <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.task.labels.project',
                                                                'Project'
                                                            )}
                                                        </h3>
                                                        <div className="relative">
                                                            <input
                                                                type="text"
                                                                placeholder={t(
                                                                    'forms.task.projectSearchPlaceholder',
                                                                    'Search or create a project...'
                                                                )}
                                                                value={
                                                                    newProjectName
                                                                }
                                                                onChange={
                                                                    handleProjectSearch
                                                                }
                                                                className="block w-full border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 shadow-sm px-3 py-2 text-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100"
                                                            />
                                                            {dropdownOpen &&
                                                                newProjectName && (
                                                                    <div className="absolute mt-1 bg-white dark:bg-gray-800 shadow-lg rounded-md w-full z-50 border border-gray-200 dark:border-gray-700">
                                                                        {filteredProjects.length >
                                                                            0 &&
                                                                            filteredProjects.map(
                                                                                (
                                                                                    project
                                                                                ) => (
                                                                                    <button
                                                                                        key={
                                                                                            project.id
                                                                                        }
                                                                                        type="button"
                                                                                        onClick={() =>
                                                                                            handleProjectSelection(
                                                                                                project
                                                                                            )
                                                                                        }
                                                                                        className="block w-full text-gray-700 dark:text-gray-300 text-left px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
                                                                                    >
                                                                                        {
                                                                                            project.name
                                                                                        }
                                                                                    </button>
                                                                                )
                                                                            )}
                                                                        {filteredProjects.length ===
                                                                            0 && (
                                                                            <div className="px-4 py-2 text-gray-500 dark:text-gray-400">
                                                                                {t(
                                                                                    'forms.task.noMatchingProjects',
                                                                                    'No matching projects'
                                                                                )}
                                                                            </div>
                                                                        )}
                                                                        {newProjectName.trim() &&
                                                                            onCreateProject && (
                                                                                <button
                                                                                    type="button"
                                                                                    onClick={
                                                                                        handleCreateProject
                                                                                    }
                                                                                    disabled={
                                                                                        isCreatingProject
                                                                                    }
                                                                                    className="block w-full text-left px-4 py-2 bg-blue-500 text-white hover:bg-blue-600 transition-colors"
                                                                                >
                                                                                    {isCreatingProject
                                                                                        ? t(
                                                                                              'forms.task.creatingProject',
                                                                                              'Creating...'
                                                                                          )
                                                                                        : t(
                                                                                              'forms.task.createProject',
                                                                                              '+ Create'
                                                                                          ) +
                                                                                          ` "${newProjectName.trim()}"`}
                                                                                </button>
                                                                            )}
                                                                    </div>
                                                                )}
                                                        </div>
                                                    </div>
                                                )}

                                                {error && (
                                                    <div className="text-red-500 px-4 mb-4">
                                                        {error}
                                                    </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">
                                            {/* 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>

                                            {/* Project Toggle */}
                                            <button
                                                type="button"
                                                onClick={() =>
                                                    toggleSection('project')
                                                }
                                                className={`relative p-2 rounded-full transition-colors ${
                                                    expandedSections.project
                                                        ? '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.task.labels.project',
                                                    'Project'
                                                )}
                                            >
                                                <FolderIcon className="h-5 w-5" />
                                                {formData.project && (
                                                    <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">
                                    {/* Left side: Delete and Cancel */}
                                    <div className="flex items-center space-x-3">
                                        {note && note.id && onDelete && (
                                            <button
                                                type="button"
                                                onClick={handleDeleteNote}
                                                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={isSubmitting}
                                        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 ${
                                            isSubmitting
                                                ? 'opacity-50 cursor-not-allowed'
                                                : ''
                                        }`}
                                    >
                                        {isSubmitting
                                            ? t('modals.submitting')
                                            : formData.id && formData.id !== 0
                                              ? t('modals.updateNote')
                                              : t('modals.createNote')}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
};

export default NoteModal;