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

interface DocumentPaneProps {
  content: string;
  onChange: (content: string) => void;
  phase: Phase;
  disabled: boolean;
  showOnboarding?: 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,
  showOnboarding,
}: DocumentPaneProps) {
  const [isEditing, setIsEditing] = useState(false);
  const renderedHtml = useMemo(() => renderMarkdown(content), [content]);

  if (showOnboarding) {
    return (
      <div className="document-pane">
        <div className="document-header">
          <span>Welcome to Claude Flow</span>
        </div>
        <div className="document-content rendered onboarding">
          <h1>Claude Flow</h1>
          <p>
            A structured workflow for AI-assisted coding: <strong>Research → Plan → Implement</strong>.
          </p>

          <h2>Setup</h2>
          <p>Export your Anthropic API key:</p>
          <pre><code>export ANTHROPIC_API_KEY=your-key-here</code></pre>
          <p>Get one at <a href="https://platform.claude.com" target="_blank" rel="noopener">platform.claude.com</a></p>

          <h2>Getting Started</h2>
          <ol>
            <li><strong>Add a project</strong> — Select a codebase folder</li>
            <li><strong>Create a session</strong> — Start a new task</li>
            <li><strong>Describe your work</strong> — Tell Claude what you want to build</li>
          </ol>

          <h2>Workflow</h2>
          <p><strong>Research:</strong> Claude analyzes your codebase and writes findings to <code>research.md</code>. Add notes like <code>// REVIEW: check this</code> — click <strong>Review</strong> when done.</p>
          <p><strong>Plan:</strong> Claude drafts an implementation plan in <code>plan.md</code> with code snippets and a TODO list. Iterate the same way.</p>
          <p><strong>Implement:</strong> Claude executes the plan, marking tasks complete as it goes.</p>

          <p className="onboarding-tip">Iterate on research and plan docs as long as you want. Click <strong>Submit</strong> when happy to move to the next phase.</p>
        </div>
      </div>
    );
  }

  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>
  );
}