boocode/apps/web/src/components/ProjectSidebar.tsx

import { useEffect, useMemo, useRef, useState } from 'react';
import { NavLink, useLocation, useNavigate } from 'react-router-dom';
import { ChevronRight, ExternalLink, Folder, MessageSquare, Plus, Settings as SettingsIcon, X, Code } from 'lucide-react';
import { toast } from 'sonner';
import { Button } from '@/components/ui/button';
import { sessionEvents } from '@/hooks/sessionEvents';
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuTrigger,
} from '@/components/ui/context-menu';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from '@/components/ui/dialog';
import { AddProjectModal } from './AddProjectModal';
import { api } from '@/api/client';
import { useSidebar } from '@/hooks/useSidebar';
import { useSidebarDrawer } from '@/hooks/useSidebarDrawer';
import { useViewport } from '@/hooks/useViewport';
import { usePullToRefresh } from '@/hooks/usePullToRefresh';
import type { SidebarProject } from '@/api/types';
import { giteaUrlFor } from '@/lib/projectUrls';
import { isCoderSessionName } from '@/lib/coder-session';
import { cn } from '@/lib/utils';

const EXPANDED_KEY = 'boocode.sidebar.expanded';
const MAX_VISIBLE_SESSIONS = 5;

function readExpanded(): Set<string> {
  try {
    const raw = localStorage.getItem(EXPANDED_KEY);
    if (!raw) return new Set();
    const parsed = JSON.parse(raw);
    if (!Array.isArray(parsed)) return new Set();
    return new Set(parsed.filter((v): v is string => typeof v === 'string'));
  } catch {
    return new Set();
  }
}

function writeExpanded(ids: Set<string>): void {
  try {
    localStorage.setItem(EXPANDED_KEY, JSON.stringify(Array.from(ids)));
  } catch {
    /* quota or disabled storage — ignore */
  }
}

function relTime(iso: string): string {
  const now = Date.now();
  const t = Date.parse(iso);
  if (Number.isNaN(t)) return '';
  const sec = Math.max(0, Math.floor((now - t) / 1000));
  if (sec < 60) return `${sec}s`;
  const min = Math.floor(sec / 60);
  if (min < 60) return `${min}m`;
  const hr = Math.floor(min / 60);
  if (hr < 24) return `${hr}h`;
  const day = Math.floor(hr / 24);
  if (day < 30) return `${day}d`;
  const mo = Math.floor(day / 30);
  if (mo < 12) return `${mo}mo`;
  return `${Math.floor(mo / 12)}y`;
}

function activeProjectId(
  pathname: string,
  projects: SidebarProject[],
  activeSession: { session_id: string; project_id: string } | null
): string | null {
  const pm = pathname.match(/^\/project\/([^/]+)/);
  if (pm?.[1]) return pm[1];
  const sm = pathname.match(/^\/session\/([^/]+)/);
  const sid = sm?.[1];
  if (!sid) return null;
  // Prefer the cache lookup so we resolve correctly even when an older
  // activeSession (from a prior route) hasn't been cleared yet.
  const fromCache = projects.find((p) =>
    p.recent_sessions.some((s) => s.id === sid)
  )?.id;
  if (fromCache) return fromCache;
  // Fallback: the session was loaded via deep link (not in cache) and
  // emitted session_loaded — use that. Guard against stale values by
  // matching the current URL sid.
  if (activeSession && activeSession.session_id === sid) {
    return activeSession.project_id;
  }
  return null;
}

function activeSessionId(pathname: string): string | null {
  const m = pathname.match(/^\/session\/([^/]+)/);
  return m?.[1] ?? null;
}

