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

import React, { useRef, useMemo, useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { useAuth0 } from '@auth0/auth0-react';
import { isAxiosError } from 'axios';
import { Card } from '../../../shared-minimal/components/Card';
import { Button } from '../../../shared-minimal/components/Button';
import { useDocument } from '../hooks/useDocuments';
import { useUploadWithProgress } from '../hooks/useUploadWithProgress';
import { documentsApi } from '../api/documents.api';
import { DocumentPreview } from '../components/DocumentPreview';
import { EditDocumentDialog } from '../components/EditDocumentDialog';
import { ExpirationBadge } from '../components/ExpirationBadge';
import { DocumentCardMetadata } from '../components/DocumentCardMetadata';
import { useVehicle, useVehicles } from '../../vehicles/hooks/useVehicles';
import { getVehicleLabel } from '../utils/vehicleLabel';

export const DocumentDetailPage: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const { isAuthenticated, isLoading: authLoading, loginWithRedirect } = useAuth0();
  const { data: doc, isLoading, error, refetch } = useDocument(id);
  const { data: vehicle } = useVehicle(doc?.vehicleId || '');
  const { data: vehicles } = useVehicles();
  const inputRef = useRef<HTMLInputElement | null>(null);
  const upload = useUploadWithProgress(id!);
  const [isEditOpen, setIsEditOpen] = useState(false);

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

  // Check if document has displayable metadata
  const hasDisplayableMetadata = useMemo(() => {
    if (!doc) return false;
    const details = doc.details || {};

    if (doc.documentType === 'insurance') {
      return !!(doc.expirationDate || details.policyNumber || details.insuranceCompany ||
        doc.issuedDate || details.bodilyInjuryPerson || details.bodilyInjuryIncident ||
        details.propertyDamage || details.premium);
    }
    if (doc.documentType === 'registration') {
      return !!(doc.expirationDate || details.licensePlate || details.cost);
    }
    if (doc.documentType === 'manual') {
      return !!(doc.issuedDate || doc.notes);
    }
    return false;
  }, [doc]);

  const handleDownload = async () => {
    if (!id) return;
    const blob = await documentsApi.download(id);
    const url = URL.createObjectURL(blob);
    window.open(url, '_blank');
  };

  const handleUpload = () => {
    if (!inputRef.current) return;
    inputRef.current.onchange = () => {
      const file = inputRef.current?.files?.[0];
      if (file && id) {
        const allowed = new Set(['application/pdf', 'image/jpeg', 'image/png']);
        if (!file.type || !allowed.has(file.type)) {
          alert('Unsupported file type. Allowed: PDF, JPG/JPEG, PNG.');
          return;
        }
        upload.mutate(file);
      }
    };
    inputRef.current.click();
  };

  // Show loading while auth is initializing
  if (authLoading) {
    return (
      <div className="container mx-auto p-4">
        <div className="text-slate-500">Checking authentication...</div>
      </div>
    );
  }

  // Show login prompt when not authenticated
  if (!isAuthenticated) {
    return (
      <div className="container mx-auto p-4">
        <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 this document</p>
            <div className="space-x-3">
              <Button onClick={() => loginWithRedirect()}>Login to Continue</Button>
              <Button variant="secondary" onClick={() => navigate('/garage/documents')}>Back to Documents</Button>
            </div>
          </div>
        </Card>
      </div>
    );
  }

  // Check for authentication error (401)
  const isAuthError = error && isAxiosError(error) && error.response?.status === 401;
  if (isAuthError) {
    return (
      <div className="container mx-auto p-4">
        <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>
            <div className="space-x-3">
              <Button onClick={() => loginWithRedirect()}>Login Again</Button>
              <Button variant="secondary" onClick={() => navigate('/garage/documents')}>Back to Documents</Button>
            </div>
          </div>
        </Card>
      </div>
    );
  }

  if (isLoading) return <div className="container mx-auto p-4">Loading document...</div>;

  if (error && !isAuthError) {
    return (
      <div className="container mx-auto p-4">
        <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">Document Not Found</h3>
            <p className="text-slate-600 mb-6">The document you're looking for could not be found.</p>
            <div className="space-x-3">
              <Button onClick={() => window.location.reload()}>Retry</Button>
              <Button variant="secondary" onClick={() => navigate('/garage/documents')}>Back to Documents</Button>
            </div>
          </div>
        </Card>
      </div>
    );
  }

  if (!doc) {
    return (
      <div className="container mx-auto p-4">
        <Card>
          <div className="p-8 text-center">
            <h3 className="text-lg font-semibold text-slate-800 mb-2">Document Not Found</h3>
            <p className="text-slate-600 mb-6">The document you're looking for does not exist.</p>
            <Button onClick={() => navigate('/garage/documents')}>Back to Documents</Button>
          </div>
        </Card>
      </div>
    );
  }

  return (
    <div className="container mx-auto p-4">
      <input ref={inputRef} type="file" accept="image/jpeg,image/png,application/pdf" capture="environment" className="hidden" />

      {/* Mobile Layout: Stacked */}
      <div className="md:hidden space-y-4">
        {/* Header Card - Mobile */}
        <Card>
          <div className="p-4 space-y-3">
            <div className="flex items-center gap-2 flex-wrap">
              <h2 className="text-xl font-semibold">{doc.title}</h2>
              <ExpirationBadge expirationDate={doc.expirationDate} />
            </div>
            <div className="flex items-center gap-2 text-sm text-slate-500 dark:text-titanio">
              <span className="capitalize">{doc.documentType}</span>
              <span>|</span>
              <button
                onClick={() => navigate(`/garage/vehicles/${doc.vehicleId}`)}
                className="text-blue-600 hover:text-blue-800 underline"
              >
                {getVehicleLabel(vehicle)}
              </button>
            </div>
            {hasDisplayableMetadata && <DocumentCardMetadata doc={doc} variant="mobile" />}
          </div>
        </Card>

        {/* Preview Card - Mobile */}
        <Card>
          <div className="p-4">
            <DocumentPreview doc={doc} />
          </div>
        </Card>

        {/* Actions Card - Mobile */}
        <Card>
          <div className="p-4 space-y-3">
            <div className="flex flex-wrap gap-2">
              <Button onClick={handleDownload} className="min-h-[44px]">Download</Button>
              <Button onClick={handleUpload} className="min-h-[44px]">Upload/Replace</Button>
              <Button onClick={() => setIsEditOpen(true)} variant="secondary" className="min-h-[44px]">Edit</Button>
            </div>
            {upload.isPending && (
              <div className="text-sm text-slate-600 dark:text-titanio">Uploading... {upload.progress}%</div>
            )}
            {upload.isError && (
              <div className="text-sm text-red-600 dark:text-red-400">
                {((upload.error as any)?.response?.status === 415)
                  ? 'Unsupported file type. Allowed: PDF, JPG/JPEG, PNG.'
                  : 'Failed to upload file. Please try again.'}
              </div>
            )}
          </div>
        </Card>
      </div>

      {/* Desktop Layout: Side by Side */}
      <div className="hidden md:flex md:gap-6">
        {/* Left Panel: Document Preview (60%) */}
        <div className="flex-[3]">
          <Card className="h-full">
            <div className="p-4">
              <DocumentPreview doc={doc} />
            </div>
          </Card>
        </div>

        {/* Right Panel: Metadata (40%) */}
        <div className="flex-[2]">
          <Card>
            <div className="p-4 space-y-4">
              {/* Title and Badge */}
              <div>
                <div className="flex items-center gap-2 flex-wrap">
                  <h2 className="text-xl font-semibold">{doc.title}</h2>
                  <ExpirationBadge expirationDate={doc.expirationDate} />
                </div>
              </div>

              {/* Document Type */}
              <div>
                <div className="text-sm text-slate-500 dark:text-titanio">Type</div>
                <div className="font-medium capitalize">{doc.documentType}</div>
              </div>

              {/* Vehicle */}
              <div>
                <div className="text-sm text-slate-500 dark:text-titanio">Vehicle</div>
                <button
                  onClick={() => navigate(`/garage/vehicles/${doc.vehicleId}`)}
                  className="text-blue-600 hover:text-blue-800 underline min-h-[44px] inline-flex items-center"
                >
                  {getVehicleLabel(vehicle)}
                </button>
              </div>

              {/* Shared Vehicles */}
              {doc.sharedVehicleIds.length > 0 && (
                <div>
                  <div className="text-sm text-slate-500 dark:text-titanio mb-1">Shared with</div>
                  <ul className="space-y-1">
                    {doc.sharedVehicleIds.map((vehicleId) => {
                      const sharedVehicle = vehiclesMap.get(vehicleId);
                      return (
                        <li key={vehicleId}>
                          <button
                            onClick={() => navigate(`/garage/vehicles/${vehicleId}`)}
                            className="text-blue-600 hover:text-blue-800 underline min-h-[44px] inline-flex items-center text-sm"
                          >
                            {getVehicleLabel(sharedVehicle)}
                          </button>
                        </li>
                      );
                    })}
                  </ul>
                </div>
              )}

              {/* Type-specific Metadata - only show if there's data */}
              {hasDisplayableMetadata && (
                <div>
                  <div className="text-sm text-slate-500 dark:text-titanio mb-2">Details</div>
                  <DocumentCardMetadata doc={doc} variant="detail" />
                </div>
              )}

              {/* Actions */}
              <div className="pt-2 border-t border-slate-200 dark:border-silverstone">
                <div className="flex flex-wrap gap-2">
                  <Button onClick={handleDownload} className="min-h-[44px]">Download</Button>
                  <Button onClick={handleUpload} className="min-h-[44px]">Upload/Replace</Button>
                  <Button onClick={() => setIsEditOpen(true)} variant="secondary" className="min-h-[44px]">Edit</Button>
                </div>
                {upload.isPending && (
                  <div className="text-sm text-slate-600 dark:text-titanio mt-2">Uploading... {upload.progress}%</div>
                )}
                {upload.isError && (
                  <div className="text-sm text-red-600 dark:text-red-400 mt-2">
                    {((upload.error as any)?.response?.status === 415)
                      ? 'Unsupported file type. Allowed: PDF, JPG/JPEG, PNG.'
                      : 'Failed to upload file. Please try again.'}
                  </div>
                )}
              </div>
            </div>
          </Card>
        </div>
      </div>

      {doc && (
        <EditDocumentDialog
          open={isEditOpen}
          onClose={() => {
            setIsEditOpen(false);
            refetch();
          }}
          document={doc}
        />
      )}
    </div>
  );
};

export default DocumentDetailPage;