124_webcalibre2/src/app/dashboard/dashboard-view.tsx

'use client';

import { useState } from "react";
import { 
  Button, 
  CircularProgress, 
  Box, 
  Chip, 
  IconButton, 
  Typography, 
  Stack, 
  TextField, 
  InputAdornment,
  Tooltip,
} from "@mui/material";
import { 
  DataGrid, 
  GridColDef, 
  GridToolbarContainer,
  // Using the new non-deprecated QuickFilter components
  QuickFilter,
  QuickFilterControl,
} from "@mui/x-data-grid";
import SyncIcon from "@mui/icons-material/Sync";
import RefreshIcon from "@mui/icons-material/Refresh";
import FolderIcon from "@mui/icons-material/Folder";
import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile";
import DeleteIcon from "@mui/icons-material/Delete";
import EditIcon from "@mui/icons-material/Edit";
import SearchIcon from '@mui/icons-material/Search';
import DownloadIcon from '@mui/icons-material/Download';
import OpenInNewIcon from '@mui/icons-material/OpenInNew';

import { syncOneDrive } from "./sync-actions";
import { deleteFileNodeAction } from "./actions";
import { useRouter } from "next/navigation";

/**
 * UPDATED TOOLBAR: Uses the new QuickFilter structure to avoid deprecation
 */
function CustomToolbar() {
  return (
    <GridToolbarContainer sx={{ p: 2, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
      <Typography variant="h6" fontWeight="bold" color="primary">
        Library
      </Typography>
      <Box sx={{ display: 'flex', alignItems: 'center' }}>
        <QuickFilter>
          <QuickFilterControl
            render={(props) => (
              <TextField
                {...props}
                variant="outlined"
                size="small"
                placeholder="Search files..."
                sx={{ width: 350 }}
                slotProps={{
                  input: {
                    startAdornment: (
                      <InputAdornment position="start">
                        <SearchIcon fontSize="small" />
                      </InputAdornment>
                    ),
                  },
                }}
              />
            )}
          />
        </QuickFilter>
      </Box>
    </GridToolbarContainer>
  );
}

interface DashboardViewProps {
  initialFiles: any[];
  user?: {
    id?: string;
    role?: string;
  };
}

export default function DashboardView({ initialFiles, user }: DashboardViewProps) {
  const [loading, setLoading] = useState(false);
  const [isRefreshing, setIsRefreshing] = useState(false);
  const router = useRouter();
  const isAdmin = user?.role === "ADMIN";

  const getVirtualPath = (parentId: string | null): string => {
    if (!parentId) return "WebCalibre";
    const parent = initialFiles.find((f) => f.id === parentId);
    if (!parent) return "WebCalibre";
    const prefix = parent.parentId ? `${getVirtualPath(parent.parentId)} / ` : "";
    return `${prefix}${parent.name}`;
  };

  const handleSync = async () => {
    setLoading(true);
    try {
      await syncOneDrive();
      router.refresh(); 
    } catch (error) {
      console.error("Sync failed:", error);
    } finally {
      setLoading(false);
    }
  };

  const handleRefresh = () => {
    setIsRefreshing(true);
    router.refresh();
    setTimeout(() => setIsRefreshing(false), 800);
  };

  const handleDelete = async (id: string, name: string) => {
    if (!confirm(`Are you sure you want to delete "${name}"?`)) return;
    try {
      await deleteFileNodeAction(id);
      router.refresh();
    } catch (error: any) {
      alert(error.message || "Failed to delete file");
    }
  };

  const handleDownload = (id: string) => {
    window.location.href = `/api/download?id=${id}&mode=attachment`;
  };

  const handleViewInTab = (id: string) => {
    window.open(`/api/download?id=${id}&mode=inline`, '_blank');
  };

  const columns: GridColDef[] = [
    { 
      field: "name", 
      headerName: "Name", 
      flex: 1.5,
      minWidth: 250,
      renderCell: (params) => (
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, height: '100%' }}>
          {params.row.isFolder ? <FolderIcon sx={{ color: '#FFB020' }} /> : <InsertDriveFileIcon color="action" />}
          <Typography variant="body2">{params.value}</Typography>
        </Box>
      )
    },
    { 
      field: "parentId", 
      headerName: "Location", 
      flex: 1,
      renderCell: (params) => <Chip label={getVirtualPath(params.value)} size="small" variant="outlined" />
    },
    { field: "description", headerName: "Description", flex: 1 },
    { 
      field: "type", 
      headerName: "Type", 
      width: 120,
      valueGetter: (value, row) => row.metadata?.type || (row.isFolder ? "Folder" : "File"),
      renderCell: (params) => (
        <Typography variant="caption" sx={{ textTransform: 'uppercase', fontWeight: 'bold', color: 'text.secondary' }}>
          {params.value}
        </Typography>
      )
    },
    { 
      field: "size", 
      headerName: "Size", 
      width: 100,
      renderCell: (params) => params.row.isFolder ? "--" : `${(Number(params.value) / 1024 / 1024).toFixed(2)} MB`
    },
    { 
      field: "actions",
      headerName: "Actions",
      width: 180,
      align: 'right',
      renderCell: (params) => {
        const isOwner = params.row.ownerId === user?.id;
        const isFolder = params.row.isFolder;

        return (
          <Stack direction="row" spacing={0.5} justifyContent="flex-end" alignItems="center" sx={{ height: '100%' }}>
            {!isFolder && (
              <>
                <Tooltip title="View in Tab">
                  <IconButton size="small" color="info" onClick={() => handleViewInTab(params.row.id)}>
                    <OpenInNewIcon fontSize="small" />
                  </IconButton>
                </Tooltip>
                <Tooltip title="Download to Folder">
                  <IconButton size="small" color="success" onClick={() => handleDownload(params.row.id)}>
                    <DownloadIcon fontSize="small" />
                  </IconButton>
                </Tooltip>
              </>
            )}
            
            {(isAdmin || isOwner) && (
              <>
                <Tooltip title="Edit Details">
                  <IconButton 
                    size="small" 
                    color="primary" 
                    onClick={() => router.push(`/update/${params.row.id}`)}
                  >
                    <EditIcon fontSize="small" />
                  </IconButton>
                </Tooltip>
                <Tooltip title="Delete">
                  <IconButton 
                    size="small" 
                    color="error" 
                    onClick={() => handleDelete(params.row.id, params.row.name)}
                  >
                    <DeleteIcon fontSize="small" />
                  </IconButton>
                </Tooltip>
              </>
            )}
          </Stack>
        );
      }
    }
  ];

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
      <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 2 }}>
        <Button 
          variant="outlined" 
          startIcon={isRefreshing ? <CircularProgress size={16} /> : <RefreshIcon />} 
          onClick={handleRefresh}
        >
          Refresh List
        </Button>
        <Button 
          variant="contained" 
          startIcon={loading ? <CircularProgress size={20} color="inherit" /> : <SyncIcon />} 
          onClick={handleSync} 
          disabled={loading}
        >
          Sync OneDrive
        </Button>
      </Box>

      <Box sx={{ height: 700, width: "100%", bgcolor: 'background.paper', borderRadius: 3, boxShadow: 1, overflow: 'hidden' }}>
        <DataGrid
          rows={initialFiles}
          columns={columns}
          slots={{ toolbar: CustomToolbar }}
          disableRowSelectionOnClick
          sx={{ 
            border: 'none', 
            '& .MuiDataGrid-columnHeader': { bgcolor: '#f8f9fa' },
            '& .MuiDataGrid-footerContainer': { borderTop: '1px solid #eee' } 
          }}
        />
      </Box>
    </Box>
  );
}