"use client";

import React, { useState, useRef } from "react";
import { LinkAutocomplete } from "./LinkAutocomplete";

interface EntryEditorProps {
  content: string;
  onChange: (content: string) => void;
}

/**
 * EntryEditor - Markdown editor with live preview and link autocomplete
 */
export function EntryEditor({ content, onChange }: EntryEditorProps): React.JSX.Element {
  const [showPreview, setShowPreview] = useState(false);
  const textareaRef = useRef<HTMLTextAreaElement>(null);

  return (
    <div className="entry-editor relative">
      <div className="flex justify-between items-center mb-2">
        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
          Content (Markdown)
        </label>
        <button
          type="button"
          onClick={() => {
            setShowPreview(!showPreview);
          }}
          className="text-sm text-blue-600 dark:text-blue-400 hover:underline"
        >
          {showPreview ? "Edit" : "Preview"}
        </button>
      </div>

      {showPreview ? (
        <div className="prose prose-sm max-w-none dark:prose-invert p-4 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-900 min-h-[300px]">
          <div className="whitespace-pre-wrap">{content}</div>
        </div>
      ) : (
        <div className="relative">
          <textarea
            ref={textareaRef}
            value={content}
            onChange={(e) => {
              onChange(e.target.value);
            }}
            className="w-full min-h-[300px] p-4 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 font-mono text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            placeholder="Write your content here... (Markdown supported)"
          />
          <LinkAutocomplete
            textareaRef={textareaRef}
            onInsert={(newContent) => {
              onChange(newContent);
            }}
          />
        </div>
      )}

      <p className="mt-2 text-xs text-gray-500 dark:text-gray-400">
        Supports Markdown formatting. Type <code className="text-xs">[[</code> to insert links to
        other entries.
      </p>
    </div>
  );
}
