'use client';

import { useCallback, useEffect, useState } from 'react';

import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import Modal from '@/components/modal/Modal';
import { ModalTypes } from '@/components/modal/constants/ModalTypes';
import { useModalContext } from '@/context/ModalContext';

const PREVIEW_MAX_HEIGHT = 480;
const JSON_CONTAINER_STYLE = Object.freeze({ maxHeight: PREVIEW_MAX_HEIGHT });

const ClipJsonModal = () => {
  const { closeModal, getModalData, isModalOpen } = useModalContext();
  const modalData = getModalData(ModalTypes.CLIP_JSON);
  const isOpen = isModalOpen(ModalTypes.CLIP_JSON) && !!modalData;
  const clipJson = modalData?.clipJson ?? '';
  const [copyState, setCopyState] = useState<'idle' | 'copied' | 'error'>(
    'idle'
  );

  useEffect(() => {
    if (!isOpen) {
      setCopyState('idle');
    }
  }, [isOpen]);

  useEffect(() => {
    if (copyState === 'idle') return;
    const timeout = setTimeout(() => setCopyState('idle'), 2000);
    return () => clearTimeout(timeout);
  }, [copyState]);

  const handleClose = useCallback(() => {
    closeModal(ModalTypes.CLIP_JSON);
  }, [closeModal]);

  const handleCopy = useCallback(async () => {
    if (!clipJson || typeof navigator === 'undefined' || !navigator.clipboard) {
      setCopyState('error');
      return;
    }
    try {
      await navigator.clipboard.writeText(clipJson);
      setCopyState('copied');
    } catch {
      setCopyState('error');
    }
  }, [clipJson]);

  if (!isOpen || !modalData) {
    return null;
  }

  const titleText = modalData.clipTitle ?? 'Clip JSON';
  const copyButtonLabel =
    copyState === 'copied'
      ? 'Copied'
      : copyState === 'error'
        ? 'Copy failed'
        : 'Copy JSON';

  return (
    <Modal
      title={titleText}
      subtitle={modalData.clipId ? `${modalData.clipId}` : undefined}
      width={760}
      onClose={handleClose}
      wrapperClasses='flex flex-col gap-4'
      contentWrapperClasses='max-h-[80vh]'
    >
      <div className='flex flex-col gap-2 text-xs text-foreground-tertiary'>
        <div className='flex flex-row items-center justify-end gap-3'>
          <Button
            onClick={handleCopy}
            variant={ButtonVariant.Secondary}
            size={ButtonSize.Small}
            shape={ButtonShape.Rounded}
            className='px-3 py-1 text-xs whitespace-nowrap'
          >
            {copyButtonLabel}
          </Button>
        </div>
        {copyState === 'error' && (
          <span className='text-accent-error'>
            Unable to access clipboard. Please copy manually.
          </span>
        )}
      </div>
      <div
        className='overflow-auto rounded-2xl border border-border-primary bg-background-primary/80'
        style={JSON_CONTAINER_STYLE}
      >
        <pre className='p-4 font-mono text-[11px] leading-relaxed break-words whitespace-pre-wrap text-foreground-primary/90'>
          {clipJson}
        </pre>
      </div>
    </Modal>
  );
};

export default ClipJsonModal;