Untitled

'use client';

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

interface AnnotationPopupProps {
  annotation?: { id?: string };
  onCancel: () => void;
  onCreateBody: (body: {
    type: string;
    purpose: string;
    value: string;
    annotation: string;
  }) => void;
  onAnnotationSubmit?: () => void;
  onPauseDrawing?: () => void;
  onResumeDrawing?: () => void;
}

const TAG_OPTIONS = [
  'tumor',
  'stroma',
  'necrosis',
  'inflammation',
  'pre-analitik',
  'analitik',
  'post-analitik'
];

export default function AnnotationPopup({
  annotation,
  onCancel,
  onCreateBody,
  onAnnotationSubmit,
  onPauseDrawing,
  onResumeDrawing
}: AnnotationPopupProps) {
  const [comment, setComment] = useState('');
  const [tag, setTag] = useState('');

  const inputClass = 'w-full p-2 border rounded mb-2 outline-none';
  const buttonClass = 'text-sm px-3 py-1.5 rounded transition';

  // Çizimi duraklat
  useEffect(() => {
    onPauseDrawing?.();
    return () => {
      onResumeDrawing?.();
    };
  }, [onPauseDrawing, onResumeDrawing]);

  // ESC ile iptal
  useEffect(() => {
    function handleKey(e: KeyboardEvent) {
      if (e.key === 'Escape') handleCancel();
    }
    window.addEventListener('keydown', handleKey);
    return () => window.removeEventListener('keydown', handleKey);
  });

  const resetFields = useCallback(() => {
    setComment('');
    setTag('');
  }, []);

  const handleCancel = useCallback(() => {
    resetFields();
    onResumeDrawing?.();
    onCancel();
  }, [onCancel, onResumeDrawing, resetFields]);

  const onSave = useCallback(() => {
    if (!annotation?.id) {
      handleCancel();
      return;
    }

    const bodies = [
      { type: 'TextualBody', purpose: 'commenting', value: comment.trim() },
      { type: 'TextualBody', purpose: 'tagging', value: tag.trim() }
    ].filter(b => b.value.length > 0);

    if (bodies.length === 0) {
      alert('Lütfen yorum veya etiket girin.');
      return;
    }

    // Local state ve backend için body oluştur
    bodies.forEach((body) => {
      onCreateBody({ ...body, annotation: annotation.id as string });
    });

    onAnnotationSubmit?.();

    // reset ve çizimi başlat, popup’ı kapatma
    resetFields();
    onResumeDrawing?.();
    // ❌ onCancel kaldırıldı, silme sorunu çözülüyor
  }, [annotation?.id, comment, tag, onCreateBody, onAnnotationSubmit, onResumeDrawing, resetFields]);

  return (
    <div
      className="absolute top-10 left-10 z-50 bg-white text-black p-4 rounded-xl shadow-xl w-80 border border-gray-200"
      role="dialog"
      aria-modal="true"
    >
      <div className="mb-2 font-medium text-sm text-gray-700">Yeni anotasyon</div>

      <textarea
        placeholder="Yorum ekle..."
        value={comment}
        onChange={(e) => setComment(e.target.value)}
        className={inputClass}
        rows={3}
      />

      <select
        value={tag}
        onChange={(e) => setTag(e.target.value)}
        className={inputClass}
      >
        <option value="">Etiket seçin...</option>
        {TAG_OPTIONS.map((option) => (
          <option key={option} value={option}>
            {option.charAt(0).toUpperCase() + option.slice(1)}
          </option>
        ))}
      </select>

      <div className="flex justify-end gap-2 pt-1">
        <button
          type="button"
          onClick={handleCancel}
          className={`bg-gray-200 hover:bg-gray-300 ${buttonClass}`}
        >
          İptal
        </button>

        <button
          type="button"
          onClick={onSave}
          className={`bg-blue-600 hover:bg-blue-700 text-white ${buttonClass}`}
        >
          Kaydet
        </button>
      </div>
    </div>
  );
}