import React, { useState } from "react";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import type { Phase } from "../types";

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

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

  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">
          <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
        </div>
      </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"
          onClick={() => !disabled && setIsEditing(true)}
        >
          {content ? (
            <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
          ) : (
            <p className="empty">
              Document will appear here after Claude generates it...
            </p>
          )}
        </div>
      )}
    </div>
  );
}