Genarrative/src/components/common/PlatformReportDialog.tsx

import { useEffect, useMemo } from 'react';

import { CopyFeedbackButton } from './CopyFeedbackButton';
import { PlatformInfoBlock } from './PlatformInfoBlock';
import { PlatformUtilityInfoModal } from './PlatformUtilityInfoModal';
import { useCopyFeedback } from './useCopyFeedback';

export type PlatformReportDialogField = {
  label: string;
  value: string;
  multiline?: boolean;
};

type PlatformReportDialogProps = {
  open: boolean;
  title: string;
  onClose: () => void;
  copyIdleLabel: string;
  fields: readonly PlatformReportDialogField[];
  overlayClassName?: string;
  panelClassName?: string;
};

function buildPlatformReportText(fields: readonly PlatformReportDialogField[]) {
  return fields.map((field) => `${field.label}：${field.value}`).join('\n');
}

export function PlatformReportDialog({
  open,
  title,
  onClose,
  copyIdleLabel,
  fields,
  overlayClassName,
  panelClassName = 'rounded-[1.5rem]',
}: PlatformReportDialogProps) {
  const { copyState, copyText, resetCopyState } = useCopyFeedback();
  const reportText = useMemo(() => buildPlatformReportText(fields), [fields]);

  useEffect(() => {
    resetCopyState();
  }, [open, reportText, resetCopyState]);

  const copyReport = () => {
    if (!reportText) {
      return;
    }

    void copyText(reportText);
  };

  return (
    <PlatformUtilityInfoModal
      open={open}
      title={title}
      onClose={onClose}
      overlayClassName={overlayClassName}
      panelClassName={panelClassName}
      bodyClassName="space-y-3"
      footerClassName="justify-end px-4 py-4 sm:px-5"
      footer={
        <CopyFeedbackButton
          state={copyState}
          onClick={copyReport}
          disabled={!reportText}
          idleLabel={copyIdleLabel}
          actionSurface="platform"
          actionFullWidth
          className="sm:w-auto"
        />
      }
    >
      {open
        ? fields.map((field) => (
            <PlatformInfoBlock
              key={`${field.label}-${field.value}`}
              label={field.label}
              multiline={field.multiline}
            >
              {field.value}
            </PlatformInfoBlock>
          ))
        : null}
    </PlatformUtilityInfoModal>
  );
}