ProjectSidebar.tsx

import { useState, useCallback, useRef, useEffect, KeyboardEvent } from 'react'
import { Reorder } from 'framer-motion'
import {
  Plus,
  Archive,
  Terminal,
  Edit2,
  Palette,
  Trash2,
  RotateCcw,
  ChevronDown,
  ChevronRight
} from 'lucide-react'
import { useNavigate } from 'react-router-dom'
import type { Project, ProjectColor } from '@/types/project'
import type { DetectedShells } from '@shared/types/ipc.types'
import { getColorClasses } from '@/lib/colors'
import { cn } from '@/lib/utils'
import { ContextMenu } from './ContextMenu'
import type { ContextMenuItem, ContextMenuSubItem } from './ContextMenu'
import { ConfirmDialog } from './ConfirmDialog'
import { ColorPickerPopover } from './ColorPickerPopover'
import { shellApi } from '@/lib/api'

function getFirstLetter(name: string): string {
  if (!name) return '?'
  const match = name.match(/[a-zA-Z]/)
  const first = Array.from(name)[0]
  return match ? match[0].toUpperCase() : (first ? first.toUpperCase() : '?')
}

interface ContextMenuState {
  isOpen: boolean
  x: number
  y: number
  projectId: string
}

interface ColorPickerState {
  isOpen: boolean
  x: number
  y: number
  projectId: string
}

interface DeleteConfirmState {
  isOpen: boolean
  projectId: string
  projectName: string
}

interface ProjectSidebarProps {
  projects: Project[]
  activeProjectId: string
  onSelectProject: (id: string) => void
  onNewProject: () => void
  onUpdateProject: (id: string, updates: Partial<Project>) => void
  onDeleteProject: (id: string) => void
  onArchiveProject: (id: string) => void
  onRestoreProject: (id: string) => void
  onReorderProjects: (projectIds: string[]) => void
}

