reactShop/src/components/profile/DeliveryMethodSelector.js

import React from 'react';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Radio from '@mui/material/Radio';
import Checkbox from '@mui/material/Checkbox';
import { withI18n } from '../../i18n/withTranslation.js';

const DeliveryMethodSelector = ({ deliveryMethod, onChange, isPickupOnly, cartItems = [], t }) => {
  // Calculate cart value for free shipping threshold
  const cartValue = cartItems.reduce((total, item) => total + item.price * item.quantity, 0);
  const isFreeShipping = cartValue >= 100;
  const remainingForFreeShipping = Math.max(0, 100 - cartValue);

  const deliveryOptions = [
    {
      id: 'DHL',
      name: 'DHL',
      description: isPickupOnly ? (t ? t('delivery.descriptions.notAvailable') : "nicht auswählbar weil ein oder mehrere Artikel nur abgeholt werden können") : 
                   isFreeShipping ? (t ? t('delivery.descriptions.standardFree') : 'Standardversand - KOSTENLOS ab 100€ Warenwert!') : (t ? t('delivery.descriptions.standard') : 'Standardversand'),
      price: isFreeShipping ? (t ? t('delivery.prices.free') : 'kostenlos') : (t ? t('delivery.prices.dhl') : '5,90 €'),
      disabled: isPickupOnly
    },
    {
      id: 'DPD',
      name: 'DPD',
      description: isPickupOnly ? (t ? t('delivery.descriptions.notAvailable') : "nicht auswählbar weil ein oder mehrere Artikel nur abgeholt werden können") : 
                   isFreeShipping ? (t ? t('delivery.descriptions.standardFree') : 'Standardversand - KOSTENLOS ab 100€ Warenwert!') : (t ? t('delivery.descriptions.standard') : 'Standardversand'),
      price: isFreeShipping ? (t ? t('delivery.prices.free') : 'kostenlos') : (t ? t('delivery.prices.dpd') : '4,90 €'),
      disabled: isPickupOnly
    },
    {
      id: 'Sperrgut',
      name: t ? t('delivery.methods.sperrgutName') : 'Sperrgut',
      description: t ? t('delivery.descriptions.bulky') : 'Für große und schwere Artikel',
      price: t ? t('delivery.prices.sperrgut') : '28,99 €',
      disabled: true,
      isCheckbox: true
    },
    {
      id: 'Abholung',
      name: t ? t('delivery.methods.pickup') : 'Abholung in der Filiale',
      description: '',
      price: ''
    }
  ];

  return (
    <>
      <Typography variant="h6" gutterBottom>
        {t ? t('delivery.selector.title') : 'Versandart wählen'}
      </Typography>
      
      <Box sx={{ mb: 3 }}>
        {deliveryOptions.map((option, index) => (
          <Box 
            key={option.id}
            sx={{ 
              display: 'flex', 
              alignItems: 'center', 
              mb: index < deliveryOptions.length - 1 ? 1 : 0, 
              p: 1, 
              border: '1px solid #e0e0e0', 
              borderRadius: 1,
              cursor: option.disabled ? 'not-allowed' : 'pointer',
              backgroundColor: option.disabled ? '#f5f5f5' : 'transparent',
              transition: 'all 0.2s ease-in-out',
              '&:hover': !option.disabled ? {
                backgroundColor: '#f5f5f5',
                borderColor: '#2e7d32',
                boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
              } : {},
              ...(deliveryMethod === option.id && !option.disabled && {
                backgroundColor: '#e8f5e8',
                borderColor: '#2e7d32'
              })
            }}
            onClick={!option.disabled && !option.isCheckbox ? () => onChange({ target: { value: option.id } }) : undefined}
          >
            {option.isCheckbox ? (
              <Checkbox
                id={option.id}
                disabled={option.disabled}
                checked={false}
                sx={{ color: 'rgba(0, 0, 0, 0.54)' }}
              />
            ) : (
              <Radio
                id={option.id}
                name="deliveryMethod"
                value={option.id}
                checked={deliveryMethod === option.id}
                onChange={onChange}
                disabled={option.disabled}
                sx={{ cursor: option.disabled ? 'not-allowed' : 'pointer' }}
              />
            )}
            <Box sx={{ ml: 2, flexGrow: 1 }}>
              <label 
                htmlFor={option.id} 
                style={{ 
                  cursor: option.disabled ? 'not-allowed' : 'pointer',
                  color: option.disabled ? 'rgba(0, 0, 0, 0.54)' : 'inherit'
                }}
              >
                <Typography variant="body1" sx={{ color: 'inherit' }}>
                  {option.name}
                </Typography>
                <Typography 
                  variant="body2" 
                  color="text.secondary"
                  sx={{ color: 'inherit' }}
                >
                  {option.description}
                </Typography>
              </label>
            </Box>
            <Typography 
              variant="body1"
              sx={{ color: option.disabled ? 'rgba(0, 0, 0, 0.54)' : 'inherit' }}
            >
              {option.price}
            </Typography>
          </Box>
        ))}
        
        {/* Free shipping information */}
        {!isFreeShipping && remainingForFreeShipping > 0 && (
          <Box sx={{ 
            mt: 2, 
            p: 2, 
            backgroundColor: '#f0f8ff', 
            borderRadius: 1, 
            border: '1px solid #2196f3' 
          }}>
            <Typography variant="body2" color="primary" sx={{ fontWeight: 'medium' }}>
              {t ? t('delivery.selector.freeShippingInfo') : '💡 Versandkostenfrei ab 100€ Warenwert!'}
            </Typography>
            <Typography variant="body2" color="text.secondary">
              {t ? t('delivery.selector.remainingForFree', { amount: remainingForFreeShipping.toFixed(2).replace('.', ',') }) : `Noch ${remainingForFreeShipping.toFixed(2).replace('.', ',')}€ für kostenlosen Versand hinzufügen.`}
            </Typography>
          </Box>
        )}
        
        {isFreeShipping && (
          <Box sx={{ 
            mt: 2, 
            p: 2, 
            backgroundColor: '#e8f5e8', 
            borderRadius: 1, 
            border: '1px solid #2e7d32' 
          }}>
            <Typography variant="body2" color="success.main" sx={{ fontWeight: 'medium' }}>
              {t ? t('delivery.selector.congratsFreeShipping') : '🎉 Glückwunsch! Sie erhalten kostenlosen Versand!'}
            </Typography>
            <Typography variant="body2" color="text.secondary">
              {t ? t('delivery.selector.cartQualifiesFree', { amount: cartValue.toFixed(2).replace('.', ',') }) : `Ihr Warenkorb von ${cartValue.toFixed(2).replace('.', ',')}€ qualifiziert sich für kostenlosen Versand.`}
            </Typography>
          </Box>
        )}
      </Box>
    </>
  );
};

export default withI18n()(DeliveryMethodSelector);