// resources\assets\ts\DataPage\Detail.tsx
import React, { useEffect, useState } from 'react';
import IconButton from '@mui/material/IconButton';
import type { IconButtonProps } from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import Box from '@mui/material/Box';
import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
import { Trans, t } from '@lingui/macro';
import { fetchClones } from '../../../DataPage/cloneTaskSlice';
import { fetchEmails } from '../../../DataPage/emailsSlice';
import { fetchHistory } from '../../../DataPage/historySlice';
import { nextForm } from '../../../DataPage/formSlice';

//import { fetchClones } from './cloneTaskSlice';
//import { fetchEmails } from './emailsSlice';
//import { fetchHistory } from './historySlice';
//import { nextForm } from './formSlice';
import {
  markAsRead,
  reqestNextTaskWithoutForm,
  requestRecoverTask,
} from '../../../DataPage/actionSlice';
import { setOpen as setOpenConfirm } from '../../../DataPage/deleteConfirmationSlice';
import { setOpen as setOpenMoveTask } from '../../../DataPage/moveTaskDateSlice';
import { setOpen as setOpenQuit } from '../../../DataPage/quitTaskConfirmationSlice';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { useHaveAccess } from '../../../DataPage/permissionHooks';
import styled from 'styled-components';
import { clearTable } from '../../../DataPage/tableSlice';
import { fetchAll } from '../../../DataPage/dataSlice';
import '../../../DataPage/styles.css';
import { I18nProvider } from '@lingui/react';
import { i18n } from '@lingui/core';
import '../../dialogPopup';
import Item from '../../../DataPage/ItemTags';
import {
  addGlobalTagIfMissing,
  addItemTag,
  removeItemTag,
  setItemTags,
} from '../slices/tagsSlice';

import { RootState } from '../../../DataPage/rootReducer';
import ItemTags from '../../../DataPage/ItemTags';
import { setAvailableTags } from '../slices/filterSlice';

//---helpers for Contact page context-awareness---//
// ✅ ADD: Context detection and action routing
const isContactsPage = () => {
  return window.location.pathname.includes('/contacts/');
};

// Emit mark-as-read event for ContactsPage
const emitMarkAsRead = (ergId: number) => {
  window.dispatchEvent(
    new CustomEvent('contactMarkAsRead', {
      detail: { ergId },
    }),
  );
};

//------------------------------------------------//

const StyledButtonsContainer = styled.div`
  display: flex;
  flex-wrap: wrap;
`;
export const StyledIconButton = styled(IconButton)<IconButtonProps>`
  background-color: transparent;
  &:hover {
    background-color: transparent !important;
  }
`;

