leocrm/frontend/src/pages/Dms.tsx

/**
 * DMS file browser page.
 * Folder tree sidebar + file grid + upload + search + preview + share + bulk actions.
 */

import React, { useState, useEffect, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { Card } from '@/components/ui/Card';
import { ConfirmDialog } from '@/components/ui/ConfirmDialog';
import { useToast } from '@/components/ui/Toast';
import { FolderTree } from '@/components/dms/FolderTree';
import { FileGrid } from '@/components/dms/FileGrid';
import { UploadDropzone } from '@/components/dms/UploadDropzone';
import { FilePreviewModal } from '@/components/dms/FilePreviewModal';
import { ShareDialog } from '@/components/dms/ShareDialog';
import { BulkActions } from '@/components/dms/BulkActions';
import {
  fetchFolders,
  createFolder,
  deleteFile,
  searchFiles,
  type DmsFolder,
  type DmsFile,
} from '@/api/dms';

export function DmsPage() {
  const { t } = useTranslation();
  const toast = useToast();
  const [folders, setFolders] = useState<DmsFolder[]>([]);
  const [files, setFiles] = useState<DmsFile[]>([]);
  const [loadingFolders, setLoadingFolders] = useState(true);
  const [loadingFiles, setLoadingFiles] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [selectedFolderId, setSelectedFolderId] = useState<string | null>(null);
  const [selectedFileIds, setSelectedFileIds] = useState<Set<string>>(new Set());
  const [searchQuery, setSearchQuery] = useState('');
  const [showUpload, setShowUpload] = useState(false);
  const [showNewFolder, setShowNewFolder] = useState(false);
  const [newFolderName, setNewFolderName] = useState('');
  const [previewFile, setPreviewFile] = useState<DmsFile | null>(null);
  const [shareFile, setShareFile] = useState<DmsFile | null>(null);
  const [deleteTarget, setDeleteTarget] = useState<DmsFile | null>(null);
  const [submittingFolder, setSubmittingFolder] = useState(false);

  // Load folders
  const loadFolders = useCallback(async () => {
    setLoadingFolders(true);
    try {
      const folderList = await fetchFolders();
      setFolders(folderList);
    } catch (err) {
      const msg = err instanceof Error ? err.message : String(err);
      setError(msg);
    }
    setLoadingFolders(false);
  }, []);

  useEffect(() => {
    loadFolders();
  }, [loadFolders]);

  // Load files (mock: in real app would fetch by folder or search)
  const loadFiles = useCallback(async () => {
    setLoadingFiles(true);
    try {
      if (searchQuery.trim()) {
        const result = await searchFiles(searchQuery);
        setFiles(result.files);
      } else {
        // For folder view, we would normally call a folder files endpoint
        // Since the API only has search and shared-with-me, we show empty or use search
        setFiles([]);
      }
    } catch (err) {
      const msg = err instanceof Error ? err.message : String(err);
      setError(msg);
      setFiles([]);
    }
    setLoadingFiles(false);
  }, [searchQuery]);

  useEffect(() => {
    const debounce = setTimeout(() => {
      loadFiles();
    }, 300);
    return () => clearTimeout(debounce);
  }, [loadFiles, selectedFolderId]);

  const handleToggleSelect = useCallback((fileId: string) => {
    setSelectedFileIds((prev) => {
      const next = new Set(prev);
      if (next.has(fileId)) {
        next.delete(fileId);
      } else {
        next.add(fileId);
      }
      return next;
    });
  }, []);

  const handleFileClick = useCallback((file: DmsFile) => {
    setPreviewFile(file);
  }, []);

  const handleFileShare = useCallback((file: DmsFile) => {
    setShareFile(file);
  }, []);

  const handleFileDelete = useCallback((file: DmsFile) => {
    setDeleteTarget(file);
  }, []);

  const handleFilePreview = useCallback((file: DmsFile) => {
    setPreviewFile(file);
  }, []);

  const handleConfirmDelete = useCallback(async () => {
    if (!deleteTarget) return;
    try {
      await deleteFile(deleteTarget.id);
      toast.success(t('dms.deleted'));
      setFiles((prev) => prev.filter((f) => f.id !== deleteTarget.id));
      setDeleteTarget(null);
    } catch (err) {
      const msg = err instanceof Error ? err.message : String(err);
      toast.error(msg);
    }
  }, [deleteTarget, toast, t]);

  const handleCreateFolder = useCallback(async () => {
    if (!newFolderName.trim()) return;
    setSubmittingFolder(true);
    try {
      const folder = await createFolder({
        name: newFolderName.trim(),
        parent_id: selectedFolderId,
      });
      setFolders((prev) => [...prev, folder]);
      setNewFolderName('');
      setShowNewFolder(false);
      toast.success(t('dms.createFolder'));
    } catch (err) {
      const msg = err instanceof Error ? err.message : String(err);
      toast.error(msg);
    }
    setSubmittingFolder(false);
  }, [newFolderName, selectedFolderId, toast, t]);

  const handleUploadComplete = useCallback(() => {
    loadFiles();
  }, [loadFiles]);

  const handleClearSelection = useCallback(() => {
    setSelectedFileIds(new Set());
  }, []);

  return (
    <div className="p-6 max-w-7xl mx-auto" data-testid="dms-page">
      <div className="flex items-center justify-between mb-6">
        <div className="flex items-center gap-4">
          <h1 className="text-2xl font-bold text-secondary-900">{t('dms.title')}</h1>
          <Link
            to="/dms/trash"
            className="text-sm text-primary-600 hover:text-primary-700"
          >
            {t('dms.trash')}
          </Link>
        </div>
        <div className="flex items-center gap-2">
          <Button
            variant="secondary"
            size="sm"
            onClick={() => setShowNewFolder(!showNewFolder)}
          >
            {t('dms.newFolder')}
          </Button>
          <Button
            size="sm"
            onClick={() => setShowUpload(!showUpload)}
          >
            {t('dms.upload')}
          </Button>
        </div>
      </div>

      {error && (
        <div className="mb-4 p-4 bg-danger-50 border border-danger-200 rounded-lg" role="alert" data-testid="dms-error">
          <p className="text-sm text-danger-700">{error}</p>
        </div>
      )}

      {showNewFolder && (
        <div className="mb-4 flex items-center gap-3 p-4 bg-secondary-50 rounded-lg" data-testid="new-folder-form">
          <Input
            label={t('dms.folderName')}
            value={newFolderName}
            onChange={(e) => setNewFolderName(e.target.value)}
            placeholder={t('dms.folderName')}
          />
          <Button onClick={handleCreateFolder} isLoading={submittingFolder} size="sm">
            {t('dms.createFolder')}
          </Button>
          <Button variant="secondary" size="sm" onClick={() => setShowNewFolder(false)}>
            {t('dms.cancel')}
          </Button>
        </div>
      )}

      {showUpload && (
        <div className="mb-6">
          <UploadDropzone
            folderId={selectedFolderId}
            onUploaded={handleUploadComplete}
          />
        </div>
      )}

      <div className="mb-4">
        <Input
          label={t('dms.search')}
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
          placeholder={t('dms.searchPlaceholder')}
        />
      </div>

      <BulkActions
        selectedFileIds={selectedFileIds}
        folders={folders}
        onClear={handleClearSelection}
        onActionComplete={() => {
          handleClearSelection();
          loadFiles();
        }}
      />

      <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mt-4">
        <div className="md:col-span-1">
          <Card title={t('dms.folders')} data-testid="folder-tree-container">
            <FolderTree
              folders={folders}
              selectedFolderId={selectedFolderId}
              onSelect={setSelectedFolderId}
              loading={loadingFolders}
            />
          </Card>
        </div>
        <div className="md:col-span-3">
          <Card title={t('dms.files')} data-testid="file-grid-container">
            <FileGrid
              files={files}
              selectedFileIds={selectedFileIds}
              onToggleSelect={handleToggleSelect}
              onFileClick={handleFileClick}
              onFileShare={handleFileShare}
              onFileDelete={handleFileDelete}
              onFilePreview={handleFilePreview}
              loading={loadingFiles}
            />
          </Card>
        </div>
      </div>

      <FilePreviewModal
        open={!!previewFile}
        file={previewFile}
        onClose={() => setPreviewFile(null)}
      />

      <ShareDialog
        open={!!shareFile}
        file={shareFile}
        onClose={() => setShareFile(null)}
        onShared={handleUploadComplete}
      />

      <ConfirmDialog
        open={!!deleteTarget}
        title={t('dms.delete')}
        message={t('dms.confirmDelete')}
        confirmLabel={t('dms.delete')}
        variant="danger"
        onConfirm={handleConfirmDelete}
        onCancel={() => setDeleteTarget(null)}
      />
    </div>
  );
}