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 } from '../../../shared-minimal/components/Card';
import { Button } from '../../../shared-minimal/components/Button';
import { useNavigate } from 'react-router-dom';
import { AddDocumentDialog } from '../components/AddDocumentDialog';
import { ExpirationBadge } from '../components/ExpirationBadge';
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 vehiclesMap = useMemo(() => new Map(vehicles?.map(v => [v.id, v]) || []), [vehicles]);

  // Show loading while auth is initializing
  if (authLoading) {
    return (
      <div className="container mx-auto p-4 space-y-4">
        <h1 className="text-2xl font-semibold">Documents</h1>
        <div className="flex items-center justify-center py-12">
          <div className="text-slate-500">Checking authentication...</div>
        </div>
      </div>
    );
  }

  // Show login prompt when not authenticated
  if (!isAuthenticated) {
    return (
      <div className="container mx-auto p-4 space-y-4">
        <h1 className="text-2xl font-semibold">Documents</h1>
        <Card>
          <div className="p-8 text-center">
            <div className="mb-4">
              <svg className="mx-auto w-16 h-16 text-slate-400" 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>
            </div>
            <h3 className="text-lg font-semibold text-slate-800 mb-2">Authentication Required</h3>
            <p className="text-slate-600 mb-6">Please log in to view your documents</p>
            <Button onClick={() => loginWithRedirect()}>
              Login to Continue
            </Button>
          </div>
        </Card>
      </div>
    );
  }

  // Check for authentication error (401)
  const isAuthError = error && (error as any).response?.status === 401;
  if (isAuthError) {
    return (
      <div className="container mx-auto p-4 space-y-4">
        <h1 className="text-2xl font-semibold">Documents</h1>
        <Card>
          <div className="p-8 text-center">
            <div className="mb-4">
              <svg className="mx-auto w-16 h-16 text-orange-400" 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>
            </div>
            <h3 className="text-lg font-semibold text-slate-800 mb-2">Session Expired</h3>
            <p className="text-slate-600 mb-6">Your session has expired. Please log in again to continue.</p>
            <Button onClick={() => loginWithRedirect()}>
              Login Again
            </Button>
          </div>
        </Card>
      </div>
    );
  }

  return (
    <div className="container mx-auto p-4 space-y-4">
      <div className="flex items-center justify-between gap-2 flex-wrap">
        <h1 className="text-2xl font-semibold">Documents</h1>
        <div className="flex gap-2">
          <Button onClick={() => setIsAddOpen(true)} className="min-h-[44px]">Add Document</Button>
        </div>
      </div>
      <AddDocumentDialog open={isAddOpen} onClose={() => setIsAddOpen(false)} />

      {isLoading && (
        <div className="flex items-center justify-center py-12">
          <div className="text-slate-500">Loading documents...</div>
        </div>
      )}

      {error && !isAuthError && (
        <Card>
          <div className="p-8 text-center">
            <div className="mb-4">
              <svg className="mx-auto w-16 h-16 text-red-400" 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>
            </div>
            <h3 className="text-lg font-semibold text-slate-800 mb-2">Error Loading Documents</h3>
            <p className="text-slate-600 mb-6">Failed to load documents. Please try again.</p>
            <Button onClick={() => window.location.reload()}>
              Retry
            </Button>
          </div>
        </Card>
      )}

      {!isLoading && !error && data && data.length === 0 && (
        <Card>
          <div className="p-8 text-center">
            <div className="mb-4">
              <svg className="mx-auto w-16 h-16 text-slate-400" 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>
            </div>
            <h3 className="text-lg font-semibold text-slate-800 mb-2">No Documents Yet</h3>
            <p className="text-slate-600 mb-6">You haven't added any documents yet. Documents will appear here once you create them.</p>
            <Button onClick={() => navigate('/garage/vehicles')}>
              Go to Vehicles
            </Button>
          </div>
        </Card>
      )}

      {!isLoading && !error && data && data.length > 0 && (
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          {data.map((doc) => {
            const vehicle = vehiclesMap.get(doc.vehicleId);
            const vehicleLabel = getVehicleLabel(vehicle);
            return (
              <Card key={doc.id}>
                <div className="p-4 space-y-2">
                  <div className="flex items-center gap-2 flex-wrap">
                    <span className="font-medium">{doc.title}</span>
                    <ExpirationBadge expirationDate={doc.expirationDate} />
                  </div>
                  <div className="text-sm text-slate-500">Type: {doc.documentType}</div>
                  <DocumentCardMetadata doc={doc} variant="card" />
                  <div className="text-sm">
                    <span className="text-slate-500">Vehicle: </span>
                    <button
                      onClick={() => navigate(`/garage/vehicles/${doc.vehicleId}`)}
                      className="text-blue-600 hover:text-blue-800 underline min-h-[44px] inline-flex items-center"
                    >
                      {vehicleLabel}
                    </button>
                  </div>
                  {doc.sharedVehicleIds.length > 0 && (
                    <div className="text-xs text-slate-500">
                      Shared with {doc.sharedVehicleIds.length} other vehicle{doc.sharedVehicleIds.length > 1 ? 's' : ''}
                    </div>
                  )}
                  <div className="flex gap-2 pt-2">
                    <Button onClick={() => navigate(`/garage/documents/${doc.id}`)}>View Details</Button>
                    <Button variant="danger" onClick={() => removeDoc.mutate(doc.id)}>Delete</Button>
                  </div>
                </div>
              </Card>
            );
          })}
        </div>
      )}
    </div>
  );
};

export default DocumentsPage;