const StyledLabel = styled.div`
  width: 100%;
  color: black;
  font-size: 12px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  word-wrap: break-word;
`;
interface DetailProps {
  rowData: any;
  canDelete: boolean;
  isOneRow?: boolean;
  index: number;
  handleEdit: (idx: number) => () => void;
  canEdit: boolean;
  taskID: number;
  taskType: string;
  isComplete: boolean;
  isBlocked: boolean;
  tags: string[]; // hinzugefügt
}
export default function Detail({
  rowData,
  canDelete,
  isOneRow = false,
  index,
  handleEdit,
  canEdit,
  taskID,
  taskType,
  isComplete,
  isBlocked,
}: DetailProps) {
  const d = useDispatch();
  const isTaskDone = rowData.erg_strerl > 0;
  const isTaskNotDone = !isTaskDone;
  const canWork = useHaveAccess(rowData);

  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const dispatch = useDispatch();

  // Beim direkten Einstieg (/ShowTask/{id}) fehlen die Tags im Store, deshalb übernehmen wir sie aus rowData
  const tags = useSelector(
    (state: RootState) =>
      (rowData?.erg_lngid
        ? state.tags.entities[rowData.erg_lngid]
        : undefined) || [],
    shallowEqual,
  );

  useEffect(() => {
    if (rowData?.erg_lngid && Array.isArray(rowData?.tags)) {
      dispatch(setItemTags({ itemId: rowData.erg_lngid, tags: rowData.tags }));
    }
  }, [dispatch, rowData?.erg_lngid, rowData?.tags]);

  const handleMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
    setAnchorEl(event.currentTarget);
  };

  const handleMenuClose = () => {
    setAnchorEl(null);
  };

  // const handleOpenEmailDialog = () => {
  //   d(markAsRead(rowData.id));
  //   d(fetchEmails(rowData.id));
  // };

  const handleOpenEmailDialog = () => {
    // Context-aware mark as read
    if (isContactsPage()) {
      emitMarkAsRead(rowData.id);
    } else {
      d(markAsRead(rowData.id));
    }
    // ✅ fetchEmails works for both contexts (shared Redux)
    d(fetchEmails(rowData.id));
  };

  const handleOpenPdf = () => {
    d(markAsRead(rowData.id));
    const url = `/comment/pdf/${rowData.id}/${rowData.agb_rep}`;
    const name = 'report_window';

    window.open(url, name, 'width=800, height=600');
  };

  // const handleCloneTask = () => {
  //   d(markAsRead(rowData.id));
  //   d(fetchClones(rowData.id));

  //   // ✅ ADD: Note - actual clone happens after user selects options
  //   // Event should be emitted from clone dialog's onConfirm
  // };

  //context aware version for contacts page
  const handleCloneTask = () => {
    if (isContactsPage()) {
      emitMarkAsRead(rowData.id);
      // ✅ Emit event for ContactsPage to fetch clones
      window.dispatchEvent(
        new CustomEvent('contactFetchClones', {
          detail: { ergId: rowData.id },
        }),
      );
    } else {
      d(markAsRead(rowData.id));
    }
    d(fetchClones(rowData.id)); // ← This line should be OUTSIDE the if/else
  };

  // const handleDeleteTask = () => {
  //   d(markAsRead(rowData.id));
  //   d(setOpenConfirm(rowData.id));

  //   // ✅ ADD: Emit event for ContactsPage
  //   window.dispatchEvent(new CustomEvent('contactDeleteTask', {
  //     detail: { ergId: rowData.id }
  //   }));
  // };

  //Contact context aware version
  const handleDeleteTask = () => {
    if (isContactsPage()) {
      emitMarkAsRead(rowData.id);
    } else {
      d(markAsRead(rowData.id));
    }
    d(setOpenConfirm(rowData.id));

    // Emit event for ContactsPage
    window.dispatchEvent(
      new CustomEvent('contactDeleteTask', {
        detail: { ergId: rowData.id },
      }),
    );
  };

  const availableTagOptions = useSelector(
    (state: RootState) => state.filter.availableTags,
    shallowEqual,
  );

  const handleAddTag = (tag: string) => {
    const clean = tag.trim();
    if (!clean) return;

    // 1) Item-Tag setzen (Server/Entity)
    dispatch(addItemTag({ itemId: rowData.erg_lngid, tag: clean }));

    // 2) Globale Optionsquelle (tagsSlice) aktualisieren
    dispatch(addGlobalTagIfMissing(clean));

    // 3) (Optional) lokale Filter-Options ebenfalls pflegen, falls irgendwo genutzt
    if (!availableTagOptions.includes(clean)) {
      dispatch(setAvailableTags([...availableTagOptions, clean]));
    }
  };

  // Wenn ein Tag gelöscht wird
  const handleRemoveTag = (tag: string) => {
    const updatedTags = tags.filter((t) => t !== tag);
    dispatch(removeItemTag({ itemId: rowData.erg_lngid, tag }));
  };

  const hide = () => {
    let thisEl = document.getElementById('noTask' + index);
    if (thisEl) {
      thisEl.style.visibility = 'hidden';
      setTimeout(() => {
        thisEl.style.visibility = 'visible';
      }, 2000);
    }
  };

  const handleNextTaskWithAction = () => {
    const url = `/form?byid=${rowData.erg_lngid}`; //add / to use base url and not relative url, need to work on contact page aufgaben&notizen tab and should not change  how monitor works

    const onClose = (e: Event) => {
      d(markAsRead(rowData.id));

      if ((e as CustomEvent).detail?.submitted) {
        // Monitor page: refresh table via Redux
        d(clearTable());
        d(fetchAll());

        // ContactsPage: notify for refresh via event (if listening) //CMSprototype
        window.dispatchEvent(new CustomEvent('taskUpdated'));
      }
    };
    window.addEventListener('formPopupClosed', onClose, { once: true });
    window.openFormPopup(url);
  };

  const historyIcon = rowData.aud_count > 0 && (
    <Box display='flex' alignItems='center'>
      <Tooltip title={<Trans>History</Trans>}>
        <img
          onClick={() => {
            handleOpenHistory();
            handleMenuClose();
          }}
          style={{
            marginLeft: '0.5rem',
            height: '21px',
            width: '21px',
            objectFit: 'contain',
          }}
          src='/imgtasko/aud.png'
          alt='history icon'
        />
      </Tooltip>
    </Box>
  );
  const handleNextTaskWithoutAction = () => {
    hide();
    d(markAsRead(rowData.id));
    d(reqestNextTaskWithoutForm(rowData.id));
  };

  // const handleQuitTask = () => {
  //   d(markAsRead(rowData.id));
  //   d(setOpenQuit(rowData.id));
  // };

  //edited version  for Contact page context awareness with emitmarkasread helper
  const handleQuitTask = () => {
    if (isContactsPage()) {
      emitMarkAsRead(rowData.id);
    } else {
      d(markAsRead(rowData.id));
    }
    d(setOpenQuit(rowData.id));

    // Emit event for ContactsPage
    window.dispatchEvent(
      new CustomEvent('contactQuitTask', {
        detail: { ergId: rowData.id },
      }),
    );
  };

  // const handleRecoverTask = () => {
  //   d(markAsRead(rowData.id));
  //   d(requestRecoverTask(rowData.id));
  // };

  //edited version for  Contact page context awareness with emitmarkasread helper
  const handleRecoverTask = () => {
    const shouldRecover = window.confirm(
      i18n._(
        t`Sind Sie sicher, dass Sie diese Aufgabe wiederherstellen möchten?`,
      ),
    );
    if (!shouldRecover) return;
    if (isContactsPage()) {
      emitMarkAsRead(rowData.id);
    } else {
      d(markAsRead(rowData.id));
    }

    d(requestRecoverTask(rowData.id));

    // Emit event for ContactsPage
    window.dispatchEvent(
      new CustomEvent('contactRecoverTask', {
        detail: { ergId: rowData.id },
      }),
    );
  };

  // const handleMoveTaskClick = () => {
  //   d(markAsRead(rowData.id));
  //   d(setOpenMoveTask(rowData.id));

  //   // ✅ ADD: Note - actual move happens in dialog confirm
  //   // We'll need to emit event from dialog's onConfirm
  // };

  //context aware version for Cotnact Page
  const handleMoveTaskClick = () => {
    if (isContactsPage()) {
      emitMarkAsRead(rowData.id);
    } else {
      d(markAsRead(rowData.id));
    }
    d(setOpenMoveTask(rowData.id));
  };

  const handleOpenHistory = () => {
    d(markAsRead(rowData.id));
    d(fetchHistory(rowData.id));
  };
  const complaintIcon =
    taskType === 'BSW' || taskType === 'BSWi' ? (
      <Tooltip title='auf E-Mail antworten'>
        <IconButton
          onClick={() => {
            let url = '/angular/complaint/' + taskID;
            window.open(url, 'GoogleWindow', 'width=800, height=600');
          }}
          style={{
            backgroundColor: 'transparent',
            boxShadow: 'none',
          }}
          disableRipple
          size='large'
        >
          <img height='24' src='/imgtasko/reply24.png' alt='reply icon' />
        </IconButton>
      </Tooltip>
    ) : null;
  const NextTaskWithAction = () => (
    <div className='button' onClick={handleNextTaskWithAction}>
      <img src='/icon8/okNext24.png' alt='next task icon' />
      <span className=''>
        <Trans>Confirm and next form</Trans>
      </span>
    </div>
  );

  const NextTaskWithoutAction = () => (
    <div
      className='button'
      onClick={handleNextTaskWithoutAction}
      id={`noTask${index}`}
    >
      <img src='/icon8/okNext24.png' alt='next task icon' />
      <span>
        <Trans>Confirm and next</Trans>
      </span>
    </div>
  );

  const QuitTask = () => (
    <div className='button' onClick={handleQuitTask}>
      <img src='/icon8/ok24.png' alt='complete task icon' />
      <span>
        <Trans>Mark as done</Trans>
      </span>
    </div>
  );

  const RecoverTask = () => (
    <div className='button' onClick={handleRecoverTask}>
      <img src='/icon8/reactiv24.png' alt='recover task icon' />
      <span>
        <Trans>Recover</Trans>
      </span>
    </div>
  );

  const ActionButton = () => {
    if (isTaskDone) return <RecoverTask />;
    if (!canWork) return null;

    const haveAutoNext = rowData.agb_dyn !== null && rowData.agb_dyn > 0;
    const haveAction = rowData.pkt_count > 0;
    const haveAutoNextWithAction = haveAutoNext && haveAction;

    if (haveAutoNextWithAction) return <NextTaskWithAction />;
    if (haveAutoNext) return <NextTaskWithoutAction />;
    if (haveAction) return <NextTaskWithAction />;

    return <QuitTask />;
  };

  const MoveTaskButton = () => {
    if (isTaskDone) return null;
    return (
      <StyledIconButton onClick={handleMoveTaskClick}>
        <img
          style={{ height: '24px', width: '24px' }}
          src='/icon8/datum24.png' //CMSprototype remove .
          alt='move task icon'
        />
      </StyledIconButton>
    );
  };

  const RemoveTaskButton = () => {
    const isShow = canDelete && isTaskNotDone;
    return (
      isShow && (
        <StyledIconButton onClick={handleDeleteTask}>
          <img src='/icon8/del24.png' alt='remove task icon' title='delete' />
        </StyledIconButton>
      )
    );
  };

  const AddTaskButton = () =>
    isTaskNotDone &&
    canDelete && (
      <StyledIconButton onClick={handleCloneTask}>
        <img
          src='/icon8/add24.png'
          alt='add task icon'
          style={{ height: '24px', width: '24px' }}
        />
      </StyledIconButton>
    );
  const editIcon =
    canEdit && !isComplete && !isBlocked ? (
      <IconButton onClick={handleEdit} style={{ float: 'left' }} size='large'>
        <img src='/icon8/edt24.png' style={{ height: '24px', width: '24px' }} />
      </IconButton>
    ) : null;

  interface Props {
    itemId: number;
  }
  return (
    <>
      <I18nProvider i18n={i18n}>
        {isOneRow ? (
          <StyledButtonsContainer>
            <ActionButton />

            <Tooltip title={<Trans>More actions</Trans>}>
              <StyledIconButton onClick={handleMenuOpen}>
                <MoreHorizIcon />
              </StyledIconButton>
            </Tooltip>
            <Tooltip title={<Trans>open as pdf</Trans>}>
              <StyledIconButton onClick={handleOpenPdf}>
                <img src='/icon8/pdfexp24.png' alt='pdf export icon' />
              </StyledIconButton>
            </Tooltip>
            {complaintIcon}

            {historyIcon}
            <ItemTags
              tags={tags}
              onAdd={handleAddTag}
              onRemove={handleRemoveTag}
            />

            <Menu
              anchorEl={anchorEl}
              open={Boolean(anchorEl)}
              onClose={handleMenuClose}
              anchorOrigin={{
                vertical: 'top',
                horizontal: 'right',
              }}
              transformOrigin={{
                vertical: 'top',
                horizontal: 'right',
              }}
              PaperProps={{
                style: {
                  transform: 'scale(0.8)',
                  transformOrigin: 'top right',
                  borderRadius: '10px', // Hier ohne !important, da direkt auf Paper angewendet
                },
              }}
            >
              {/* Send Email */}
              {rowData?.id && (
                <MenuItem
                  onClick={() => {
                    handleOpenEmailDialog();
                    handleMenuClose();
                  }}
                >
                  <StyledIconButton>
                    <img
                      src='/icon8/mailSend24.png'
                      alt='send mail icon'
                      style={{ height: '18px', width: '24px' }}
                    />
                  </StyledIconButton>
                  <Trans>Send Email</Trans>
                </MenuItem>
              )}

              {/* Add Task */}
              {canDelete && !isTaskDone && (
                <MenuItem
                  onClick={() => {
                    handleCloneTask();
                    handleMenuClose();
                  }}
                >
                  <AddTaskButton />
                  <Trans>Add Task</Trans>
                </MenuItem>
              )}

              {/* Edit Task */}
              {canEdit && !isComplete && !isBlocked && (
                <MenuItem
                  onClick={() => {
                    handleEdit();
                    handleMenuClose();
                  }}
                >
                  <StyledIconButton>
                    <img
                      src='/icon8/edt24.png'
                      alt='edit task icon'
                      style={{ height: '24px', width: '24px' }}
                    />
                  </StyledIconButton>
                  <Trans>Edit Task</Trans>
                </MenuItem>
              )}

              {/* Move Task */}
              {!isTaskDone && (
                <MenuItem
                  onClick={() => {
                    handleMoveTaskClick();
                    handleMenuClose();
                  }}
                >
                  <MoveTaskButton />
                  <Trans>Move Task</Trans>
                </MenuItem>
              )}

              {/* Remove Task */}
              {canDelete && !isTaskDone && (
                <MenuItem
                  onClick={() => {
                    handleDeleteTask();
                    handleMenuClose();
                  }}
                >
                  <RemoveTaskButton />
                  <Trans>Remove Task</Trans>
                </MenuItem>
              )}
            </Menu>
          </StyledButtonsContainer>
        ) : (
          <div>
            <div style={{ display: 'flex' }}>
              <StyledIconButton onClick={handleOpenPdf}>
                <img src='/icon8/pdfexp24.png' alt='pdf export icon' />
              </StyledIconButton>
              <StyledIconButton onClick={handleOpenEmailDialog}>
                <img src='/icon8/mailSend24.png' alt='send mail icon' />
              </StyledIconButton>
              <AddTaskButton />
              <RemoveTaskButton />
            </div>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <ActionButton />
              <MoveTaskButton />
              <StyledIconButton onClick={handleMenuOpen}>
                <MoreHorizIcon />
              </StyledIconButton>
              {complaintIcon}
              <Menu
                anchorEl={anchorEl}
                open={Boolean(anchorEl)}
                onClose={handleMenuClose}
                anchorOrigin={{
                  vertical: 'top',
                  horizontal: 'right',
                }}
                transformOrigin={{
                  vertical: 'top',
                  horizontal: 'right',
                }}
              >
                <MenuItem
                  onClick={() => {
                    handleOpenEmailDialog();
                    handleMenuClose();
                  }}
                >
                  <StyledIconButton>
                    <img src='/icon8/mailSend24.png' alt='send mail icon' />
                  </StyledIconButton>
                  <Trans>Send Email</Trans>
                </MenuItem>
                <MenuItem
                  onClick={() => {
                    handleCloneTask();
                    handleMenuClose();
                  }}
                >
                  <AddTaskButton />
                  <Trans>Add Task</Trans>
                </MenuItem>

                <MenuItem
                  onClick={() => {
                    handleMoveTaskClick();
                    handleMenuClose();
                  }}
                >
                  <MoveTaskButton />
                  <Trans>Move Task</Trans>
                </MenuItem>
                <MenuItem
                  onClick={() => {
                    handleDeleteTask();
                    handleMenuClose();
                  }}
                >
                  <RemoveTaskButton />
                  <Trans>Remove Task</Trans>
                </MenuItem>
                {/* {rowData.aud_count > 0 && (
                <MenuItem onClick={() => { handleOpenHistory(); handleMenuClose(); }}>
                    <StyledIconButton>
                      <img
                        style={{ height: '24px' }}
                        src='/imgtasko/aud.png'
                        alt='history icon'
                      />
                    </StyledIconButton>
                  <Trans>History</Trans>
                </MenuItem>
              )} */}
              </Menu>
            </div>
          </div>
        )}
      </I18nProvider>
    </>
  );
}