import React, { useState, useEffect, useRef } from 'react';
import { Comment } from '../../types/pdfReader';

interface CommentPopupProps {
  highlightId: string;
  comments: Comment[];
  position: { x: number; y: number };
  onAddComment: (text: string) => void;
  onDeleteComment: (commentId: string) => void;
  onClose: () => void;
}

export const CommentPopup: React.FC<CommentPopupProps> = ({
  comments,
  position,
  onAddComment,
  onDeleteComment,
  onClose
}) => {
  const [newComment, setNewComment] = useState('');
  const popupRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const handleClickOutside = (e: MouseEvent) => {
      if (popupRef.current && !popupRef.current.contains(e.target as Node)) {
        onClose();
      }
    };
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, [onClose]);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (newComment.trim()) {
      onAddComment(newComment.trim());
      setNewComment('');
    }
  };

  return (
    <div
      ref={popupRef}
      style={{
        ...popupStyle,
        left: position.x,
        top: position.y
      }}
    >
      <div style={headerStyle}>
        <span style={titleStyle}>批注</span>
        <button onClick={onClose} style={closeButtonStyle}>×</button>
      </div>
      
      <div style={commentsContainerStyle}>
        {comments.length === 0 ? (
          <div style={emptyStyle}>暂无批注</div>
        ) : (
          comments.map((comment) => (
            <div key={comment.id} style={commentItemStyle}>
              <div style={commentTextStyle}>{comment.text}</div>
              <div style={commentMetaStyle}>
                <span>{new Date(comment.createdAt).toLocaleString()}</span>
                <button
                  onClick={() => onDeleteComment(comment.id)}
                  style={deleteButtonStyle}
                >
                  删除
                </button>
              </div>
            </div>
          ))
        )}
      </div>

      <form onSubmit={handleSubmit} style={formStyle}>
        <input
          type="text"
          value={newComment}
          onChange={(e) => setNewComment(e.target.value)}
          placeholder="添加批注..."
          style={inputStyle}
        />
        <button type="submit" disabled={!newComment.trim()} style={submitButtonStyle}>
          添加
        </button>
      </form>
    </div>
  );
};

const popupStyle = {
  position: 'absolute',
  zIndex: 1000,
  width: '300px',
  backgroundColor: 'white',
  borderRadius: '8px',
  boxShadow: '0 4px 20px rgba(0, 0, 0, 0.15)',
  border: '1px solid #e0e0e0'
} as const;

const headerStyle = {
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
  padding: '12px 16px',
  borderBottom: '1px solid #e0e0e0'
} as const;

const titleStyle = {
  fontWeight: 'bold' as const,
  fontSize: '14px'
} as const;

const closeButtonStyle = {
  background: 'none',
  border: 'none',
  fontSize: '20px',
  cursor: 'pointer',
  color: '#666'
} as const;

const commentsContainerStyle = {
  maxHeight: '200px',
  overflowY: 'auto' as const,
  padding: '12px'
} as const;

const emptyStyle = {
  textAlign: 'center' as const,
  color: '#999',
  padding: '20px'
} as const;

const commentItemStyle = {
  padding: '10px',
  marginBottom: '8px',
  backgroundColor: '#f9f9f9',
  borderRadius: '4px'
} as const;

const commentTextStyle = {
  marginBottom: '8px',
  fontSize: '14px',
  lineHeight: '1.4'
} as const;

const commentMetaStyle = {
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
  fontSize: '12px',
  color: '#666'
} as const;

const deleteButtonStyle = {
  background: 'none',
  border: 'none',
  color: '#f44336',
  cursor: 'pointer',
  fontSize: '12px'
} as const;

const formStyle = {
  display: 'flex',
  padding: '12px',
  borderTop: '1px solid #e0e0e0',
  gap: '8px'
} as const;

const inputStyle = {
  flex: 1,
  padding: '8px 12px',
  border: '1px solid #ddd',
  borderRadius: '4px',
  fontSize: '14px'
} as const;

const submitButtonStyle = {
  padding: '8px 16px',
  backgroundColor: '#2196f3',
  color: 'white',
  border: 'none',
  borderRadius: '4px',
  cursor: 'pointer'
} as const;