export function ProjectSidebar({
  projects,
  activeProjectId,
  onSelectProject,
  onNewProject,
  onUpdateProject,
  onDeleteProject,
  onArchiveProject,
  onRestoreProject,
  onReorderProjects
}: ProjectSidebarProps): React.JSX.Element {
  const navigate = useNavigate()

  // Show archived toggle state
  const [showArchived, setShowArchived] = useState(false)

  // Context menu state
  const [contextMenu, setContextMenu] = useState<ContextMenuState>({
    isOpen: false,
    x: 0,
    y: 0,
    projectId: ''
  })

  // Inline editing state
  const [editingId, setEditingId] = useState<string | null>(null)
  const [editName, setEditName] = useState('')

  // Color picker state
  const [colorPicker, setColorPicker] = useState<ColorPickerState>({
    isOpen: false,
    x: 0,
    y: 0,
    projectId: ''
  })

  // Delete confirmation state
  const [deleteConfirm, setDeleteConfirm] = useState<DeleteConfirmState>({
    isOpen: false,
    projectId: '',
    projectName: ''
  })

  // Available shells state
  const [availableShells, setAvailableShells] = useState<DetectedShells | null>(null)

  // Fetch available shells on mount
  useEffect(() => {
    const fetchShells = async () => {
      try {
        const result = await shellApi.getAvailableShells()
        if (result.success) {
          setAvailableShells(result.data)
        }
      } catch {
        // Ignore errors
      }
    }
    void fetchShells()
  }, [])

  const handleContextMenu = useCallback((e: React.MouseEvent, projectId: string): void => {
    e.preventDefault()
    setContextMenu({
      isOpen: true,
      x: e.clientX,
      y: e.clientY,
      projectId
    })
  }, [])

  const closeContextMenu = useCallback((): void => {
    setContextMenu((prev) => ({ ...prev, isOpen: false }))
  }, [])

  const handleStartRename = useCallback(
    (projectId: string): void => {
      const project = projects.find((p) => p.id === projectId)
      if (project) {
        setEditingId(projectId)
        setEditName(project.name)
      }
    },
    [projects]
  )

  const handleSaveRename = useCallback(
    (projectId: string): void => {
      if (editName.trim()) {
        onUpdateProject(projectId, { name: editName.trim() })
      }
      setEditingId(null)
      setEditName('')
    },
    [editName, onUpdateProject]
  )

  const handleCancelRename = useCallback((): void => {
    setEditingId(null)
    setEditName('')
  }, [])

  const handleOpenColorPicker = useCallback((projectId: string, x: number, y: number): void => {
    setColorPicker({
      isOpen: true,
      x,
      y,
      projectId
    })
  }, [])

  const closeColorPicker = useCallback((): void => {
    setColorPicker((prev) => ({ ...prev, isOpen: false }))
  }, [])

  const handleColorChange = useCallback(
    (color: ProjectColor): void => {
      if (colorPicker.projectId) {
        onUpdateProject(colorPicker.projectId, { color })
      }
    },
    [colorPicker.projectId, onUpdateProject]
  )

  const handleConfirmDelete = useCallback(
    (projectId: string): void => {
      const project = projects.find((p) => p.id === projectId)
      if (project) {
        setDeleteConfirm({
          isOpen: true,
          projectId,
          projectName: project.name
        })
      }
    },
    [projects]
  )

  const handleDelete = useCallback((): void => {
    if (deleteConfirm.projectId) {
      onDeleteProject(deleteConfirm.projectId)
    }
    setDeleteConfirm({ isOpen: false, projectId: '', projectName: '' })
  }, [deleteConfirm.projectId, onDeleteProject])

  const handleCancelDelete = useCallback((): void => {
    setDeleteConfirm({ isOpen: false, projectId: '', projectName: '' })
  }, [])

  const getContextMenuItems = useCallback(
    (projectId: string): ContextMenuItem[] => {
      const project = projects.find((p) => p.id === projectId)
      const shellSubmenu: ContextMenuSubItem[] = availableShells?.available.map((shell) => ({
        label: shell.displayName,
        value: shell.path,
        isSelected: project?.defaultShell === shell.path
      })) || []

      const items: ContextMenuItem[] = [
        {
          label: 'Rename',
          icon: <Edit2 size={14} />,
          onClick: () => handleStartRename(projectId)
        },
        {
          label: 'Change Color',
          icon: <Palette size={14} />,
          onClick: () => handleOpenColorPicker(projectId, contextMenu.x, contextMenu.y)
        }
      ]

      if (shellSubmenu.length > 0) {
        items.push({
          label: 'Set Default Shell',
          icon: <Terminal size={14} />,
          submenu: shellSubmenu,
          onSubmenuSelect: (shellPath: string) => {
            onUpdateProject(projectId, { defaultShell: shellPath })
          }
        })
      }

      items.push(
        {
          label: 'Archive',
          icon: <Archive size={14} />,
          onClick: () => onArchiveProject(projectId)
        },
        {
          label: 'Delete',
          icon: <Trash2 size={14} />,
          onClick: () => handleConfirmDelete(projectId),
          variant: 'danger'
        }
      )

      return items
    },
    [projects, availableShells, contextMenu.x, contextMenu.y, handleStartRename, handleOpenColorPicker, onUpdateProject, onArchiveProject, handleConfirmDelete]
  )

  const getArchivedContextMenuItems = useCallback(
    (projectId: string): ContextMenuItem[] => {
      return [
        {
          label: 'Restore',
          icon: <RotateCcw size={14} />,
          onClick: () => onRestoreProject(projectId)
        },
        {
          label: 'Delete',
          icon: <Trash2 size={14} />,
          onClick: () => handleConfirmDelete(projectId),
          variant: 'danger'
        }
      ]
    },
    [onRestoreProject, handleConfirmDelete]
  )

  const colorPickerProject = projects.find((p) => p.id === colorPicker.projectId)

  // Filter active and archived projects
  const activeProjects = projects.filter((p) => !p.isArchived)
  const archivedProjects = projects.filter((p) => p.isArchived)

  // Determine which menu items to show based on project archived status
  const getMenuItems = useCallback(
    (projectId: string): ContextMenuItem[] => {
      const project = projects.find((p) => p.id === projectId)
      if (project?.isArchived) {
        return getArchivedContextMenuItems(projectId)
      }
      return getContextMenuItems(projectId)
    },
    [projects, getContextMenuItems, getArchivedContextMenuItems]
  )

  return (
    <aside className="w-64 bg-card border-r border-border flex flex-col flex-shrink-0">
      {/* Header with inline + button */}
      <div className="h-10 flex items-center justify-between px-4 border-b border-border">
        <span className="text-xs font-semibold tracking-wider text-muted-foreground uppercase">
          Projects
        </span>
        <button
          onClick={onNewProject}
          className="group h-6 w-6 inline-flex items-center justify-center rounded hover:bg-secondary transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"
          title="New Project"
          aria-label="Create new project from header"
          data-testid="header-new-project"
        >
          <Plus size={14} className="text-muted-foreground group-hover:text-foreground" />
        </button>
      </div>

      {/* Project List */}
      <div className="flex-1 overflow-y-auto py-2">
        {activeProjects.length === 0 && archivedProjects.length === 0 ? (
          <div className="flex flex-col items-center justify-center p-6 text-center opacity-60">
            <p className="text-sm font-medium text-muted-foreground">No projects yet</p>
            <p className="text-xs text-muted-foreground mt-1">
              Create your first project to get started
            </p>
          </div>
        ) : (
          <>
            <Reorder.Group
              axis="y"
              values={activeProjects}
              onReorder={(reordered) => onReorderProjects(reordered.map((p) => p.id))}
              className="flex flex-col"
              data-testid="active-projects-container"
            >
              {activeProjects.map((project, index) => (
                <Reorder.Item
                  key={project.id}
                  value={project}
                  className="list-none"
                  whileDrag={{ scale: 1.02, boxShadow: '0 4px 12px rgba(0,0,0,0.15)' }}
                >
                  <ProjectItem
                    project={project}
                    isActive={project.id === activeProjectId}
                    isEditing={editingId === project.id}
                    editName={editName}
                    shortcut={index < 9 ? `Ctrl+${index + 1}` : undefined}
                    onClick={() => {
                      onSelectProject(project.id)
                      navigate('/')
                    }}
                    onContextMenu={(e) => handleContextMenu(e, project.id)}
                    onEditNameChange={setEditName}
                    onSaveRename={() => handleSaveRename(project.id)}
                    onCancelRename={handleCancelRename}
                  />
                </Reorder.Item>
              ))}
            </Reorder.Group>

            {/* Archived Projects Section */}
            {archivedProjects.length > 0 && (
              <div className="mt-2">
                <button
                  onClick={() => setShowArchived(!showArchived)}
                  className="w-full flex items-center px-4 py-2 text-xs font-semibold tracking-wider text-muted-foreground uppercase hover:bg-secondary/50 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"
                  aria-expanded={showArchived}
                  aria-label={`Archived projects (${archivedProjects.length})`}
                >
                  {showArchived
                    ? <ChevronDown size={14} className="mr-2" />
                    : <ChevronRight size={14} className="mr-2" />}
                  Archived ({archivedProjects.length})
                </button>
                {showArchived && archivedProjects.map((project) => (
                  <ArchivedProjectItem
                    key={project.id}
                    project={project}
                    onClick={() => {
                      onSelectProject(project.id)
                      navigate('/')
                    }}
                    onContextMenu={(e) => handleContextMenu(e, project.id)}
                  />
                ))}
              </div>
            )}
          </>
        )}
      </div>

      {/* Bottom toolbar - New Project only */}
      <div className="border-t border-border p-2">
        <button
          onClick={onNewProject}
          className="group w-full h-8 inline-flex items-center justify-center rounded hover:bg-secondary transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"
          title="New Project"
          aria-label="Create new project from toolbar"
          data-testid="bottom-new-project"
        >
          <Plus size={16} className="text-muted-foreground group-hover:text-foreground" />
        </button>
      </div>

      {/* Context Menu */}
      {contextMenu.isOpen && (
        <ContextMenu
          items={getMenuItems(contextMenu.projectId)}
          x={contextMenu.x}
          y={contextMenu.y}
          onClose={closeContextMenu}
        />
      )}

      {/* Color Picker Popover */}
      {colorPicker.isOpen && colorPickerProject && (
        <ColorPickerPopover
          x={colorPicker.x}
          y={colorPicker.y}
          currentColor={colorPickerProject.color}
          onSelectColor={handleColorChange}
          onClose={closeColorPicker}
        />
      )}

      {/* Delete Confirmation Dialog */}
      <ConfirmDialog
        isOpen={deleteConfirm.isOpen}
        title="Delete Project"
        message={`Are you sure you want to delete "${deleteConfirm.projectName}"? This action cannot be undone.`}
        confirmLabel="Delete"
        cancelLabel="Cancel"
        variant="danger"
        onConfirm={handleDelete}
        onCancel={handleCancelDelete}
      />
    </aside>
  )
}

