import React, { useState, useRef, useEffect } from 'react';
import { useAppStore, ProjectData, PostData, MediaData } from '../../store';
import { showToast } from '../Toast';
import './ProjectSelector.css';

export const ProjectSelector: React.FC = () => {
  const { projects, activeProject, setProjects, setActiveProject, setPosts, setMedia, setSelectedPost, setSelectedMedia, removeProject } = useAppStore();
  const [isOpen, setIsOpen] = useState(false);
  const [showCreateModal, setShowCreateModal] = useState(false);
  const [showDeleteModal, setShowDeleteModal] = useState(false);
  const [projectToDelete, setProjectToDelete] = useState<ProjectData | null>(null);
  const [deleteConfirmText, setDeleteConfirmText] = useState('');
  const [newProjectName, setNewProjectName] = useState('');
  const [newProjectDescription, setNewProjectDescription] = useState('');
  const dropdownRef = useRef<HTMLDivElement>(null);

  // Load projects on mount
  useEffect(() => {
    const loadProjects = async () => {
      try {
        const allProjects = await window.electronAPI?.projects.getAll();
        if (allProjects) {
          setProjects(allProjects as ProjectData[]);
        }
        const active = await window.electronAPI?.projects.getActive();
        if (active) {
          setActiveProject(active as ProjectData);
        }
      } catch (error) {
        console.error('Failed to load projects:', error);
      }
    };
    loadProjects();
  }, [setProjects, setActiveProject]);

  // Close dropdown when clicking outside
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
        setIsOpen(false);
      }
    };
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  const handleSwitchProject = async (project: ProjectData) => {
    if (project.id === activeProject?.id) {
      setIsOpen(false);
      return;
    }

    try {
      const updatedProject = await window.electronAPI?.projects.setActive(project.id);
      if (updatedProject) {
        setActiveProject(updatedProject as ProjectData);
        // Clear current selection and reload data
        setSelectedPost(null);
        setSelectedMedia(null);
        
        // Reload posts and media for new project
        const [postsResult, mediaResult] = await Promise.all([
          window.electronAPI?.posts.getAll({ limit: 500, offset: 0 }),
          window.electronAPI?.media.getAll(),
        ]);
        // posts.getAll returns { items, hasMore, total }
        if (postsResult) {
          const { items, hasMore, total } = postsResult as { items: PostData[]; hasMore: boolean; total: number };
          setPosts(items, hasMore, total);
        }
        if (mediaResult) setMedia(mediaResult as MediaData[]);
        
        showToast.success(`Switched to ${project.name}`);
      }
    } catch (error) {
      console.error('Failed to switch project:', error);
      showToast.error('Failed to switch project');
    }
    setIsOpen(false);
  };

  const handleCreateProject = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!newProjectName.trim()) return;

    try {
      const newProject = await window.electronAPI?.projects.create({
        name: newProjectName.trim(),
        description: newProjectDescription.trim() || undefined,
      });
      if (newProject) {
        setProjects([...projects, newProject as ProjectData]);
        showToast.success(`Created project "${newProjectName}"`);
        setNewProjectName('');
        setNewProjectDescription('');
        setShowCreateModal(false);
        
        // Optionally switch to the new project
        await handleSwitchProject(newProject as ProjectData);
      }
    } catch (error) {
      console.error('Failed to create project:', error);
      showToast.error('Failed to create project');
    }
  };

  const openDeleteModal = (e: React.MouseEvent, project: ProjectData) => {
    e.stopPropagation();
    setProjectToDelete(project);
    setDeleteConfirmText('');
    setShowDeleteModal(true);
    setIsOpen(false);
  };

  const handleDeleteProject = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!projectToDelete || deleteConfirmText !== projectToDelete.name) return;

    try {
      const success = await window.electronAPI?.projects.deleteWithData(projectToDelete.id);
      if (success) {
        removeProject(projectToDelete.id);
        showToast.success(`Deleted project "${projectToDelete.name}" and all its data`);
        setShowDeleteModal(false);
        setProjectToDelete(null);
        setDeleteConfirmText('');
      } else {
        showToast.error('Failed to delete project');
      }
    } catch (error) {
      console.error('Failed to delete project:', error);
      showToast.error('Failed to delete project');
    }
  };

  const canDeleteProject = (project: ProjectData) => {
    // Cannot delete: default project, or the currently active project
    return project.id !== 'default' && project.id !== activeProject?.id;
  };

  return (
    <div className="project-selector" ref={dropdownRef}>
      <button
        className="project-selector-trigger"
        onClick={() => setIsOpen(!isOpen)}
        title="Switch project"
      >
        <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" className="project-icon">
          <path d="M14.5 3H7.71l-.85-.85A.5.5 0 0 0 6.5 2h-5a.5.5 0 0 0-.5.5v11a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-10a.5.5 0 0 0-.5-.5zm-13 1h5.29l.85.85c.1.1.23.15.36.15h6.5v9h-13V4z"/>
        </svg>
        <span className="project-name">{activeProject?.name || 'Select Project'}</span>
        <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" className="dropdown-arrow">
          <path d="M4.5 5.5L8 9l3.5-3.5h-7z"/>
        </svg>
      </button>

      {isOpen && (
        <div className="project-dropdown">
          <div className="project-dropdown-header">
            <span>PROJECTS</span>
          </div>
          <div className="project-list">
            {projects.map(project => (
              <div
                key={project.id}
                className={`project-item ${project.id === activeProject?.id ? 'active' : ''}`}
              >
                <button
                  className="project-item-content"
                  onClick={() => handleSwitchProject(project)}
                >
                  <span className="project-item-name">{project.name}</span>
                  {project.id === activeProject?.id && (
                    <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" className="check-icon">
                      <path d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"/>
                    </svg>
                  )}
                </button>
                {canDeleteProject(project) && (
                  <button
                    className="project-item-delete"
                    onClick={(e) => openDeleteModal(e, project)}
                    title={`Delete ${project.name}`}
                  >
                    <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
                      <path d="M5.5 5.5A.5.5 0 016 6v6a.5.5 0 01-1 0V6a.5.5 0 01.5-.5zm2.5 0a.5.5 0 01.5.5v6a.5.5 0 01-1 0V6a.5.5 0 01.5-.5zm3 .5a.5.5 0 00-1 0v6a.5.5 0 001 0V6z"/>
                      <path fillRule="evenodd" d="M14.5 3a1 1 0 01-1 1H13v9a2 2 0 01-2 2H5a2 2 0 01-2-2V4h-.5a1 1 0 01-1-1V2a1 1 0 011-1h4a1 1 0 011 1h2a1 1 0 011 1h2.5a1 1 0 011 1v1zM4.118 4L4 4.059V13a1 1 0 001 1h6a1 1 0 001-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
                    </svg>
                  </button>
                )}
              </div>
            ))}
            {projects.length === 0 && (
              <div className="project-empty">No projects yet</div>
            )}
          </div>
          <div className="project-dropdown-footer">
            <button className="create-project-btn" onClick={() => { setShowCreateModal(true); setIsOpen(false); }}>
              <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
                <path d="M14 7v1H8v6H7V8H1V7h6V1h1v6h6z"/>
              </svg>
              New Project
            </button>
          </div>
        </div>
      )}

      {showCreateModal && (
        <div className="modal-overlay" onClick={() => setShowCreateModal(false)}>
          <div className="modal-content" onClick={e => e.stopPropagation()}>
            <div className="modal-header">
              <h3>Create New Project</h3>
              <button className="modal-close" onClick={() => setShowCreateModal(false)}>
                <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                  <path d="M8 8.707l3.646 3.647.708-.707L8.707 8l3.647-3.646-.707-.708L8 7.293 4.354 3.646l-.707.708L7.293 8l-3.646 3.646.707.708L8 8.707z"/>
                </svg>
              </button>
            </div>
            <form onSubmit={handleCreateProject}>
              <div className="modal-body">
                <div className="form-field">
                  <label htmlFor="project-name">Project Name</label>
                  <input
                    id="project-name"
                    type="text"
                    value={newProjectName}
                    onChange={e => setNewProjectName(e.target.value)}
                    placeholder="My Blog"
                    autoFocus
                  />
                </div>
                <div className="form-field">
                  <label htmlFor="project-description">Description (optional)</label>
                  <textarea
                    id="project-description"
                    value={newProjectDescription}
                    onChange={e => setNewProjectDescription(e.target.value)}
                    placeholder="A brief description of this project..."
                    rows={3}
                  />
                </div>
              </div>
              <div className="modal-footer">
                <button type="button" className="btn-secondary" onClick={() => setShowCreateModal(false)}>
                  Cancel
                </button>
                <button type="submit" className="btn-primary" disabled={!newProjectName.trim()}>
                  Create Project
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {showDeleteModal && projectToDelete && (
        <div className="modal-overlay" onClick={() => setShowDeleteModal(false)}>
          <div className="modal-content modal-danger" onClick={e => e.stopPropagation()}>
            <div className="modal-header">
              <h3>Delete Project</h3>
              <button className="modal-close" onClick={() => setShowDeleteModal(false)}>
                <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                  <path d="M8 8.707l3.646 3.647.708-.707L8.707 8l3.647-3.646-.707-.708L8 7.293 4.354 3.646l-.707.708L7.293 8l-3.646 3.646.707.708L8 8.707z"/>
                </svg>
              </button>
            </div>
            <form onSubmit={handleDeleteProject}>
              <div className="modal-body">
                <p className="delete-warning">
                  This will permanently delete the project <strong>"{projectToDelete.name}"</strong> and all its data including:
                </p>
                <ul className="delete-list">
                  <li>All blog posts</li>
                  <li>All media files</li>
                  <li>All project settings</li>
                </ul>
                <p className="delete-confirm-text">
                  Type <strong>{projectToDelete.name}</strong> to confirm deletion:
                </p>
                <div className="form-field">
                  <input
                    type="text"
                    value={deleteConfirmText}
                    onChange={e => setDeleteConfirmText(e.target.value)}
                    placeholder={projectToDelete.name}
                    autoFocus
                  />
                </div>
              </div>
              <div className="modal-footer">
                <button type="button" className="btn-secondary" onClick={() => setShowDeleteModal(false)}>
                  Cancel
                </button>
                <button 
                  type="submit" 
                  className="btn-danger" 
                  disabled={deleteConfirmText !== projectToDelete.name}
                >
                  Delete Project
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
};

export default ProjectSelector;