/**
 * @ai-summary Desktop dashboard page wrapping the DashboardScreen component
 */

import React from 'react';
import { useNavigate } from 'react-router-dom';
import { Box, Typography } from '@mui/material';
import { DashboardScreen } from '../components/DashboardScreen';
import { MobileScreen } from '../../../core/store';
import { Vehicle } from '../../vehicles/types/vehicles.types';

export const DashboardPage: React.FC = () => {
  const navigate = useNavigate();

  // Map mobile screen names to desktop routes
  const handleNavigate = (screen: MobileScreen) => {
    switch (screen) {
      case 'Vehicles':
        navigate('/garage/vehicles');
        break;
      case 'Log Fuel':
        navigate('/garage/fuel-logs');
        break;
      case 'Stations':
        navigate('/garage/stations');
        break;
      case 'Documents':
        navigate('/garage/documents');
        break;
      case 'Settings':
        navigate('/garage/settings');
        break;
      default:
        navigate('/garage/dashboard');
    }
  };

  const handleVehicleClick = (vehicle: Vehicle) => {
    navigate(`/garage/vehicles/${vehicle.id}`);
  };

  const handleViewMaintenance = () => {
    navigate('/garage/maintenance');
  };

  const handleAddVehicle = () => {
    navigate('/garage/vehicles', { state: { showAddForm: true } });
  };

  return (
    <Box sx={{ py: 2 }}>
      <Typography variant="h4" sx={{ fontWeight: 700, color: 'text.primary', mb: 4 }}>
        Dashboard
      </Typography>
      <DashboardScreen
        onNavigate={handleNavigate}
        onVehicleClick={handleVehicleClick}
        onViewMaintenance={handleViewMaintenance}
        onAddVehicle={handleAddVehicle}
      />
    </Box>
  );
};