interface ProjectItemProps {
  project: Project
  isActive: boolean
  isEditing: boolean
  editName: string
  shortcut?: string
  onClick: () => void
  onContextMenu: (e: React.MouseEvent) => void
  onEditNameChange: (name: string) => void
  onSaveRename: () => void
  onCancelRename: () => void
}

function ProjectItem({
  project,
  isActive,
  isEditing,
  editName,
  shortcut,
  onClick,
  onContextMenu,
  onEditNameChange,
  onSaveRename,
  onCancelRename
}: ProjectItemProps): React.JSX.Element {
  const colors = getColorClasses(project.color)
  const inputRef = useRef<HTMLInputElement>(null)

  // Focus input when editing starts
  useEffect(() => {
    if (isEditing && inputRef.current) {
      inputRef.current.focus()
      inputRef.current.select()
    }
  }, [isEditing])

  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>): void => {
    if (e.key === 'Enter') {
      e.preventDefault()
      onSaveRename()
    } else if (e.key === 'Escape') {
      e.preventDefault()
      onCancelRename()
    }
  }

  const firstLetter = getFirstLetter(project.name)

  return (
    <button
      onClick={isEditing ? undefined : onClick}
      onContextMenu={onContextMenu}
      className={cn(
        'w-full flex items-center px-0 py-2 transition-colors group text-left border-l-2',
        isActive ? `${colors.border} bg-secondary` : `${colors.borderMuted} hover:bg-secondary/50`
      )}
      aria-current={isActive ? 'page' : undefined}
      aria-label={`Project: ${project.name}${isActive ? ' (active)' : ''}`}
      data-testid={`project-item-${project.id}`}
    >
      {/* Circular avatar with first letter */}
      <div
        className={cn(
          'w-5 h-5 rounded-full flex items-center justify-center ml-3 mr-3 flex-shrink-0',
          colors.bg
        )}
        aria-hidden="true"
      >
        <span className="text-xs font-medium text-white" data-testid="project-avatar-letter">{firstLetter}</span>
      </div>
      {isEditing ? (
        <input
          ref={inputRef}
          type="text"
          value={editName}
          onChange={(e) => onEditNameChange(e.target.value)}
          onKeyDown={handleKeyDown}
          onBlur={onSaveRename}
          className="flex-1 bg-secondary border border-border rounded px-2 py-0.5 text-sm text-foreground outline-none focus:ring-1 focus:ring-primary mr-2"
          onClick={(e) => e.stopPropagation()}
        />
      ) : (
        <span
          className={cn(
            'text-sm font-medium transition-colors flex-1 mr-2',
            isActive ? 'text-foreground' : 'text-muted-foreground group-hover:text-foreground'
          )}
        >
          {project.name}
        </span>
      )}
      {!isEditing && shortcut && (
        <span
          className={cn(
            'text-xs font-mono text-muted-foreground transition-opacity mr-3',
            isActive ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
          )}
        >
          {shortcut}
        </span>
      )}
    </button>
  )
}