export function ProjectSidebar() {
  const { data, error, loading, retry, activeSession: loadedActiveSession } =
    useSidebar();
  const [addOpen, setAddOpen] = useState(false);
  const [expanded, setExpanded] = useState<Set<string>>(() => readExpanded());
  const [renamingSession, setRenamingSession] = useState<string | null>(null);
  const [renameValue, setRenameValue] = useState('');
  const [deleteConfirm, setDeleteConfirm] = useState<{ id: string; name: string } | null>(null);
  const [renamingProject, setRenamingProject] = useState<string | null>(null);
  const [renameProjectValue, setRenameProjectValue] = useState('');
  const [archiveProjectConfirm, setArchiveProjectConfirm] = useState<{ id: string; name: string } | null>(null);
  const navigate = useNavigate();
  const location = useLocation();
  const lastToastedError = useRef<string | null>(null);

  useEffect(() => {
    if (error && !data && error !== lastToastedError.current) {
      toast.error(error);
      lastToastedError.current = error;
    }
    if (!error) lastToastedError.current = null;
  }, [error, data]);

  const projects = data?.projects ?? [];
  const activeProject = useMemo(
    () => activeProjectId(location.pathname, projects, loadedActiveSession),
    [location.pathname, projects, loadedActiveSession]
  );
  const activeSession = useMemo(
    () => activeSessionId(location.pathname),
    [location.pathname]
  );

  function toggle(id: string) {
    setExpanded((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      writeExpanded(next);
      return next;
    });
  }

  async function handleArchiveProject(id: string) {
    try {
      await api.projects.archive(id);
      // Server publishes project_archived via WS.
      if (activeProject === id) navigate('/');
    } catch (err) {
      toast.error(err instanceof Error ? err.message : 'failed to archive project');
    }
  }

  async function handleRenameProject(id: string) {
    const trimmed = renameProjectValue.trim();
    setRenamingProject(null);
    if (!trimmed) return;
    try {
      await api.projects.update(id, { name: trimmed });
      // Server publishes project_updated via WS.
    } catch (err) {
      toast.error(err instanceof Error ? err.message : 'failed to rename project');
    }
  }

  async function handleArchiveSession(sessionId: string, projectId: string) {
    try {
      await api.sessions.archive(sessionId);
      // Server publishes session_archived via WS; useUserEvents delivers it.
      if (activeSession === sessionId) navigate(`/project/${projectId}`);
    } catch (err) {
      toast.error(err instanceof Error ? err.message : 'failed to archive session');
    }
  }

  async function handleDeleteSession(sessionId: string, projectId: string) {
    try {
      await api.sessions.remove(sessionId);
      // Server publishes session_deleted via WS; useUserEvents delivers it.
      if (activeSession === sessionId) navigate(`/project/${projectId}`);
    } catch (err) {
      toast.error(err instanceof Error ? err.message : 'failed to delete session');
    }
  }

  async function handleRenameSession(sessionId: string) {
    const trimmed = renameValue.trim();
    setRenamingSession(null);
    if (!trimmed) return;
    try {
      await api.sessions.update(sessionId, { name: trimmed });
      // Server publishes session_renamed via broker.publishUser; useUserEvents
      // forwards onto the bus. No local emit needed.
    } catch (err) {
      toast.error(err instanceof Error ? err.message : 'failed to rename session');
    }
  }

  const rowCls = (active: boolean) =>
    active ? 'bg-sidebar-accent text-sidebar-accent-foreground' : 'hover:bg-sidebar-accent/60';

  const { open: drawerOpen, setOpen: setDrawerOpen } = useSidebarDrawer();
  const { isMobile } = useViewport();
  const pull = usePullToRefresh(() => retry(), { enabled: isMobile });

  // On mobile the sidebar is a slide-in drawer (fixed, z-40, off-screen by
  // default). On desktop it sits inline as a normal flex column. The
  // backdrop is rendered by AppShell; drawer-open state lives in
  // SidebarDrawerProvider.
  const asideCls = isMobile
    ? cn(
        'fixed inset-y-0 left-0 z-40 w-60 border-r bg-sidebar text-sidebar-foreground flex flex-col',
        'transition-transform duration-200 ease-out',
        drawerOpen ? 'translate-x-0' : '-translate-x-full',
      )
    : 'w-60 shrink-0 border-r bg-sidebar text-sidebar-foreground flex flex-col h-screen';

  return (
    <aside className={asideCls}>
      <div className="px-4 py-3 border-b flex items-center justify-between">
        <NavLink to="/" className="font-semibold tracking-tight text-base">
          BooCode
        </NavLink>
        <div className="flex items-center gap-1">
          <Button size="icon-sm" variant="ghost" onClick={() => setAddOpen(true)} aria-label="Add project">
            <Plus />
          </Button>
          {isMobile && (
            <Button
              size="icon-sm"
              variant="ghost"
              onClick={() => setDrawerOpen(false)}
              aria-label="Close sidebar"
            >
              <X />
            </Button>
          )}
        </div>
      </div>

      {isMobile && (pull.pullDist > 0 || pull.refreshing) && (
        <div
          className="flex items-center justify-center text-[10px] uppercase tracking-wide text-muted-foreground border-b overflow-hidden shrink-0"
          style={{
            height: pull.refreshing ? 32 : Math.min(pull.pullDist, 80),
            transition: pull.pullDist === 0 && !pull.refreshing ? 'height 0.2s ease' : undefined,
          }}
          aria-live="polite"
        >
          {pull.refreshing
            ? 'Refreshing…'
            : pull.pullDist >= 80
            ? 'Release to refresh'
            : 'Pull to refresh'}
        </div>
      )}

      <nav
        className="flex-1 overflow-y-auto py-2"
        onTouchStart={isMobile ? pull.onTouchStart : undefined}
        onTouchMove={isMobile ? pull.onTouchMove : undefined}
        onTouchEnd={isMobile ? pull.onTouchEnd : undefined}
        onTouchCancel={isMobile ? pull.onTouchEnd : undefined}
      >
        {loading && data == null && (
          <div className="space-y-2 px-2">
            {[0, 1, 2, 3].map((i) => (
              <div key={i} className="bg-muted/40 animate-pulse rounded h-6" />
            ))}
          </div>
        )}
        {data != null && projects.length === 0 && (
          <div className="px-4 py-2 text-xs text-muted-foreground">
            No projects yet. Click + to add one.
          </div>
        )}
        {error != null && !data && (
          <div className="px-4 py-2 space-y-2">
            <div className="text-xs text-muted-foreground">{error}</div>
            <Button size="sm" variant="outline" onClick={retry}>
              Retry
            </Button>
          </div>
        )}
        {data != null &&
          projects.map((p) => {
            const isActiveProject = activeProject === p.id;
            const isExpanded = isActiveProject || expanded.has(p.id);
            const visible = p.recent_sessions.slice(0, MAX_VISIBLE_SESSIONS);
            return (
              <div key={p.id} className="px-2">
                <ContextMenu>
                  <ContextMenuTrigger asChild>
                    <div
                      className={`group flex items-center gap-1 rounded-md px-2 py-1.5 text-sm ${rowCls(isActiveProject)}`}
                    >
                      <button
                        type="button"
                        aria-label={isExpanded ? 'Collapse' : 'Expand'}
                        aria-expanded={isExpanded}
                        disabled={isActiveProject}
                        onClick={(e) => {
                          e.stopPropagation();
                          if (isActiveProject) return;
                          toggle(p.id);
                        }}
                        className={cn(
                          'flex items-center justify-center size-4 shrink-0 opacity-70 hover:opacity-100',
                          isActiveProject &&
                            'opacity-50 cursor-not-allowed hover:opacity-50'
                        )}
                      >
                        <ChevronRight
                          className={`size-3.5 transition-transform ${isExpanded ? 'rotate-90' : ''}`}
                        />
                      </button>
                      {renamingProject === p.id ? (
                        <div className="flex items-center gap-2 min-w-0 flex-1">
                          <Folder className="size-3.5 shrink-0 opacity-70" />
                          <input
                            autoFocus
                            value={renameProjectValue}
                            onChange={(e) => setRenameProjectValue(e.target.value)}
                            onBlur={() => void handleRenameProject(p.id)}
                            onKeyDown={(e) => {
                              if (e.key === 'Enter') void handleRenameProject(p.id);
                              if (e.key === 'Escape') setRenamingProject(null);
                            }}
                            className="bg-transparent border-b border-border text-sm outline-none flex-1 min-w-0"
                          />
                        </div>
                      ) : (
                        <NavLink to={`/project/${p.id}`} className="flex items-center gap-2 min-w-0 flex-1">
                          <Folder className="size-3.5 shrink-0 opacity-70" />
                          <span className="truncate" title={p.name}>{p.name}</span>
                        </NavLink>
                      )}
                    </div>
                  </ContextMenuTrigger>
                  <ContextMenuContent>
                    <ContextMenuItem onSelect={() => {
                      setRenamingProject(p.id);
                      setRenameProjectValue(p.name);
                    }}>
                      Rename
                    </ContextMenuItem>
                    <ContextMenuItem onSelect={() => setArchiveProjectConfirm({ id: p.id, name: p.name })}>
                      Archive
                    </ContextMenuItem>
                    <ContextMenuSeparator />
                    <ContextMenuItem onSelect={() => {
                      const url = giteaUrlFor({ path: p.path, gitea_remote: p.gitea_remote });
                      window.open(url, '_blank', 'noopener');
                    }}>
                      <ExternalLink size={12} /> Open in Gitea
                    </ContextMenuItem>
                  </ContextMenuContent>
                </ContextMenu>

                {isExpanded && (
                  <div className="ml-5 mt-0.5 space-y-0.5">
                    {visible.map((s) => (
                      <ContextMenu key={s.id}>
                        <ContextMenuTrigger asChild>
                          {renamingSession === s.id ? (
                            <div className={`flex items-center gap-2 rounded-md px-2 py-1 text-sm min-w-0 ${rowCls(activeSession === s.id)}`}>
                              <MessageSquare className="size-3.5 shrink-0 opacity-70" />
                              <input
                                autoFocus
                                value={renameValue}
                                onChange={(e) => setRenameValue(e.target.value)}
                                onBlur={() => void handleRenameSession(s.id)}
                                onKeyDown={(e) => {
                                  if (e.key === 'Enter') void handleRenameSession(s.id);
                                  if (e.key === 'Escape') setRenamingSession(null);
                                }}
                                className="bg-transparent border-b border-border text-sm outline-none flex-1 min-w-0"
                              />
                            </div>
                          ) : (
                            <NavLink
                              to={`/session/${s.id}`}
                              className={`flex items-center gap-2 rounded-md px-2 py-1 text-sm min-w-0 ${rowCls(activeSession === s.id)}`}
                            >
                              {isCoderSessionName(s.name) ? (
                                <Code className="size-3.5 shrink-0 opacity-70" />
                              ) : (
                                <MessageSquare className="size-3.5 shrink-0 opacity-70" />
                              )}
                              <span className="truncate flex-1" title={s.name}>{s.name}</span>
                              <span className="text-xs text-muted-foreground shrink-0 tabular-nums">
                                {relTime(s.updated_at)}
                              </span>
                            </NavLink>
                          )}
                        </ContextMenuTrigger>
                        <ContextMenuContent>
                          <ContextMenuItem onSelect={() => {
                            setRenamingSession(s.id);
                            setRenameValue(s.name);
                          }}>
                            Rename
                          </ContextMenuItem>
                          <ContextMenuItem onSelect={() => void handleArchiveSession(s.id, p.id)}>
                            Archive
                          </ContextMenuItem>
                          <ContextMenuSeparator />
                          <ContextMenuItem
                            variant="destructive"
                            onSelect={() => setDeleteConfirm({ id: s.id, name: s.name })}
                          >
                            Delete
                          </ContextMenuItem>
                        </ContextMenuContent>
                      </ContextMenu>
                    ))}
                    {p.total_sessions > MAX_VISIBLE_SESSIONS && (
                      <NavLink
                        to={`/project/${p.id}`}
                        className="block rounded-md px-2 py-1 text-xs text-muted-foreground hover:bg-sidebar-accent/60"
                      >
                        View all ({p.total_sessions})
                      </NavLink>
                    )}
                  </div>
                )}
              </div>
            );
          })}
      </nav>

      {/* v1.9: bottom-pinned Settings button. In a session, opens/focuses the
          workspace settings pane via the sessionEvents bus (Session.tsx owns
          the panesHook). Outside a session there's no workspace to mount the
          pane in, so we navigate to /settings (themes page) instead. */}
      <div className="border-t shrink-0 p-2">
        <button
          type="button"
          onClick={() => {
            if (activeSession) {
              sessionEvents.emit({ type: 'open_settings_pane' });
              if (isMobile) setDrawerOpen(false);
            } else {
              navigate('/settings');
              if (isMobile) setDrawerOpen(false);
            }
          }}
          className="w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-sm hover:bg-sidebar-accent/60 text-sidebar-foreground"
          aria-label="Settings"
        >
          <SettingsIcon className="size-3.5 shrink-0 opacity-70" />
          <span className="flex-1 text-left">Settings</span>
        </button>
      </div>

      <AddProjectModal open={addOpen} onOpenChange={setAddOpen} onAdded={() => {}} />

      <Dialog open={archiveProjectConfirm !== null} onOpenChange={(open) => { if (!open) setArchiveProjectConfirm(null); }}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Archive project?</DialogTitle>
            <DialogDescription>
              Removes {archiveProjectConfirm ? `"${archiveProjectConfirm.name}"` : 'this project'} from the sidebar. Files on disk are untouched. You can restore it later from the Archived Projects view.
            </DialogDescription>
          </DialogHeader>
          <div className="flex gap-2 justify-end pt-2">
            <Button variant="outline" onClick={() => setArchiveProjectConfirm(null)}>
              Cancel
            </Button>
            <Button
              onClick={() => {
                if (archiveProjectConfirm) void handleArchiveProject(archiveProjectConfirm.id);
                setArchiveProjectConfirm(null);
              }}
            >
              Archive
            </Button>
          </div>
        </DialogContent>
      </Dialog>

      <Dialog open={deleteConfirm !== null} onOpenChange={(open) => { if (!open) setDeleteConfirm(null); }}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Delete session?</DialogTitle>
            <DialogDescription>
              This will permanently delete {deleteConfirm ? `"${deleteConfirm.name}"` : 'this session'} and all its chats and messages. This cannot be undone.
            </DialogDescription>
          </DialogHeader>
          <div className="flex gap-2 justify-end pt-2">
            <Button variant="outline" onClick={() => setDeleteConfirm(null)}>
              Cancel
            </Button>
            <Button
              variant="destructive"
              onClick={() => {
                if (deleteConfirm) {
                  const projectId = projects.find((p) =>
                    p.recent_sessions.some((s) => s.id === deleteConfirm.id)
                  )?.id;
                  if (projectId) void handleDeleteSession(deleteConfirm.id, projectId);
                }
                setDeleteConfirm(null);
              }}
            >
              Delete
            </Button>
          </div>
        </DialogContent>
      </Dialog>
    </aside>
  );
}