"use client"

import { useState } from "react"

interface HighlightPopoverProperties {
  highlightIdentifier: string
  note: string | null
  anchorRect: DOMRect
  containerRect: DOMRect
  onUpdateNote: (note: string | null) => void
  onDelete: () => void
  onDismiss: () => void
}

export function HighlightPopover({
  note,
  anchorRect,
  onUpdateNote,
  onDelete,
  onDismiss,
}: HighlightPopoverProperties) {
  const [isEditingNote, setIsEditingNote] = useState(false)
  const [editedNoteText, setEditedNoteText] = useState(note ?? "")

  const popoverLeft = anchorRect.left + anchorRect.width / 2
  const popoverTop = anchorRect.bottom + 4

  function handleSaveNote() {
    onUpdateNote(editedNoteText.trim() || null)
    setIsEditingNote(false)
  }

  return (
    <div
      className="fixed z-[100] -translate-x-1/2"
      style={{ left: popoverLeft, top: popoverTop }}
    >
      <div className="min-w-48 border border-border bg-background-secondary p-2">
        {isEditingNote ? (
          <div className="space-y-1">
            <input
              type="text"
              value={editedNoteText}
              onChange={(event) => setEditedNoteText(event.target.value)}
              onKeyDown={(event) => {
                if (event.key === "Enter") handleSaveNote()
                if (event.key === "Escape") onDismiss()
              }}
              placeholder="add a note..."
              className="w-full border border-border bg-background-primary px-2 py-1 text-xs text-text-primary outline-none"
              autoFocus
            />
            <div className="flex gap-1">
              <button
                type="button"
                onClick={handleSaveNote}
                className="px-2 py-1 text-xs text-text-secondary transition-colors hover:bg-background-tertiary hover:text-text-primary"
              >
                save
              </button>
              <button
                type="button"
                onClick={() => setIsEditingNote(false)}
                className="px-2 py-1 text-xs text-text-dim transition-colors hover:text-text-secondary"
              >
                cancel
              </button>
            </div>
          </div>
        ) : (
          <div className="space-y-1">
            {note && (
              <p className="text-xs text-text-secondary">{note}</p>
            )}
            <div className="flex gap-1">
              <button
                type="button"
                onClick={() => setIsEditingNote(true)}
                className="px-2 py-1 text-xs text-text-secondary transition-colors hover:bg-background-tertiary hover:text-text-primary"
              >
                {note ? "edit note" : "add note"}
              </button>
              <button
                type="button"
                onClick={onDelete}
                className="px-2 py-1 text-xs text-status-error transition-colors hover:bg-background-tertiary"
              >
                remove
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}