"use client";

import { useState } from "react";
import ReactMarkdown from "react-markdown";
import { clsx } from "clsx";
import { Code, Eye } from "lucide-react";

interface MarkdownViewerProps {
  content: string;
  defaultMode?: "preview" | "raw";
}

export function MarkdownViewer({ content, defaultMode = "preview" }: MarkdownViewerProps) {
  const [mode, setMode] = useState<"preview" | "raw">(defaultMode);

  return (
    <div>
      {/* Toggle */}
      <div className="flex items-center gap-1 mb-3 border-b border-border-light">
        <button
          onClick={() => setMode("preview")}
          className={clsx(
            "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium border-b-2 -mb-px transition-colors",
            mode === "preview"
              ? "text-text-primary border-accent"
              : "text-text-muted border-transparent hover:text-text-secondary"
          )}
        >
          <Eye size={13} />
          Preview
        </button>
        <button
          onClick={() => setMode("raw")}
          className={clsx(
            "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium border-b-2 -mb-px transition-colors",
            mode === "raw"
              ? "text-text-primary border-accent"
              : "text-text-muted border-transparent hover:text-text-secondary"
          )}
        >
          <Code size={13} />
          Raw
        </button>
      </div>

      {/* Content */}
      {mode === "raw" ? (
        <pre className="text-sm text-text-secondary font-mono whitespace-pre-wrap bg-surface rounded-lg p-4 border border-border-light overflow-x-auto">
          {content}
        </pre>
      ) : (
        <div className="prose prose-invert prose-sm max-w-none text-text-secondary
          prose-headings:text-text-primary prose-headings:font-semibold
          prose-h1:text-lg prose-h2:text-base prose-h3:text-sm
          prose-strong:text-text-primary
          prose-a:text-accent prose-a:no-underline hover:prose-a:underline
          prose-code:text-accent prose-code:bg-surface prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:text-xs
          prose-pre:bg-surface prose-pre:border prose-pre:border-border-light
          prose-table:border prose-table:border-border
          prose-th:bg-surface-elevated prose-th:px-3 prose-th:py-2 prose-th:text-text-muted prose-th:text-xs prose-th:uppercase
          prose-td:px-3 prose-td:py-2 prose-td:border-t prose-td:border-border-light
          prose-li:text-text-secondary
          prose-hr:border-border-light
        ">
          <ReactMarkdown>{content}</ReactMarkdown>
        </div>
      )}
    </div>
  );
}