motovaultpro/frontend/src/features/documents/pages/DocumentsPage.tsx

import React, { useMemo } from 'react';
import { useAuth0 } from '@auth0/auth0-react';
import { useDocumentsList, useDeleteDocument } from '../hooks/useDocuments';
import {
  Card,
  CardContent,
  Box,
  Typography,
  IconButton,
  Button,
  useTheme,
  useMediaQuery,
} from '@mui/material';
import VisibilityIcon from '@mui/icons-material/Visibility';
import EditIcon from '@mui/icons-material/Edit';
import DeleteIcon from '@mui/icons-material/Delete';
import { useNavigate } from 'react-router-dom';
import { AddDocumentDialog } from '../components/AddDocumentDialog';
import { EditDocumentDialog } from '../components/EditDocumentDialog';
import { ExpirationBadge } from '../components/ExpirationBadge';
import type { DocumentRecord } from '../types/documents.types';
import { DocumentCardMetadata } from '../components/DocumentCardMetadata';
import { useVehicles } from '../../vehicles/hooks/useVehicles';
import { getVehicleLabel } from '../utils/vehicleLabel';

export const DocumentsPage: React.FC = () => {
  const { isAuthenticated, isLoading: authLoading, loginWithRedirect } = useAuth0();
  const { data, isLoading, error } = useDocumentsList();
  const { data: vehicles } = useVehicles();
  const navigate = useNavigate();
  const removeDoc = useDeleteDocument();
  const [isAddOpen, setIsAddOpen] = React.useState(false);
  const [editingDoc, setEditingDoc] = React.useState<DocumentRecord | null>(null);
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));

  const vehiclesMap = useMemo(() => new Map(vehicles?.map(v => [v.id, v]) || []), [vehicles]);

  // Show loading while auth is initializing
  if (authLoading) {
    return (
      <Box sx={{ maxWidth: 'lg', mx: 'auto', p: 2 }}>
        <Typography variant="h5" fontWeight={600} sx={{ mb: 2 }}>Documents</Typography>
        <Box sx={{ display: 'flex', justifyContent: 'center', py: 6 }}>
          <Typography color="text.secondary">Checking authentication...</Typography>
        </Box>
      </Box>
    );
  }

  // Show login prompt when not authenticated
  if (!isAuthenticated) {
    return (
      <Box sx={{ maxWidth: 'lg', mx: 'auto', p: 2 }}>
        <Typography variant="h5" fontWeight={600} sx={{ mb: 2 }}>Documents</Typography>
        <Card variant="outlined">
          <CardContent sx={{ p: 4, textAlign: 'center' }}>
            <Box sx={{ mb: 2 }}>
              <svg style={{ margin: '0 auto', width: 64, height: 64, color: '#94a3b8' }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
              </svg>
            </Box>
            <Typography variant="h6" fontWeight={600} sx={{ mb: 1 }}>Authentication Required</Typography>
            <Typography color="text.secondary" sx={{ mb: 3 }}>Please log in to view your documents</Typography>
            <Button variant="contained" onClick={() => loginWithRedirect()}>
              Login to Continue
            </Button>
          </CardContent>
        </Card>
      </Box>
    );
  }

  // Check for authentication error (401)
  const isAuthError = error && (error as any).response?.status === 401;
  if (isAuthError) {
    return (
      <Box sx={{ maxWidth: 'lg', mx: 'auto', p: 2 }}>
        <Typography variant="h5" fontWeight={600} sx={{ mb: 2 }}>Documents</Typography>
        <Card variant="outlined">
          <CardContent sx={{ p: 4, textAlign: 'center' }}>
            <Box sx={{ mb: 2 }}>
              <svg style={{ margin: '0 auto', width: 64, height: 64, color: '#fb923c' }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
              </svg>
            </Box>
            <Typography variant="h6" fontWeight={600} sx={{ mb: 1 }}>Session Expired</Typography>
            <Typography color="text.secondary" sx={{ mb: 3 }}>Your session has expired. Please log in again to continue.</Typography>
            <Button variant="contained" onClick={() => loginWithRedirect()}>
              Login Again
            </Button>
          </CardContent>
        </Card>
      </Box>
    );
  }

  return (
    <Box sx={{ maxWidth: 'lg', mx: 'auto', p: 2 }}>
      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 2, flexWrap: 'wrap', mb: 2 }}>
        <Typography variant="h5" fontWeight={600}>Documents</Typography>
        <Button variant="contained" onClick={() => setIsAddOpen(true)} sx={{ minHeight: 44 }}>
          Add Document
        </Button>
      </Box>
      <AddDocumentDialog open={isAddOpen} onClose={() => setIsAddOpen(false)} />
      {editingDoc && (
        <EditDocumentDialog
          open={!!editingDoc}
          onClose={() => setEditingDoc(null)}
          document={editingDoc}
        />
      )}

      {isLoading && (
        <Box sx={{ display: 'flex', justifyContent: 'center', py: 6 }}>
          <Typography color="text.secondary">Loading documents...</Typography>
        </Box>
      )}

      {error && !isAuthError && (
        <Card variant="outlined">
          <CardContent sx={{ p: 4, textAlign: 'center' }}>
            <Box sx={{ mb: 2 }}>
              <svg style={{ margin: '0 auto', width: 64, height: 64, color: '#f87171' }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
              </svg>
            </Box>
            <Typography variant="h6" fontWeight={600} sx={{ mb: 1 }}>Error Loading Documents</Typography>
            <Typography color="text.secondary" sx={{ mb: 3 }}>Failed to load documents. Please try again.</Typography>
            <Button variant="contained" onClick={() => window.location.reload()}>
              Retry
            </Button>
          </CardContent>
        </Card>
      )}

      {!isLoading && !error && data && data.length === 0 && (
        <Card variant="outlined">
          <CardContent sx={{ p: 4, textAlign: 'center' }}>
            <Box sx={{ mb: 2 }}>
              <svg style={{ margin: '0 auto', width: 64, height: 64, color: '#94a3b8' }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
              </svg>
            </Box>
            <Typography variant="h6" fontWeight={600} sx={{ mb: 1 }}>No Documents Yet</Typography>
            <Typography color="text.secondary" sx={{ mb: 3 }}>You haven't added any documents yet. Documents will appear here once you create them.</Typography>
            <Button variant="contained" onClick={() => navigate('/garage/vehicles')}>
              Go to Vehicles
            </Button>
          </CardContent>
        </Card>
      )}

      {!isLoading && !error && data && data.length > 0 && (
        <Box
          sx={{
            display: 'grid',
            gap: 2,
            gridTemplateColumns: {
              xs: '1fr',
              md: 'repeat(2, 1fr)',
              lg: 'repeat(3, 1fr)',
            },
          }}
        >
          {data.map((doc) => {
            const vehicle = vehiclesMap.get(doc.vehicleId);
            const vehicleLabel = getVehicleLabel(vehicle);
            return (
              <Card
                key={doc.id}
                variant="outlined"
                sx={{
                  height: '100%',
                  display: 'flex',
                  flexDirection: 'column',
                  '&:hover': {
                    boxShadow: 3,
                  },
                  transition: 'box-shadow 0.2s ease-in-out',
                }}
              >
                <CardContent sx={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 1 }}>
                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>
                    <Typography variant="subtitle1" fontWeight={500}>{doc.title}</Typography>
                    <ExpirationBadge expirationDate={doc.expirationDate} />
                  </Box>
                  <Typography variant="body2" color="text.secondary">Type: {doc.documentType}</Typography>
                  <DocumentCardMetadata doc={doc} variant="card" />
                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
                    <Typography variant="body2" color="text.secondary">Vehicle:</Typography>
                    <Typography
                      component="button"
                      variant="body2"
                      onClick={() => navigate(`/garage/vehicles/${doc.vehicleId}`)}
                      sx={{
                        color: 'primary.main',
                        textDecoration: 'underline',
                        cursor: 'pointer',
                        background: 'none',
                        border: 'none',
                        p: 0,
                        minHeight: 44,
                        display: 'inline-flex',
                        alignItems: 'center',
                        '&:hover': { color: 'primary.dark' },
                      }}
                    >
                      {vehicleLabel}
                    </Typography>
                  </Box>
                  {doc.sharedVehicleIds.length > 0 && (
                    <Typography variant="caption" color="text.secondary">
                      Shared with {doc.sharedVehicleIds.length} other vehicle{doc.sharedVehicleIds.length > 1 ? 's' : ''}
                    </Typography>
                  )}
                </CardContent>
                <Box
                  sx={{
                    display: 'flex',
                    justifyContent: 'flex-end',
                    gap: isMobile ? 1 : 0.5,
                    p: 2,
                    pt: 0,
                  }}
                >
                  <IconButton
                    size={isMobile ? 'medium' : 'small'}
                    onClick={() => navigate(`/garage/documents/${doc.id}`)}
                    sx={{
                      color: 'text.secondary',
                      minWidth: isMobile ? 48 : 'auto',
                      minHeight: isMobile ? 48 : 'auto',
                    }}
                    title="View Details"
                  >
                    <VisibilityIcon fontSize={isMobile ? 'medium' : 'small'} />
                  </IconButton>
                  <IconButton
                    size={isMobile ? 'medium' : 'small'}
                    onClick={() => setEditingDoc(doc)}
                    sx={{
                      color: 'text.secondary',
                      minWidth: isMobile ? 48 : 'auto',
                      minHeight: isMobile ? 48 : 'auto',
                    }}
                    title="Edit"
                  >
                    <EditIcon fontSize={isMobile ? 'medium' : 'small'} />
                  </IconButton>
                  <IconButton
                    size={isMobile ? 'medium' : 'small'}
                    onClick={() => removeDoc.mutate(doc.id)}
                    sx={{
                      color: 'error.main',
                      minWidth: isMobile ? 48 : 'auto',
                      minHeight: isMobile ? 48 : 'auto',
                    }}
                    title="Delete"
                  >
                    <DeleteIcon fontSize={isMobile ? 'medium' : 'small'} />
                  </IconButton>
                </Box>
              </Card>
            );
          })}
        </Box>
      )}
    </Box>
  );
};

export default DocumentsPage;