import React, { useEffect, useState } from 'react';
import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent';
import DialogActions from '@mui/material/DialogActions';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import CircularProgress from '@mui/material/CircularProgress';
import { Trans, t } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import type { Becken } from '../../types/class';

interface BeckenModalProps {
  open: boolean;
  onClose: () => void;
  initial: Becken | null;
  onSave: (payload: Partial<Becken> & { zb_name: string }) => Promise<Becken | null>;
}

interface FormState {
  zb_name: string;
  zb_short_code: string;
  zb_color: string;
  zb_gps_lat: string;
  zb_gps_lng: string;
  zb_active: boolean;
}

const DEFAULT_STATE: FormState = {
  zb_name: '',
  zb_short_code: '',
  zb_color: '#0099ff',
  zb_gps_lat: '',
  zb_gps_lng: '',
  zb_active: true,
};

const BeckenModal: React.FC<BeckenModalProps> = ({ open, onClose, initial, onSave }) => {
  const { i18n } = useLingui();
  const [form, setForm] = useState<FormState>(DEFAULT_STATE);
  const [errors, setErrors] = useState<Record<string, string>>({});
  const [saving, setSaving] = useState<boolean>(false);

  useEffect(() => {
    if (!open) return;
    if (initial) {
      setForm({
        zb_name: initial.zb_name ?? '',
        zb_short_code: initial.zb_short_code ?? '',
        zb_color: initial.zb_color ?? '#0099ff',
        zb_gps_lat: initial.zb_gps_lat !== null && initial.zb_gps_lat !== undefined ? String(initial.zb_gps_lat) : '',
        zb_gps_lng: initial.zb_gps_lng !== null && initial.zb_gps_lng !== undefined ? String(initial.zb_gps_lng) : '',
        zb_active: initial.zb_active ?? true,
      });
    } else {
      setForm(DEFAULT_STATE);
    }
    setErrors({});
  }, [open, initial]);

  const handleChange = <K extends keyof FormState>(field: K, value: FormState[K]): void => {
    setForm((prev) => ({ ...prev, [field]: value }));
  };

  const validate = (): boolean => {
    const next: Record<string, string> = {};
    const name: string = form.zb_name.trim();
    if (!name) {
      next.zb_name = i18n._(t`Name ist erforderlich`);
    } else if (name.length > 100) {
      next.zb_name = i18n._(t`Maximal 100 Zeichen`);
    }
    const short: string = form.zb_short_code.trim();
    if (short.length > 16) {
      next.zb_short_code = i18n._(t`Maximal 16 Zeichen`);
    }
    const color: string = form.zb_color.trim();
    if (color && !/^#[0-9A-Fa-f]{6}$/.test(color)) {
      next.zb_color = i18n._(t`Format: #RRGGBB`);
    }
    if (form.zb_gps_lat.trim() && isNaN(parseFloat(form.zb_gps_lat))) {
      next.zb_gps_lat = i18n._(t`Ungültige Zahl`);
    }
    if (form.zb_gps_lng.trim() && isNaN(parseFloat(form.zb_gps_lng))) {
      next.zb_gps_lng = i18n._(t`Ungültige Zahl`);
    }
    setErrors(next);
    return Object.keys(next).length === 0;
  };

  const handleSubmit = async (): Promise<void> => {
    if (!validate()) return;
    setSaving(true);
    try {
      const payload: Partial<Becken> & { zb_name: string } = {
        zb_id: initial?.zb_id,
        zb_name: form.zb_name.trim(),
        zb_short_code: form.zb_short_code.trim() ? form.zb_short_code.trim().toUpperCase() : null,
        zb_color: form.zb_color.trim() || null,
        zb_gps_lat: form.zb_gps_lat.trim() ? parseFloat(form.zb_gps_lat) : null,
        zb_gps_lng: form.zb_gps_lng.trim() ? parseFloat(form.zb_gps_lng) : null,
        zb_active: form.zb_active,
      };
      const result: Becken | null = await onSave(payload);
      if (result) {
        onClose();
      }
    } finally {
      setSaving(false);
    }
  };

  return (
    <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
      <DialogTitle>
        {initial ? <Trans>Becken bearbeiten</Trans> : <Trans>Neues Becken</Trans>}
      </DialogTitle>
      <DialogContent>
        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, mt: 1 }}>
          <TextField
            label={i18n._(t`Name`)}
            value={form.zb_name}
            onChange={(e) => handleChange('zb_name', e.target.value)}
            error={!!errors.zb_name}
            helperText={errors.zb_name}
            inputProps={{ maxLength: 100 }}
            required
            fullWidth
          />
          <TextField
            label={i18n._(t`Kurzcode`)}
            value={form.zb_short_code}
            onChange={(e) => handleChange('zb_short_code', e.target.value)}
            error={!!errors.zb_short_code}
            helperText={errors.zb_short_code}
            inputProps={{ maxLength: 16 }}
            fullWidth
          />
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
            <TextField
              label={i18n._(t`Farbe`)}
              type="color"
              value={form.zb_color}
              onChange={(e) => handleChange('zb_color', e.target.value)}
              error={!!errors.zb_color}
              helperText={errors.zb_color}
              sx={{ width: 120 }}
            />
            <TextField
              label={i18n._(t`Hex`)}
              value={form.zb_color}
              onChange={(e) => handleChange('zb_color', e.target.value)}
              error={!!errors.zb_color}
              inputProps={{ maxLength: 7 }}
              sx={{ flex: 1 }}
            />
          </Box>
          <Box sx={{ display: 'flex', gap: 2 }}>
            <TextField
              label={i18n._(t`GPS Breitengrad`)}
              value={form.zb_gps_lat}
              onChange={(e) => handleChange('zb_gps_lat', e.target.value)}
              error={!!errors.zb_gps_lat}
              helperText={errors.zb_gps_lat}
              fullWidth
            />
            <TextField
              label={i18n._(t`GPS Längengrad`)}
              value={form.zb_gps_lng}
              onChange={(e) => handleChange('zb_gps_lng', e.target.value)}
              error={!!errors.zb_gps_lng}
              helperText={errors.zb_gps_lng}
              fullWidth
            />
          </Box>
          <FormControlLabel
            control={
              <Checkbox
                checked={form.zb_active}
                onChange={(e) => handleChange('zb_active', e.target.checked)}
              />
            }
            label={i18n._(t`Aktiv`)}
          />
        </Box>
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose} disabled={saving}>
          <Trans>Abbrechen</Trans>
        </Button>
        <Button
          onClick={handleSubmit}
          variant="contained"
          color="primary"
          disabled={saving}
          startIcon={saving ? <CircularProgress size={16} /> : undefined}
        >
          <Trans>Speichern</Trans>
        </Button>
      </DialogActions>
    </Dialog>
  );
};

export default BeckenModal;