Momento/architectural-grid11/src/components/Sidebar.tsx

import React from 'react';
import { 
  Plus, 
  Archive, 
  Settings, 
  ChevronRight,
  BookOpen,
  Bot,
  Microscope,
  Activity,
  Pin,
  Moon,
  Sun,
  Bell,
  Lock,
  Edit3,
  Trash2,
  Users,
  Clock,
  GripVertical,
  Wind,
  Network
} from 'lucide-react';
import { motion, AnimatePresence } from 'motion/react';
import { NavigationView, Carnet, Note } from '../types';

interface NoteLinkProps {
  note: Note;
  isActive: boolean;
  onClick: () => void;
}

const NoteLink: React.FC<NoteLinkProps> = ({ note, isActive, onClick }) => (
  <motion.button
    initial={{ opacity: 0, x: -10 }}
    animate={{ opacity: 1, x: 0 }}
    onClick={onClick}
    className={`w-full flex items-center gap-2 pl-12 pr-4 py-2 text-[12px] transition-colors rounded-lg
      ${isActive ? 'bg-white/50 dark:bg-white/10 text-ink font-medium' : 'text-muted-ink hover:text-ink hover:bg-white/30'}`}
  >
    <div className="flex items-center gap-2 flex-1 truncate">
      <div className={`w-1.5 h-1.5 rounded-full shrink-0 ${isActive ? 'bg-ink' : 'bg-transparent border border-muted-ink/30'}`} />
      <span className="truncate">{note.title}</span>
    </div>
    {note.isPinned && <Pin size={10} className="text-amber-500 shrink-0" />}
  </motion.button>
);

interface SidebarItemProps {
  carnet: Carnet;
  isActive: boolean;
  notes: Note[];
  activeNoteId: string | null;
  onCarnetClick: () => void;
  onNoteClick: (noteId: string) => void;
  onAddSubCarnet: () => void;
  onRename: () => void;
  onDelete: () => void;
  children?: React.ReactNode;
  level: number;
  isExpanded: boolean;
  toggleExpand: () => void;
  onMove?: (draggedId: string, targetId?: string) => void;
}

