av-planner/src/components/palette/DevicePalette.tsx

import { useMemo, useState } from 'react'
import { allDeviceCategories, allDeviceTemplates, hiddenDeviceTemplates } from '../../domain/project'
import type { DeviceTemplate } from '../../domain/types'
import { useCatalogStore } from '../../state/catalogStore'
import { useProjectStore } from '../../state/projectStore'
import { TEMPLATE_DRAG_MIME } from '../canvas/FlowCanvas'
import Chevron from '../common/Chevron'
import ConnectorLibraryModal from './ConnectorLibraryModal'
import DeviceTemplateEditor from './DeviceTemplateEditor'

export default function DevicePalette() {
  const project = useProjectStore((s) => s.project)
  const addDeviceFromTemplate = useProjectStore((s) => s.addDeviceFromTemplate)
  const catalog = useCatalogStore((s) => s.catalog)
  const hiddenPublicIds = useCatalogStore((s) => s.hiddenPublicDeviceTemplateIds)
  const removeCustomDeviceTemplate = useCatalogStore((s) => s.removeCustomDeviceTemplate)
  const hidePublicDeviceTemplate = useCatalogStore((s) => s.hidePublicDeviceTemplate)
  const restorePublicDeviceTemplate = useCatalogStore((s) => s.restorePublicDeviceTemplate)
  const [editorTarget, setEditorTarget] = useState<'new' | DeviceTemplate | null>(null)
  const [portTypesOpen, setPortTypesOpen] = useState(false)
  const [hiddenListOpen, setHiddenListOpen] = useState(false)
  // Collapsed by default — expanding on demand is the whole point (keeps a
  // library with many devices from turning into one long scroll).
  const [expandedCategories, setExpandedCategories] = useState<Set<string>>(new Set())

  const groups = useMemo(() => {
    const categories = allDeviceCategories(catalog)
    const categoryName = (id: string) => categories.find((c) => c.id === id)?.name ?? id
    const byCategory = new Map<string, DeviceTemplate[]>()
    for (const template of allDeviceTemplates(catalog, hiddenPublicIds)) {
      const list = byCategory.get(template.category) ?? []
      list.push(template)
      byCategory.set(template.category, list)
    }
    return [...byCategory.entries()]
      .map(([categoryId, templates]) => ({
        categoryId,
        categoryName: categoryName(categoryId),
        templates: templates.sort((a, b) => a.name.localeCompare(b.name)),
      }))
      .sort((a, b) => a.categoryName.localeCompare(b.categoryName))
  }, [catalog, hiddenPublicIds])

  const toggleCategory = (categoryId: string) => {
    setExpandedCategories((prev) => {
      const next = new Set(prev)
      if (next.has(categoryId)) next.delete(categoryId)
      else next.add(categoryId)
      return next
    })
  }

  const expandCategory = (categoryId: string) => {
    setExpandedCategories((prev) => new Set(prev).add(categoryId))
  }

  const handleDragStart = (event: React.DragEvent, template: DeviceTemplate) => {
    event.dataTransfer.setData(TEMPLATE_DRAG_MIME, template.id)
    event.dataTransfer.effectAllowed = 'move'
  }

  const handleQuickAdd = (template: DeviceTemplate) => {
    // Cascade placement so repeated quick-adds don't stack exactly on top of each other.
    const offset = (project.devices.length % 8) * 24
    addDeviceFromTemplate(catalog, template.id, { x: 80 + offset, y: 80 + offset })
  }

  const handleDelete = (template: DeviceTemplate) => {
    if (!template.custom) {
      const confirmed = window.confirm(
        `Hide "${template.name}" from your device library? It's a public default, so you can bring it back later from "Show hidden defaults" at the bottom of this panel. Devices already placed on the canvas from it won't be affected.`,
      )
      if (confirmed) hidePublicDeviceTemplate(template.id)
      return
    }
    const confirmed = window.confirm(
      `Delete "${template.name}" from your device library? Devices already placed on the canvas from it won't be affected.`,
    )
    if (confirmed) removeCustomDeviceTemplate(template.id)
  }

  const hiddenDefaults = useMemo(() => hiddenDeviceTemplates(catalog, hiddenPublicIds), [catalog, hiddenPublicIds])

  return (
    <aside className="flex h-full w-64 shrink-0 flex-col border-r border-slate-200 bg-slate-50">
      <div className="flex items-center justify-between border-b border-slate-200 px-3 py-2">
        <h2 className="text-xs font-semibold uppercase tracking-wide text-slate-500">Devices</h2>
        <div className="flex items-center gap-1.5">
          <button
            onClick={() => setPortTypesOpen(true)}
            title="Manage connector types"
            className="rounded bg-slate-100 px-2 py-1 text-[11px] font-medium text-slate-600 hover:bg-slate-200"
          >
            Connectors
          </button>
          <button
            onClick={() => setEditorTarget('new')}
            className="rounded bg-indigo-600 px-2 py-1 text-[11px] font-medium text-white hover:bg-indigo-500"
          >
            + Custom
          </button>
        </div>
      </div>
      <p className="border-b border-slate-200 px-3 py-2 text-[11px] text-slate-500">
        Drag a device onto the canvas, or click + to drop it in.
      </p>
      <div className="flex-1 overflow-y-auto p-2">
        {groups.map((group) => {
          const expanded = expandedCategories.has(group.categoryId)
          return (
            <div key={group.categoryId} className="mb-1">
              <button
                onClick={() => toggleCategory(group.categoryId)}
                className="flex w-full items-center justify-between rounded px-1.5 py-1 text-left text-xs font-medium text-slate-600 hover:bg-slate-100"
              >
                <span className="flex items-center gap-1.5">
                  <Chevron expanded={expanded} className="text-slate-400" />
                  {group.categoryName}
                </span>
                <span className="text-[10px] text-slate-400">{group.templates.length}</span>
              </button>
              {expanded && (
                <ul className="mt-1 space-y-1 pl-2">
                  {group.templates.map((template) => (
                    <li key={template.id} className="group">
                      <div
                        draggable
                        onDragStart={(e) => handleDragStart(e, template)}
                        className="flex cursor-grab items-center justify-between rounded border border-slate-200 bg-white px-2 py-1.5 text-xs shadow-sm active:cursor-grabbing"
                      >
                        <div className="min-w-0">
                          <div className="truncate font-medium text-slate-700">{template.name}</div>
                          <div className="truncate text-[10px] text-slate-400">
                            {template.ports.length} port{template.ports.length === 1 ? '' : 's'}
                            {template.custom ? ' · custom' : ''}
                          </div>
                        </div>
                        <div className="ml-2 flex shrink-0 items-center gap-1 opacity-0 group-hover:opacity-100">
                          {template.custom && (
                            <button
                              onClick={() => setEditorTarget(template)}
                              title="Edit this device"
                              className="rounded bg-slate-100 px-1.5 py-0.5 text-slate-500 hover:bg-indigo-100 hover:text-indigo-700"
                            >
                              ✎
                            </button>
                          )}
                          <button
                            onClick={() => handleDelete(template)}
                            title={template.custom ? 'Delete from library' : 'Hide this default device'}
                            className="rounded bg-slate-100 px-1.5 py-0.5 text-slate-500 hover:bg-red-50 hover:text-red-600"
                          >
                            ✕
                          </button>
                          <button
                            onClick={() => handleQuickAdd(template)}
                            title="Add to canvas"
                            className="rounded bg-slate-100 px-1.5 py-0.5 text-slate-500 hover:bg-indigo-100 hover:text-indigo-700"
                          >
                            +
                          </button>
                        </div>
                      </div>
                    </li>
                  ))}
                </ul>
              )}
            </div>
          )
        })}
      </div>
      {hiddenDefaults.length > 0 && (
        <div className="border-t border-slate-200 px-2 py-1.5">
          <button
            onClick={() => setHiddenListOpen((v) => !v)}
            className="flex w-full items-center justify-between rounded px-1.5 py-1 text-left text-[11px] text-slate-500 hover:bg-slate-100"
          >
            <span>
              {hiddenListOpen ? 'Hide' : 'Show'} hidden defaults ({hiddenDefaults.length})
            </span>
            <Chevron expanded={hiddenListOpen} className="text-slate-500" />
          </button>
          {hiddenListOpen && (
            <ul className="mt-1 space-y-1">
              {hiddenDefaults.map((template) => (
                <li key={template.id} className="flex items-center justify-between rounded bg-white px-2 py-1 text-xs">
                  <span className="truncate text-slate-600">{template.name}</span>
                  <button
                    onClick={() => restorePublicDeviceTemplate(template.id)}
                    className="shrink-0 rounded bg-slate-100 px-1.5 py-0.5 text-[10px] font-medium text-slate-600 hover:bg-indigo-100 hover:text-indigo-700"
                  >
                    Restore
                  </button>
                </li>
              ))}
            </ul>
          )}
        </div>
      )}
      {editorTarget && (
        <DeviceTemplateEditor
          template={editorTarget === 'new' ? undefined : editorTarget}
          onClose={() => setEditorTarget(null)}
          onSaved={(categoryId) => expandCategory(categoryId)}
        />
      )}
      {portTypesOpen && <ConnectorLibraryModal onClose={() => setPortTypesOpen(false)} />}
    </aside>
  )
}