// resources/assets/ts/ContactsPage/components/NotizenDateiTab/NotizenDialog.tsx

import React, { useState, useEffect } 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 Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import CircularProgress from '@mui/material/CircularProgress';
import { Trans, msg } from '@lingui/macro';
import { useLingui } from '@lingui/react';

interface NotizenDialogProps {
  open: boolean;
  onClose: () => void;
  onSuccess: () => void;
  contactId: number;
  csrfToken: string;
  currentUser: string;
  editingNotiz?: {
    notiz_id: number;
    beschreibung: string;
    langtext: string;
  } | null;
}

const NotizenDialog: React.FC<NotizenDialogProps> = ({
  open,
  onClose,
  onSuccess,
  contactId,
  csrfToken,
  currentUser,
  editingNotiz = null,
}) => {
  const { i18n } = useLingui();
  const [titel, setTitel] = useState(editingNotiz?.beschreibung || '');
  const [details, setDetails] = useState(editingNotiz?.langtext || '');
  const [saving, setSaving] = useState(false);

  //useEffect to sync state when editingNotiz or dialog open state changes
  React.useEffect(() => {
    if (open) {
      setTitel(editingNotiz?.beschreibung || '');
      setDetails(editingNotiz?.langtext || '');
    }
  }, [open, editingNotiz]);

  const handleSubmit = async () => {
    if (!titel.trim()) {
      alert(i18n._(msg`Please enter a title.`));
      return;
    }

    setSaving(true);

    const formData = new FormData();
    if (editingNotiz) {
      formData.append('Ntzid', editingNotiz.notiz_id.toString());
    } else {
      formData.append('Ntzid', '0');
    }
    formData.append('id', contactId.toString());
    formData.append('nz_mitarbeiter', currentUser);
    formData.append('nz_bemerkung', titel);
    formData.append('langtext', details);
    formData.append('nz_datum', ''); // Auto-set on backend
    formData.append('_token', csrfToken);

    try {
      const response = await fetch('/contacts/saveNtz', {
        method: 'POST',
        body: formData,
        headers: {
          'Accept': 'application/json',
        },
      });

      if (!response.ok) throw new Error(i18n._(msg`Error saving`));

      await response.json();
      onSuccess();
    } catch (error) {
      console.error('Error saving notiz:', error);
      alert(i18n._(msg`Error saving the note`));
    } finally {
      setSaving(false);
    }
  };

  const handleClose = () => {
    if (!saving) {
      setTitel('');
      setDetails('');
      onClose();
    }
  };

  return (
    <Dialog open={open} onClose={handleClose} maxWidth="md" fullWidth>
      <DialogTitle>
        {editingNotiz ? i18n._(msg`Edit note`) : i18n._(msg`Create new note`)}
      </DialogTitle>
      <DialogContent>
        <Box sx={{ pt: 2 }}>
          <TextField
            fullWidth
            label={i18n._(msg`Title`)}
            value={titel}
            onChange={(e) => setTitel(e.target.value.slice(0, 200))}
            variant="outlined"
            required
            sx={{ mb: 3 }}
            helperText={i18n._(msg`${titel.length}/200 characters`)}
          />

          <TextField
            fullWidth
            label={i18n._(msg`Details`)}
            value={details}
            onChange={(e) => setDetails(e.target.value.slice(0, 1500))}
            variant="outlined"
            multiline
            rows={8}
            helperText={i18n._(msg`${details.length}/1500 characters`)}
          />
        </Box>
      </DialogContent>
      <DialogActions>
        <Button onClick={handleClose} disabled={saving}>
          <Trans>Cancel</Trans>
        </Button>
        <Button
          onClick={handleSubmit}
          variant="contained"
          color="primary"
          disabled={saving || !titel.trim()}
          startIcon={saving ? <CircularProgress size={20} /> : null}
        >
          {saving ? i18n._(msg`Saving...`) : i18n._(msg`Save`)}
        </Button>
      </DialogActions>
    </Dialog>
  );
};

export default NotizenDialog;