const SidebarItem: React.FC<SidebarItemProps> = ({ 
  carnet, 
  isActive, 
  notes,
  activeNoteId,
  onCarnetClick,
  onNoteClick,
  onAddSubCarnet,
  onRename,
  onDelete,
  children,
  level,
  isExpanded,
  toggleExpand,
  onMove
}) => {
  const hasChildren = React.Children.count(children) > 0;

  return (
    <div className="space-y-0.5">
      <div 
        className="flex items-center group relative h-10"
        style={{ paddingLeft: `${level * 12}px` }}
      >
        {/* Subtle Drag Handle */}
        <div className="absolute left-[-2px] opacity-0 group-hover:opacity-40 cursor-grab active:cursor-grabbing text-concrete transition-opacity z-10">
          <GripVertical size={10} />
        </div>

        {/* Hierarchy Guide Line */}
        {level > 0 && (
          <div className="absolute left-[8px] top-[-10px] bottom-1/2 w-px bg-border/40" />
        )}
        {level > 0 && (
          <div className="absolute left-[8px] top-1/2 w-[8px] h-px bg-border/40" />
        )}

        <div className="flex-1 flex items-center gap-1">
          {hasChildren ? (
            <button
              onClick={(e) => {
                e.stopPropagation();
                toggleExpand();
              }}
              className="p-1 hover:bg-ink/5 dark:hover:bg-white/5 rounded-md transition-colors text-muted-ink"
            >
              <motion.div animate={{ rotate: isExpanded ? 90 : 0 }} transition={{ duration: 0.2 }}>
                <ChevronRight size={14} />
              </motion.div>
            </button>
          ) : (
            <div className="w-6" /> // Spacer for alignment
          )}

          <motion.div
            whileHover={{ x: 2 }}
            className={`flex-1 flex items-center gap-2 px-2 py-1.5 rounded-lg transition-all duration-300 group/item cursor-pointer relative
              ${isActive ? 'bg-white shadow-sm border border-border/40 dark:bg-white/10' : 'hover:bg-white/40 dark:hover:bg-white/5'}`}
            onClick={onCarnetClick}
            onDragOver={(e) => {
              e.preventDefault();
              e.dataTransfer.dropEffect = 'move';
              e.currentTarget.classList.add('bg-blueprint/5', 'ring-1', 'ring-blueprint/20');
            }}
            onDragLeave={(e) => {
              e.currentTarget.classList.remove('bg-blueprint/5', 'ring-1', 'ring-blueprint/20');
            }}
            onDrop={(e) => {
              e.preventDefault();
              e.currentTarget.classList.remove('bg-blueprint/5', 'ring-1', 'ring-blueprint/20');
              const draggedId = e.dataTransfer.getData('carnetId');
              console.log('Dropped carnet:', draggedId, 'on target:', carnet.id);
              if (draggedId && draggedId !== carnet.id) {
                onMove?.(draggedId, carnet.id);
              }
            }}
            draggable
            onDragStart={(e) => {
              console.log('Starting drag for carnet:', carnet.id);
              e.dataTransfer.setData('carnetId', carnet.id);
              e.dataTransfer.effectAllowed = 'move';
              const ghost = e.currentTarget.cloneNode(true) as HTMLElement;
              ghost.style.position = 'absolute';
              ghost.style.top = '-1000px';
              ghost.style.opacity = '0.5';
              document.body.appendChild(ghost);
              e.dataTransfer.setDragImage(ghost, 0, 0);
              setTimeout(() => document.body.removeChild(ghost), 0);
            }}
          >
            {/* active indicator dot */}
            {isActive && (
              <motion.div 
                layoutId="active-indicator"
                className="absolute -left-1 w-1 h-4 bg-blueprint rounded-full"
              />
            )}
            
            <div className={`w-6 h-6 rounded-md flex items-center justify-center text-[10px] font-bold border transition-all
              ${isActive ? 'bg-blueprint text-white border-blueprint' : 'bg-paper dark:bg-white/10 text-concrete border-border dark:border-white/10'}`}>
              {carnet.initial}
            </div>
            <div className="flex-1 text-left flex items-center gap-2 min-w-0">
              <span className={`text-[12px] font-medium transition-colors truncate ${isActive ? 'text-ink' : 'text-muted-ink group-hover:text-ink'}`}>
                {carnet.name}
              </span>
              {carnet.isPrivate && <Lock size={10} className="text-concrete/60 shrink-0" />}
            </div>
            
            <div className="flex items-center gap-1 opacity-0 group-hover/item:opacity-100 transition-opacity shrink-0">
              <button
                onClick={(e) => {
                  e.stopPropagation();
                  onAddSubCarnet();
                }}
                className="p-1 hover:bg-ink/10 dark:hover:bg-white/10 rounded-md transition-all text-concrete hover:text-ink"
                title="Add sub-carnet"
              >
                <Plus size={10} />
              </button>
              <button
                onClick={(e) => {
                  e.stopPropagation();
                  onRename();
                }}
                className="p-1 hover:bg-ink/10 dark:hover:bg-white/10 rounded-md transition-all text-concrete hover:text-ink"
                title="Rename"
              >
                <Edit3 size={10} />
              </button>
              <button
                onClick={(e) => {
                  e.stopPropagation();
                  onDelete();
                }}
                className="p-1 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-md transition-all text-concrete hover:text-red-500"
                title="Delete"
              >
                <Trash2 size={10} />
              </button>
              
              {notes.length > 0 && (
                <span className="text-[9px] font-bold text-concrete/40 px-1.5 border border-border/40 rounded-full group-hover:text-concrete transition-colors">
                  {notes.length}
                </span>
              )}
            </div>
          </motion.div>
        </div>
      </div>

      <AnimatePresence initial={false}>
        {(isExpanded || (isActive && !hasChildren)) && (
          <motion.div
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: 'auto', opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            transition={{ duration: 0.3, ease: [0.23, 1, 0.32, 1] }}
            className="overflow-hidden"
          >
            <div className="relative" style={{ marginLeft: `${(level + 1) * 12 + 10}px` }}>
              {/* Vertical line for nested content */}
              <div className="absolute left-[-6px] top-0 bottom-4 w-px bg-border/30" />
              
              <div className="space-y-1 py-1">
                {children}
                {isActive && !hasChildren && notes.map(note => (
                  <NoteLink 
                    key={note.id} 
                    note={note} 
                    isActive={activeNoteId === note.id}
                    onClick={() => onNoteClick(note.id)}
                  />
                ))}
                {isActive && !hasChildren && notes.length === 0 && (
                  <p className="pl-8 py-2 text-[10px] italic text-concrete/40 font-light">
                    No notes found
                  </p>
                )}
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
};

interface SidebarProps {
  activeView: NavigationView;
  isDarkMode: boolean;
  setIsDarkMode: (val: boolean) => void;
  setActiveView: (view: NavigationView) => void;
  carnets: Carnet[];
  notes: Note[];
  activeCarnetId: string;
  activeNoteId: string | null;
  setActiveCarnetId: (id: string) => void;
  setActiveNoteId: (id: string | null) => void;
  setShowNewCarnetModal: (show: boolean, parentId?: string, isRenaming?: boolean, carnetId?: string) => void;
  onDeleteCarnet: (id: string) => void;
  onMoveCarnet: (draggedId: string, targetId?: string) => void;
}

export const Sidebar: React.FC<SidebarProps> = ({
  activeView,
  isDarkMode,
  setIsDarkMode,
  setActiveView,
  carnets,
  notes,
  activeCarnetId,
  activeNoteId,
  setActiveCarnetId,
  setActiveNoteId,
  setShowNewCarnetModal,
  onDeleteCarnet,
  onMoveCarnet
}) => {
  const [expandedIds, setExpandedIds] = React.useState<Set<string>>(new Set(['4'])); // Default expand Research

  const toggleExpand = (id: string) => {
    const newSet = new Set(expandedIds);
    if (newSet.has(id)) newSet.delete(id);
    else newSet.add(id);
    setExpandedIds(newSet);
  };

  const renderCarnetTree = (parentId: string | undefined = undefined, level: number = 0) => {
    return carnets
      .filter(c => c.parentId === parentId && !c.isDeleted)
      .map(carnet => (
        <SidebarItem 
          key={carnet.id} 
          carnet={carnet} 
          isActive={activeCarnetId === carnet.id}
          notes={notes.filter(n => n.carnetId === carnet.id && !n.isDeleted)}
          activeNoteId={activeNoteId}
          level={level}
          isExpanded={expandedIds.has(carnet.id)}
          toggleExpand={() => toggleExpand(carnet.id)}
          onAddSubCarnet={() => {
            if (!expandedIds.has(carnet.id)) toggleExpand(carnet.id);
            setShowNewCarnetModal(true, carnet.id);
          }}
          onRename={() => {
            setShowNewCarnetModal(true, undefined, true, carnet.id);
          }}
          onDelete={() => {
            onDeleteCarnet(carnet.id);
          }}
          onCarnetClick={() => {
            setActiveCarnetId(carnet.id);
            setActiveNoteId(null);
            // Auto expand when clicking
            if (!expandedIds.has(carnet.id)) toggleExpand(carnet.id);
          }}
          onNoteClick={(id) => {
            setActiveCarnetId(carnet.id);
            setActiveNoteId(id);
          }}
          onMove={onMoveCarnet}
        >
          {renderCarnetTree(carnet.id, level + 1)}
        </SidebarItem>
      ));
  };

  return (
    <aside className="w-80 bg-white/30 dark:bg-[#151515] backdrop-blur-md border-r border-border p-6 flex flex-col z-20 shrink-0 transition-colors duration-500">
      <div className="mb-10 flex items-center justify-between">
        <div className="w-10 h-10 rounded-full bg-slate-200 dark:bg-white/10 border border-border flex items-center justify-center text-ink font-serif text-lg shadow-sm">
          A
        </div>
        <div className="flex items-center gap-2">
          <button 
            onClick={() => setIsDarkMode(!isDarkMode)}
            className="p-2 text-muted-ink hover:text-ink transition-all bg-white/50 dark:bg-white/10 rounded-full border border-border dark:border-white/10"
          >
            {isDarkMode ? <Sun size={14} /> : <Moon size={14} />}
          </button>

          <button className="p-2 text-muted-ink hover:text-ink transition-all relative group bg-white/50 dark:bg-white/10 rounded-full border border-border dark:border-white/10">
            <Bell size={14} />
            <span className="absolute -top-1 -right-1 w-4 h-4 bg-rose-500 text-white text-[9px] font-bold flex items-center justify-center rounded-full border border-white shadow-sm">
              3
            </span>
          </button>

          <div className="flex bg-white/50 dark:bg-white/10 p-1 rounded-full border border-border dark:border-white/10 transition-all">
            <button 
              onClick={() => setActiveView('notebooks')}
              className={`p-1.5 rounded-full transition-all ${activeView === 'notebooks' ? 'bg-ink text-paper shadow-sm' : 'text-muted-ink hover:text-ink'}`}
              title="Carnets"
            >
              <BookOpen size={14} />
            </button>
            <button 
              onClick={() => setActiveView('reminders')}
              className={`p-1.5 rounded-full transition-all ${activeView === 'reminders' ? 'bg-ink text-paper shadow-sm' : 'text-muted-ink hover:text-ink'}`}
              title="Rappels"
            >
              <Clock size={14} />
            </button>
            <button 
              onClick={() => setActiveView('agents')}
              className={`p-1.5 rounded-full transition-all ${activeView === 'agents' ? 'bg-ink text-paper shadow-sm' : 'text-muted-ink hover:text-ink'}`}
              title="Agents"
            >
              <Bot size={14} />
            </button>
          </div>
        </div>
      </div>

      <div className="flex-1 overflow-y-auto space-y-8 -mx-2 px-2 py-4 custom-scrollbar">
        {activeView === 'notebooks' ? (
            <div className="space-y-6">
              <div 
                className="flex items-center justify-between px-4 py-1 rounded-lg transition-colors group/header"
                onDragOver={(e) => {
                  e.preventDefault();
                  e.dataTransfer.dropEffect = 'move';
                  e.currentTarget.classList.add('bg-blueprint/5', 'ring-1', 'ring-blueprint/20');
                }}
                onDragLeave={(e) => {
                  e.currentTarget.classList.remove('bg-blueprint/5', 'ring-1', 'ring-blueprint/20');
                }}
                onDrop={(e) => {
                  e.preventDefault();
                  e.currentTarget.classList.remove('bg-blueprint/5', 'ring-1', 'ring-blueprint/20');
                  const draggedId = e.dataTransfer.getData('carnetId');
                  console.log('Dropped carnet on root:', draggedId);
                  if (draggedId) {
                    onMoveCarnet(draggedId, undefined);
                  }
                }}
              >
                <p className="text-[10px] font-bold text-concrete tracking-[0.2em] uppercase">
                  Architecture Grid
                </p>
              <button 
                onClick={() => setShowNewCarnetModal(true)}
                className="p-1 hover:bg-paper dark:hover:bg-white/5 rounded-md text-concrete hover:text-ink transition-colors"
                title="New Carnet"
              >
                <Plus size={14} />
              </button>
            </div>
            
            <nav className="space-y-0.5">
              {renderCarnetTree()}
            </nav>
          </div>
        ) : activeView === 'shared' ? (
          <div className="space-y-6">
            <p className="text-[10px] font-bold text-concrete tracking-[0.2em] uppercase px-4">
              Partagé avec moi
            </p>
            <div className="px-4 py-8 text-center border border-dashed border-border rounded-2xl bg-paper/30">
              <Users size={24} className="mx-auto text-concrete/40 mb-3" />
              <p className="text-[11px] text-concrete italic">Aucun document partagé pour le moment.</p>
            </div>
          </div>
        ) : activeView === 'reminders' ? (
          <div className="space-y-6">
            <p className="text-[10px] font-bold text-concrete tracking-[0.2em] uppercase px-4">
              Rappels programmés
            </p>
            <div className="px-4 py-8 text-center border border-dashed border-border rounded-2xl bg-paper/30">
              <Clock size={24} className="mx-auto text-concrete/40 mb-3" />
              <p className="text-[11px] text-concrete italic">Aucun rappel actif.</p>
            </div>
          </div>
        ) : activeView === 'agents' ? (
          <div>
            <p className="text-[10px] font-bold text-muted-ink tracking-widest uppercase mb-4 px-4">
              Intelligence OS
            </p>
            <div className="space-y-1">
              {[
                { id: 'a1', name: 'Mes Agents', icon: <Bot size={16} /> },
                { id: 'a2', name: 'Le Lab AI', icon: <Microscope size={16} /> },
                { id: 'a3', name: 'Activités', icon: <Activity size={16} /> },
              ].map(item => (
                <button
                  key={item.id}
                  className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-300 group
                    ${item.id === 'a1' ? 'active-nav-item' : 'text-muted-ink hover:bg-white/40 dark:hover:bg-white/5 hover:text-ink'}`}
                >
                  <div className={`w-8 h-8 rounded-full flex items-center justify-center border transition-colors
                    ${item.id === 'a1' ? 'bg-ink text-paper border-ink' : 'bg-white/60 dark:bg-white/10 border-border dark:border-white/10 group-hover:border-ink/20'}`}>
                    {item.icon}
                  </div>
                  <span className="text-[13px] font-medium">{item.name}</span>
                </button>
              ))}
            </div>

            <div className="mt-8 space-y-1">
              <p className="text-[10px] font-bold text-concrete tracking-[0.2em] uppercase px-4 mb-2">
                Capabilities
              </p>
              <button 
                onClick={() => setActiveView('brainstorm')}
                className="w-full flex items-center gap-3 px-4 py-3 text-[13px] transition-all font-medium group rounded-xl text-muted-ink hover:text-ochre hover:bg-ochre/5"
              >
                <div className="w-8 h-8 rounded-full flex items-center justify-center border bg-white/60 dark:bg-white/10 border-border dark:border-white/10 group-hover:border-ochre/20">
                  <Wind size={16} />
                </div>
                <span className="flex-1 text-left">Brainstorm Wave</span>
              </button>

              <button 
                onClick={() => setActiveView('insights')}
                className="w-full flex items-center gap-3 px-4 py-3 text-[13px] transition-all font-medium group rounded-xl text-muted-ink hover:text-indigo-500 hover:bg-indigo-500/5"
              >
                <div className="w-8 h-8 rounded-full flex items-center justify-center border bg-white/60 dark:bg-white/10 border-border dark:border-white/10 group-hover:border-indigo-500/20">
                  <Network size={16} />
                </div>
                <span className="flex-1 text-left">Semantic Network</span>
              </button>

              <button 
                onClick={() => setActiveView('temporal')}
                className="w-full flex items-center gap-3 px-4 py-3 text-[13px] transition-all font-medium group rounded-xl text-muted-ink hover:text-rose-500 hover:bg-rose-500/5"
              >
                <div className="w-8 h-8 rounded-full flex items-center justify-center border bg-white/60 dark:bg-white/10 border-border dark:border-white/10 group-hover:border-rose-500/20">
                  <Clock size={16} />
                </div>
                <span className="flex-1 text-left">Temporal Forecast</span>
              </button>
            </div>
          </div>
        ) : null}
      </div>

      <div className="pt-4 border-t border-border/40 mt-auto pb-4">
        <div className="px-2 space-y-0.5">
          <button 
            onClick={() => setActiveView('shared')}
            className={`w-full flex items-center gap-3 px-3 py-2 text-[12px] transition-all font-medium group rounded-xl ${activeView === 'shared' ? 'bg-blueprint/5 text-blueprint' : 'text-muted-ink hover:text-ink hover:bg-black/5'}`}
          >
            <Users size={14} className={activeView === 'shared' ? 'text-blueprint' : 'text-muted-ink group-hover:text-ink'} />
            <span className="flex-1 text-left">Partagé</span>
          </button>

          <button className="w-full flex items-center gap-3 px-3 py-2 text-[12px] text-muted-ink hover:text-ink hover:bg-black/5 transition-all font-medium group rounded-xl">
            <Archive size={14} className="text-muted-ink group-hover:text-ink" />
            <span className="flex-1 text-left">Archives</span>
          </button>

          <button 
            onClick={() => setActiveView('trash')}
            className={`w-full flex items-center gap-3 px-3 py-2 text-[12px] transition-all font-medium group rounded-xl ${activeView === 'trash' ? 'bg-rose-50 text-rose-500' : 'text-muted-ink hover:text-rose-500 hover:bg-rose-50/50'}`}
          >
            <Trash2 size={14} className={activeView === 'trash' ? 'text-rose-500' : 'text-muted-ink group-hover:text-rose-500'} />
            <span className="flex-1 text-left">Corbeille</span>
            {notes.some(n => n.isDeleted) && (
              <div className="w-1.5 h-1.5 rounded-full bg-rose-400" />
            )}
          </button>

          <div className="my-4 pt-4 border-t border-border/20">
             <p className="text-[10px] font-bold text-muted-ink tracking-[0.2em] uppercase px-3 mb-2 opacity-60">Intelligence</p>
             <button 
                onClick={() => setActiveView('brainstorm')}
                className={`w-full flex items-center gap-3 px-3 py-2 text-[12px] transition-all font-medium group rounded-xl ${activeView === 'brainstorm' ? 'bg-ochre/10 text-ochre' : 'text-muted-ink hover:text-ochre hover:bg-ochre/5'}`}
              >
                <Wind size={14} className={activeView === 'brainstorm' ? 'text-ochre' : 'text-muted-ink group-hover:text-ochre'} />
                <span className="flex-1 text-left">Brainstorm Wave</span>
              </button>

              <button 
                onClick={() => setActiveView('insights')}
                className={`w-full flex items-center gap-3 px-3 py-2 text-[12px] transition-all font-medium group rounded-xl ${activeView === 'insights' ? 'bg-indigo-500/10 text-indigo-500' : 'text-muted-ink hover:text-indigo-500 hover:bg-indigo-500/5'}`}
              >
                <Network size={14} className={activeView === 'insights' ? 'text-indigo-500' : 'text-muted-ink group-hover:text-indigo-500'} />
                <span className="flex-1 text-left">Semantic Network</span>
              </button>

              <button 
                onClick={() => setActiveView('temporal')}
                className={`w-full flex items-center gap-3 px-3 py-2 text-[12px] transition-all font-medium group rounded-xl ${activeView === 'temporal' ? 'bg-rose-500/10 text-rose-500' : 'text-muted-ink hover:text-rose-500 hover:bg-rose-500/5'}`}
              >
                <Clock size={14} className={activeView === 'temporal' ? 'text-rose-500' : 'text-muted-ink group-hover:text-rose-500'} />
                <span className="flex-1 text-left">Temporal Forecast</span>
              </button>
          </div>

          <div className="my-2 h-px bg-border/20 mx-2" />

          <button 
            onClick={() => setActiveView('settings')}
            className={`w-full flex items-center gap-3 px-3 py-2 text-[12px] transition-all font-medium group rounded-xl ${activeView === 'settings' ? 'bg-ink text-paper shadow-sm' : 'text-muted-ink hover:text-ink hover:bg-black/5'}`}
          >
            <Settings size={14} className={activeView === 'settings' ? 'text-paper' : 'text-muted-ink group-hover:text-ink'} />
            <span className="flex-1 text-left">Paramètres</span>
          </button>
        </div>
      </div>
    </aside>
  );
};