/**
 * @ai-summary Quick action buttons for common tasks
 */

import React from 'react';
import { Box, SvgIconProps } from '@mui/material';
import DirectionsCarRoundedIcon from '@mui/icons-material/DirectionsCarRounded';
import LocalGasStationRoundedIcon from '@mui/icons-material/LocalGasStationRounded';
import BuildRoundedIcon from '@mui/icons-material/BuildRounded';
import FormatListBulletedRoundedIcon from '@mui/icons-material/FormatListBulletedRounded';
import { GlassCard } from '../../../shared-minimal/components/mobile/GlassCard';

interface QuickAction {
  id: string;
  title: string;
  description: string;
  icon: React.ComponentType<SvgIconProps>;
  onClick: () => void;
}

interface QuickActionsProps {
  onAddVehicle: () => void;
  onLogFuel: () => void;
  onViewMaintenance: () => void;
  onViewVehicles: () => void;
}

export const QuickActions: React.FC<QuickActionsProps> = ({
  onAddVehicle,
  onLogFuel,
  onViewMaintenance,
  onViewVehicles,
}) => {
  const actions: QuickAction[] = [
    {
      id: 'add-vehicle',
      title: 'Add Vehicle',
      description: 'Register a new vehicle',
      icon: DirectionsCarRoundedIcon,
      onClick: onAddVehicle,
    },
    {
      id: 'log-fuel',
      title: 'Log Fuel',
      description: 'Record a fuel purchase',
      icon: LocalGasStationRoundedIcon,
      onClick: onLogFuel,
    },
    {
      id: 'view-maintenance',
      title: 'Maintenance',
      description: 'View maintenance records',
      icon: BuildRoundedIcon,
      onClick: onViewMaintenance,
    },
    {
      id: 'view-vehicles',
      title: 'My Vehicles',
      description: 'View all vehicles',
      icon: FormatListBulletedRoundedIcon,
      onClick: onViewVehicles,
    },
  ];

  return (
    <GlassCard padding="md">
      <div className="mb-4">
        <h3 className="text-lg font-semibold text-slate-800 dark:text-avus">
          Quick Actions
        </h3>
        <p className="text-sm text-slate-500 dark:text-titanio">
          Common tasks and navigation
        </p>
      </div>

      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
        {actions.map((action) => {
          const IconComponent = action.icon;
          return (
            <Box
              key={action.id}
              component="button"
              onClick={action.onClick}
              sx={{
                p: 2,
                borderRadius: 1.5,
                bgcolor: 'action.hover',
                border: '1px solid transparent',
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'flex-start',
                textAlign: 'left',
                minHeight: { xs: 100, sm: 120 },
                transition: 'all 0.2s',
                cursor: 'pointer',
                '&:hover': {
                  bgcolor: 'action.selected',
                  borderColor: 'divider',
                },
                '&:focus': {
                  outline: 'none',
                  borderColor: 'primary.main',
                },
              }}
            >
              <Box
                sx={{
                  color: 'primary.main',
                  mb: 1.5,
                }}
              >
                <IconComponent sx={{ fontSize: 28 }} />
              </Box>
              <Box sx={{ flex: 1 }}>
                <Box
                  component="span"
                  sx={{
                    display: 'block',
                    fontWeight: 600,
                    fontSize: '0.875rem',
                    color: 'text.primary',
                    mb: 0.5,
                  }}
                >
                  {action.title}
                </Box>
                <Box
                  component="span"
                  sx={{
                    display: { xs: 'none', sm: 'block' },
                    fontSize: '0.75rem',
                    color: 'text.secondary',
                  }}
                >
                  {action.description}
                </Box>
              </Box>
            </Box>
          );
        })}
      </div>
    </GlassCard>
  );
};

export const QuickActionsSkeleton: React.FC = () => {
  return (
    <GlassCard padding="md">
      <div className="mb-4">
        <div className="h-6 bg-slate-100 dark:bg-slate-800 rounded animate-pulse w-32 mb-2" />
        <div className="h-4 bg-slate-100 dark:bg-slate-800 rounded animate-pulse w-48" />
      </div>
      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
        {[1, 2, 3, 4].map((i) => (
          <div
            key={i}
            className="p-4 rounded-xl bg-slate-50 dark:bg-slate-800 min-h-[100px] sm:min-h-[120px]"
          >
            <div className="w-7 h-7 bg-slate-100 dark:bg-slate-700 rounded animate-pulse mb-3" />
            <div className="h-4 bg-slate-100 dark:bg-slate-700 rounded animate-pulse w-20 mb-2" />
            <div className="h-3 bg-slate-100 dark:bg-slate-700 rounded animate-pulse w-full hidden sm:block" />
          </div>
        ))}
      </div>
    </GlassCard>
  );
};