import React from 'react';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';
import Chip from '@mui/material/Chip';
import Stack from '@mui/material/Stack';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Divider from '@mui/material/Divider';
import AddIcon from '@mui/icons-material/Add';
import { Trans, t } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import {
  NumberInput,
  SettingRow,
  CheckboxRow,
  SectionHeader,
} from './SettingsFormComponents';
import { CompanySettings } from '../../hooks/useCompanySettings';
import TimesheetSchedulesSection from './TimesheetSchedulesSection';

interface NotificationsTabProps {
  settings: CompanySettings;
  getUnit: (type: 'hours' | 'days' | 'minutes') => string;
  onChange: (field: keyof CompanySettings, value: any) => void;
}

const NotificationsTab: React.FC<NotificationsTabProps> = ({ settings, getUnit, onChange }) => {
  const { i18n } = useLingui();

  const handleAddEmail = (email: string) => {
    const currentEmails = settings.zcs_time_report_emails || [];
    if (email && email.includes('@') && !currentEmails.includes(email)) {
      onChange('zcs_time_report_emails', [...currentEmails, email]);
    }
  };

  const handleRemoveEmail = (index: number) => {
    const newEmails = [...(settings.zcs_time_report_emails || [])];
    newEmails.splice(index, 1);
    onChange('zcs_time_report_emails', newEmails);
  };

  return (
    <Box>
      <SectionHeader title={i18n._(t`Push-Benachrichtigungen`)} />

      <CheckboxRow
        label={i18n._(t`Bei Schichtzuweisung benachrichtigen`)}
        checked={settings.zcs_notify_on_assignment}
        onChange={(v) => onChange('zcs_notify_on_assignment', v)}
      />

      <CheckboxRow
        label={i18n._(t`Bei Schichtänderung benachrichtigen`)}
        checked={settings.zcs_notify_on_change}
        onChange={(v) => onChange('zcs_notify_on_change', v)}
      />

      <SettingRow label={i18n._(t`Erinnerung vor Schichtbeginn`)}>
        <NumberInput
          value={settings.zcs_reminder_hours_before}
          onChange={(v) => onChange('zcs_reminder_hours_before', v)}
          unit={getUnit('hours')}
          step={1}
          min={0}
          max={168}
        />
      </SettingRow>

      <Divider sx={{ my: 2 }} />

      <SectionHeader title={i18n._(t`Monatliche Stempelkarten-E-Mail`)} />

      <CheckboxRow
        label={i18n._(t`Automatisch versenden`)}
        checked={settings.zcs_time_report_enabled || false}
        onChange={(v) => onChange('zcs_time_report_enabled', v)}
      />

      {settings.zcs_time_report_enabled && (
        <>
          <SettingRow label={i18n._(t`Versandtag`)}>
            <FormControl size="small" sx={{ minWidth: 180 }}>
              <Select
                value={settings.zcs_time_report_send_day_type || 'last_day'}
                onChange={(e) => onChange('zcs_time_report_send_day_type', e.target.value)}
              >
                <MenuItem value="last_day">{i18n._(t`Letzter Tag`)}</MenuItem>
                <MenuItem value="last_business_day">{i18n._(t`Letzter Werktag`)}</MenuItem>
                <MenuItem value="specific_day">{i18n._(t`Bestimmter Tag`)}</MenuItem>
              </Select>
            </FormControl>
          </SettingRow>

          {settings.zcs_time_report_send_day_type === 'specific_day' && (
            <SettingRow
              label={i18n._(t`Tag des Monats`)}
              helperText={i18n._(t`Falls der Tag nicht existiert, wird der letzte Tag verwendet.`)}
            >
              <NumberInput
                value={settings.zcs_time_report_send_day || 1}
                onChange={(v) => onChange('zcs_time_report_send_day', v)}
                step={1}
                min={1}
                max={31}
                width={80}
              />
            </SettingRow>
          )}

          <CheckboxRow
            label={i18n._(t`An Mitarbeiter senden`)}
            helperText={i18n._(t`Jeder Mitarbeiter mit E-Mail erhält seine Stempelkarte`)}
            checked={settings.zcs_time_report_send_to_users ?? true}
            onChange={(v) => onChange('zcs_time_report_send_to_users', v)}
          />

          {/* Email list */}
          <Box sx={{ mt: 2 }}>
            <Typography variant="body2" fontWeight="500" color="text.secondary" sx={{ mb: 1 }}>
              <Trans>E-Mail-Adressen für Sammelversand</Trans>
            </Typography>
            <Stack direction="row" spacing={1} flexWrap="wrap" useFlexGap sx={{ mb: 1.5 }}>
              {(settings.zcs_time_report_emails || []).map((email, index) => (
                <Chip
                  key={index}
                  label={email}
                  size="small"
                  onDelete={() => handleRemoveEmail(index)}
                />
              ))}
            </Stack>
            <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
              <TextField
                size="small"
                type="email"
                placeholder={i18n._(t`email@beispiel.de`)}
                aria-label={i18n._(t`E-Mail-Adresse hinzufügen`)}
                onKeyDown={(e) => {
                  if (e.key === 'Enter') {
                    e.preventDefault();
                    const input = e.target as HTMLInputElement;
                    const email = input.value.trim();
                    if (email) {
                      handleAddEmail(email);
                      input.value = '';
                    }
                  }
                }}
                sx={{ width: 250 }}
              />
              <Button
                variant="outlined"
                size="small"
                startIcon={<AddIcon />}
                onClick={(e) => {
                  const container = (e.target as HTMLElement).closest('.MuiBox-root');
                  const input = container?.querySelector('input') as HTMLInputElement;
                  if (input) {
                    const email = input.value.trim();
                    if (email) {
                      handleAddEmail(email);
                      input.value = '';
                    }
                  }
                }}
              >
                <Trans>Hinzufügen</Trans>
              </Button>
            </Box>
          </Box>
        </>
      )}

      <Divider sx={{ my: 2 }} />
      <TimesheetSchedulesSection />
    </Box>
  );
};

export default NotificationsTab;