'use client'; import Link from 'next/link'; import { AnimatePresence, motion } from 'framer-motion'; import { BarChart3, Check, CreditCard, FolderOpen, LayoutDashboard, Link as LinkIcon, MoreVertical, PencilLine, Plus, StickyNote, Trash2, X, } from 'lucide-react'; import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import ProfileAccountMenu from '@/app/components/profile/ProfileAccountMenu'; import { useToast } from '@/app/components/ToastProvider'; import { getResponseErrorTextWithRequestId } from '@/lib/api-client'; import { getRuntimeClientConfig } from '@/lib/runtime-client-config'; import type { ProfileDashboardTab } from '@/app/profile/hooks/useProfileDashboardTabs'; type Folder = { id: string; name: string; _count?: { links: number }; }; type ProfileSidebarProps = { currentTab: ProfileDashboardTab; onTabChange: (tab: ProfileDashboardTab) => void; folders: Folder[]; activeFolderId: string | null; onFolderClick: (folderId: string) => void; onCreateClick: () => void; displayName: string; avatarInitials: string; isAdmin: boolean; onOpenSettings: () => void; onLogout: () => void; onFoldersChanged?: () => Promise | void; }; const tabItems: Array<{ id: ProfileDashboardTab; label: string; Icon: typeof LayoutDashboard }> = [ { id: 'overview', label: 'Обзор', Icon: LayoutDashboard }, { id: 'links', label: 'Ссылки', Icon: LinkIcon }, { id: 'analytics', label: 'Аналитика', Icon: BarChart3 }, { id: 'pricing', label: 'Тарифы', Icon: CreditCard }, { id: 'notebook', label: 'Записки', Icon: StickyNote }, ]; export default function ProfileSidebar({ currentTab, onTabChange, folders, activeFolderId, onFolderClick, onCreateClick, displayName, avatarInitials, isAdmin, onOpenSettings, onLogout, onFoldersChanged, }: ProfileSidebarProps) { const toast = useToast(); const sidebarRef = useRef(null); const appName = useMemo(() => getRuntimeClientConfig().projectName || 'LinkSnap', []); const [isCreateFolderOpen, setIsCreateFolderOpen] = useState(false); const [newFolderName, setNewFolderName] = useState(''); const [folderActionError, setFolderActionError] = useState(''); const [isCreatingFolder, setIsCreatingFolder] = useState(false); const [openFolderMenuId, setOpenFolderMenuId] = useState(null); const [editingFolderId, setEditingFolderId] = useState(null); const [editingFolderName, setEditingFolderName] = useState(''); const [isRenamingFolderId, setIsRenamingFolderId] = useState(null); const [isDeletingFolderId, setIsDeletingFolderId] = useState(null); useEffect(() => { if (!openFolderMenuId) return; const handlePointerDown = (event: PointerEvent) => { if (!sidebarRef.current) return; if (sidebarRef.current.contains(event.target as Node)) return; setOpenFolderMenuId(null); }; window.addEventListener('pointerdown', handlePointerDown); return () => window.removeEventListener('pointerdown', handlePointerDown); }, [openFolderMenuId]); const refreshFolders = useCallback(async () => { if (!onFoldersChanged) return; await onFoldersChanged(); }, [onFoldersChanged]); const handleCreateFolder = useCallback(async () => { const trimmedName = newFolderName.trim(); if (!trimmedName || isCreatingFolder) return; setIsCreatingFolder(true); setFolderActionError(''); try { const response = await fetch('/api/folders', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: trimmedName }), }); if (!response.ok) { throw new Error(await getResponseErrorTextWithRequestId(response, 'Не удалось создать папку')); } setNewFolderName(''); setIsCreateFolderOpen(false); await refreshFolders(); toast.success('Папка создана'); } catch (error) { const message = error instanceof Error ? error.message : 'Не удалось создать папку'; setFolderActionError(message); toast.error(message); } finally { setIsCreatingFolder(false); } }, [isCreatingFolder, newFolderName, refreshFolders, toast]); const startRenameFolder = useCallback((folder: Folder) => { setEditingFolderId(folder.id); setEditingFolderName(folder.name); setOpenFolderMenuId(null); setFolderActionError(''); }, []); const cancelRenameFolder = useCallback(() => { setEditingFolderId(null); setEditingFolderName(''); setFolderActionError(''); }, []); const handleRenameFolder = useCallback(async () => { if (!editingFolderId) return; const trimmedName = editingFolderName.trim(); if (!trimmedName || isRenamingFolderId) return; setIsRenamingFolderId(editingFolderId); setFolderActionError(''); try { const response = await fetch(`/api/folders?id=${editingFolderId}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: trimmedName }), }); if (!response.ok) { throw new Error(await getResponseErrorTextWithRequestId(response, 'Не удалось переименовать папку')); } setEditingFolderId(null); setEditingFolderName(''); await refreshFolders(); toast.success('Название папки обновлено'); } catch (error) { const message = error instanceof Error ? error.message : 'Не удалось переименовать папку'; setFolderActionError(message); toast.error(message); } finally { setIsRenamingFolderId(null); } }, [editingFolderId, editingFolderName, isRenamingFolderId, refreshFolders, toast]); const handleDeleteFolder = useCallback(async (folderId: string) => { if (isDeletingFolderId) return; setIsDeletingFolderId(folderId); setFolderActionError(''); try { const response = await fetch(`/api/folders?id=${folderId}`, { method: 'DELETE' }); if (!response.ok) { throw new Error(await getResponseErrorTextWithRequestId(response, 'Не удалось удалить папку')); } if (activeFolderId === folderId) { onFolderClick(folderId); } setOpenFolderMenuId(null); await refreshFolders(); toast.success('Папка удалена'); } catch (error) { const message = error instanceof Error ? error.message : 'Не удалось удалить папку'; setFolderActionError(message); toast.error(message); } finally { setIsDeletingFolderId(null); } }, [activeFolderId, isDeletingFolderId, onFolderClick, refreshFolders, toast]); return ( ); }