import React from 'react';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import { alpha } from '@mui/material/styles';
import { Trans } from '@lingui/macro';
import { MobileDevice } from '../types';
import MobileDeviceCard from './MobileDeviceCard';

interface AppGroupColumnProps {
  title: React.ReactNode;
  subtitle?: React.ReactNode;
  accent: string;
  icon: React.ReactNode;
  devices: MobileDevice[];
  currentVersion: string;
  onDeviceClick: (device: MobileDevice) => void;
  onToggleActive: (deviceId: string, isActive: boolean) => void;
  cardSize?: { xs?: number; sm?: number; md?: number; lg?: number; xl?: number };
}

const DEFAULT_CARD_SIZE = { xs: 12, sm: 6, md: 4, lg: 6, xl: 4 };

const AppGroupColumn: React.FC<AppGroupColumnProps> = ({
  title,
  subtitle,
  accent,
  icon,
  devices,
  currentVersion,
  onDeviceClick,
  onToggleActive,
  cardSize = DEFAULT_CARD_SIZE,
}) => {
  return (
    <Paper
      elevation={0}
      sx={{
        height: '100%',
        borderRadius: '16px',
        border: '1px solid',
        borderColor: alpha(accent, 0.25),
        overflow: 'hidden',
        backgroundColor: '#fff',
      }}
    >
      {/* Header band */}
      <Box
        sx={{
          display: 'flex',
          alignItems: 'center',
          gap: 1.5,
          px: { xs: 2, sm: 2.5 },
          py: 1.75,
          background: `linear-gradient(90deg, ${alpha(accent, 0.14)} 0%, ${alpha(accent, 0.04)} 100%)`,
          borderBottom: '1px solid',
          borderColor: alpha(accent, 0.18),
          borderLeft: `4px solid ${accent}`,
        }}
      >
        <Box
          sx={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            width: 40,
            height: 40,
            borderRadius: '10px',
            flexShrink: 0,
            backgroundColor: accent,
            color: '#fff',
            boxShadow: `0 4px 10px ${alpha(accent, 0.4)}`,
            '& svg': { fontSize: 22 },
          }}
        >
          {icon}
        </Box>

        <Box sx={{ minWidth: 0, flexGrow: 1 }}>
          <Typography
            variant="subtitle1"
            sx={{ fontWeight: 700, lineHeight: 1.2, color: '#1f2937' }}
            noWrap
          >
            {title}
          </Typography>
          {subtitle && (
            <Typography
              variant="caption"
              sx={{ color: 'text.secondary', display: 'block', lineHeight: 1.3 }}
            >
              {subtitle}
            </Typography>
          )}
        </Box>

        <Box
          sx={{
            flexShrink: 0,
            minWidth: 32,
            height: 28,
            px: 1.25,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            borderRadius: '14px',
            backgroundColor: accent,
            color: '#fff',
            fontWeight: 700,
            fontSize: '0.85rem',
          }}
        >
          {devices.length}
        </Box>
      </Box>

      {/* Body */}
      <Box sx={{ p: { xs: 1.5, sm: 2 } }}>
        {devices.length === 0 ? (
          <Box
            sx={{
              py: 6,
              textAlign: 'center',
              border: '1px dashed',
              borderColor: 'divider',
              borderRadius: '12px',
              color: 'text.secondary',
            }}
          >
            <Typography variant="body2">
              <Trans>Keine Geräte</Trans>
            </Typography>
          </Box>
        ) : (
          <Grid container spacing={2}>
            {devices.map((device) => (
              <Grid size={cardSize} key={device.mcl_id} className="mobile-device-card">
                <MobileDeviceCard
                  device={device}
                  currentVersion={currentVersion}
                  onClick={() => onDeviceClick(device)}
                  onToggleActive={onToggleActive}
                />
              </Grid>
            ))}
          </Grid>
        )}
      </Box>
    </Paper>
  );
};

export default AppGroupColumn;