// resources/assets/ts/ContactsPage/components/ContactAufgabenFormDialog.tsx

import React from 'react';
import Dialog from '@mui/material/Dialog';
import DialogContent from '@mui/material/DialogContent';
import DialogTitle from '@mui/material/DialogTitle';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import CloseIcon from '@mui/icons-material/Close';
import { grey } from '@mui/material/colors';
import { useSelector } from 'react-redux';
import { Provider } from 'react-redux';
import { configureStore } from '@reduxjs/toolkit';
import I18nProvider from 'B/I18nProvider';  // ← Add this import

// import formsReducer from '../../share/formsSlice';
// import Forms from '../../share/Forms';
import formsReducer from './formsSlice';
import Forms from './Forms';

import axios from 'axios';

// Create a separate store for the form (isolated from main app)
const formStore = configureStore({
  reducer: {
    mainForm: formsReducer,
  },
});

interface ContactAufgabenFormDialogProps {
  open: boolean;
  onClose: () => void;
  agbID: number | null;
  aufgabeName: string;
  adrId: number;
  csrfToken: string;
  onSuccess: (ergId: number, aufgabeData: any) => void;
}

const ContactAufgabenFormDialogInner: React.FC <
  Omit<ContactAufgabenFormDialogProps, 'open' | 'onClose'> & {
    handleClose: () => void;
    isOpen: boolean;
  }
> = ({ agbID, aufgabeName, adrId, csrfToken, onSuccess, handleClose, isOpen }) => {
  const mainFormState = useSelector((s: any) => s.mainForm);

  const par = agbID !== null ? { 'by.id': agbID } : null;

  // Custom close handler that fetches the latest erg and links it
  const handleFormClose = async () => {
    if (!agbID) {
      handleClose();
      return;
    }

    try {
      // Wait a moment for the backend to process the form submission
      await new Promise((resolve) => setTimeout(resolve, 1500));

      // Fetch the latest erg and create the link
      const response = await axios.post('/contacts/get-latest-erg', {
        agb_id: agbID,
        adr_id: adrId,
        _token: csrfToken,
      });

      if (response.data.status === 'success') {
        onSuccess(response.data.erg_id, response.data.aufgabe);
      }
    } catch (error) {
      console.error('Error fetching latest erg:', error);
      // Notify user but still close
      alert(
        'Aufgabe wurde erstellt, aber die Verknüpfung konnte nicht erstellt werden. Bitte aktualisieren Sie die Seite.'
      );
    }

    handleClose();
  };

  return (
    <Dialog open={isOpen} fullWidth maxWidth="md">
      <DialogTitle style={{ backgroundColor: grey[300] }}>
        <div
          style={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
          }}
        >
          <Typography variant="h6">{aufgabeName}</Typography>
          <IconButton onClick={handleClose} aria-label="close" size="large">
            <CloseIcon />
          </IconButton>
        </div>
      </DialogTitle>
      <DialogContent dividers>
        {par && (
          <Forms
            s={mainFormState}
            reset={!isOpen}
            par={par}
            krzl={window.__INITIAL_DATA__?.currentUser || 'user'}
            handleClose={handleFormClose}
            agbID={agbID}
          />
        )}
      </DialogContent>
    </Dialog>
  );
};

const ContactAufgabenFormDialog: React.FC<ContactAufgabenFormDialogProps> = (
  props
) => {
  return (
    <Provider store={formStore}>
      <I18nProvider> {/* ← Add this wrapper */}
        <ContactAufgabenFormDialogInner
          {...props}
          handleClose={props.onClose}
          isOpen={props.open}
        />
      </I18nProvider> {/* ← Close wrapper */}
    </Provider>
  );
};

export default ContactAufgabenFormDialog;