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

'use client';

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

import { useState } from "react";
import { 
  Button, 
  CircularProgress, 
  Box, 
  Chip, 
  IconButton, 
  Typography, 
  Stack, 
  TextField, 
  InputAdornment
} from "@mui/material";
import { 
  DataGrid, 
  GridColDef, 
  Toolbar, 
  QuickFilter, 
  QuickFilterControl, 
  QuickFilterClear,
} 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 CancelIcon from '@mui/icons-material/Cancel';

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

function CustomToolbar() {
  return (
    <Toolbar sx={{ p: 2, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
      <Typography variant="h6" fontWeight="bold" color="primary">
        Library
      </Typography>
      <QuickFilter sx={{ display: 'flex', alignItems: 'center' }}>
        <QuickFilterControl
          render={({ ref, ...controlProps }, state) => (
            <TextField
              {...controlProps}
              inputRef={ref}
              variant="outlined"
              size="small"
              placeholder="Search files and metadata..."
              sx={{ width: 350 }}
              slotProps={{
                input: {
                  startAdornment: (
                    <InputAdornment position="start">
                      <SearchIcon fontSize="small" />
                    </InputAdornment>
                  ),
                  endAdornment: state.value ? (
                    <InputAdornment position="end">
                      <QuickFilterClear size="small">
                        <CancelIcon fontSize="small" />
                      </QuickFilterClear>
                    </InputAdornment>
                  ) : null,
                },
              }}
            />
          )}
        />
      </QuickFilter>
    </Toolbar>
  );
}

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 deleteFileAction(id);
      router.refresh();
    } catch (error: any) {
      alert(error.message || "Failed to delete file");
    }
  };

  const columns: GridColDef[] = [
    { 
      field: "name", 
      headerName: "Name", 
      flex: 1.5,
      minWidth: 250,
      renderCell: (params) => (
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
          {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: 120,
      align: 'right',
      renderCell: (params) => {
        const isOwner = params.row.ownerId === user?.id;
        if (isAdmin || isOwner) {
          return (
            <Stack direction="row" spacing={0.5}>
              <IconButton 
                size="small" 
                color="primary" 
                onClick={() => router.push(`/update/${params.row.id}`)}
                title="Edit Details"
              >
                <EditIcon fontSize="small" />
              </IconButton>
              <IconButton 
                size="small" 
                color="error" 
                onClick={() => handleDelete(params.row.id, params.row.name)}
                title="Delete"
              >
                <DeleteIcon fontSize="small" />
              </IconButton>
            </Stack>
          );
        }
        return null;
      }
    },
    {
      field: "metadata_search",
      headerName: "Metadata Search",
      width: 0, 
      valueGetter: (value, row) => {
        if (!row.metadata) return "";
        return Object.entries(row.metadata)
          .filter(([k]) => k !== 'type' && k !== 'mimeType')
          .map(([k, v]) => `${k}:${v}`)
          .join(" ");
      }
    }
  ];

  return (
    <Box className="space-y-4">
      <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 2, mb: 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 }}
          showToolbar
          disableRowSelectionOnClick
          initialState={{
            columns: {
              columnVisibilityModel: {
                metadata_search: false, 
              },
            },
          }}
          sx={{ 
            border: 'none', 
            '& .MuiDataGrid-columnHeaders': { bgcolor: '#f8f9fa' },
            '& .MuiDataGrid-toolbarContainer': { borderBottom: '1px solid #eee' } 
          }}
        />
      </Box>
    </Box>
  );
}