interface ArchivedProjectItemProps {
  project: Project
  onClick: () => void
  onContextMenu: (e: React.MouseEvent) => void
}

function ArchivedProjectItem({
  project,
  onClick,
  onContextMenu
}: ArchivedProjectItemProps): React.JSX.Element {
  const colors = getColorClasses(project.color)
  const firstLetter = getFirstLetter(project.name)

  return (
    <button
      onClick={onClick}
      onContextMenu={onContextMenu}
      className={cn(
        'w-full flex items-center px-0 py-2 transition-colors group text-left border-l-2 opacity-60 hover:opacity-100',
        colors.borderMuted
      )}
      aria-label={`Archived project: ${project.name}`}
      data-testid={`archived-project-item-${project.id}`}
    >
      {/* Circular avatar with first letter */}
      <div
        className={cn(
          'w-5 h-5 rounded-full flex items-center justify-center ml-3 mr-3 flex-shrink-0',
          colors.bg
        )}
        aria-hidden="true"
      >
        <span className="text-xs font-medium text-white" data-testid="project-avatar-letter">{firstLetter}</span>
      </div>
      <span className="text-sm font-medium text-muted-foreground group-hover:text-foreground flex-1">
        {project.name}
      </span>
      <Archive size={12} className="text-muted-foreground mr-3" />
    </button>
  )
}