import React, { useState, useMemo } from "react";
import type { Phase } from "../types";

interface DocumentPaneProps {
  content: string;
  onChange: (content: string) => void;
  phase: Phase;
  disabled: boolean;
}

function renderMarkdown(md: string): string {
  return (
    md
      // Headers
      .replace(/^### (.*$)/gm, "<h3>$1</h3>")
      .replace(/^## (.*$)/gm, "<h2>$1</h2>")
      .replace(/^# (.*$)/gm, "<h1>$1</h1>")
      // Bold/italic
      .replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>")
      .replace(/\*([^*]+)\*/g, "<em>$1</em>")
      // Code blocks
      .replace(
        /```(\w*)\n([\s\S]*?)```/g,
        '<pre><code class="language-$1">$2</code></pre>'
      )
      .replace(/`([^`]+)`/g, "<code>$1</code>")
      // Lists
      .replace(/^- \[x\] (.*$)/gm, '<li class="task done">☑ $1</li>')
      .replace(/^- \[ \] (.*$)/gm, '<li class="task">☐ $1</li>')
      .replace(/^- (.*$)/gm, "<li>$1</li>")
      // Review comments (highlight them)
      .replace(/(\/\/ REVIEW:.*$)/gm, '<mark class="review">$1</mark>')
      .replace(/(\/\/ NOTE:.*$)/gm, '<mark class="note">$1</mark>')
      // Paragraphs
      .replace(/\n\n/g, "</p><p>")
      .replace(/^(.+)$/gm, "<p>$1</p>")
      // Clean up
      .replace(/<p><\/p>/g, "")
      .replace(/<p>(<h[1-3]>)/g, "$1")
      .replace(/(<\/h[1-3]>)<\/p>/g, "$1")
      .replace(/<p>(<pre>)/g, "$1")
      .replace(/(<\/pre>)<\/p>/g, "$1")
      .replace(/<p>(<li)/g, "$1")
      .replace(/(<\/li>)<\/p>/g, "$1")
  );
}

export function DocumentPane({
  content,
  onChange,
  phase,
  disabled,
}: DocumentPaneProps) {
  const [isEditing, setIsEditing] = useState(false);
  const renderedHtml = useMemo(() => renderMarkdown(content), [content]);

  if (phase === "implement") {
    return (
      <div className="document-pane">
        <div className="document-header">
          <span>plan.md</span>
          <span className="badge">Implementing...</span>
        </div>
        <div
          className="document-content rendered"
          dangerouslySetInnerHTML={{ __html: renderedHtml }}
        />
      </div>
    );
  }

  const filename = phase === "research" ? "research.md" : "plan.md";

  return (
    <div className="document-pane">
      <div className="document-header">
        <span>{filename}</span>
        <button onClick={() => setIsEditing(!isEditing)}>
          {isEditing ? "Preview" : "Edit"}
        </button>
      </div>

      {isEditing ? (
        <textarea
          className="document-content editing"
          value={content}
          onChange={(e) => onChange(e.target.value)}
          disabled={disabled}
          placeholder={`${filename} will appear here...`}
        />
      ) : (
        <div
          className="document-content rendered"
          dangerouslySetInnerHTML={{
            __html:
              renderedHtml ||
              '<p class="empty">Document will appear here after Claude generates it...</p>',
          }}
          onClick={() => !disabled && setIsEditing(true)}
        />
      )}
    </div>
  );
}