/**
 * Study Report Viewer
 * Displays the STUDY_REPORT.md file with proper markdown rendering
 * Includes math equation support via KaTeX and syntax highlighting
 */

import { useState, useEffect } from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';
import 'katex/dist/katex.min.css';
import { FileText, X, ExternalLink, RefreshCw } from 'lucide-react';

interface StudyReportViewerProps {
  studyId: string;
  studyPath?: string;
}

export function StudyReportViewer({ studyId, studyPath }: StudyReportViewerProps) {
  const [isOpen, setIsOpen] = useState(false);
  const [markdown, setMarkdown] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const fetchReport = async () => {
    setLoading(true);
    setError(null);
    try {
      const response = await fetch(`/api/optimization/studies/${studyId}/report`);
      if (!response.ok) {
        if (response.status === 404) {
          setError('No STUDY_REPORT.md found for this study');
        } else {
          throw new Error(`HTTP ${response.status}`);
        }
        return;
      }
      const data = await response.json();
      setMarkdown(data.content);
    } catch (err) {
      setError(`Failed to load report: ${err}`);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    if (isOpen && !markdown) {
      fetchReport();
    }
  }, [isOpen, studyId]);

  if (!isOpen) {
    return (
      <button
        onClick={() => setIsOpen(true)}
        className="flex items-center gap-2 px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg transition-colors text-sm font-medium"
      >
        <FileText size={16} />
        Study Report
      </button>
    );
  }

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70">
      <div className="bg-dark-800 rounded-xl shadow-2xl w-[95vw] max-w-7xl h-[90vh] flex flex-col border border-dark-600">
        {/* Header */}
        <div className="flex items-center justify-between px-6 py-4 border-b border-dark-600">
          <div className="flex items-center gap-3">
            <FileText className="text-primary-400" size={24} />
            <div>
              <h2 className="text-lg font-semibold text-dark-100">Study Report</h2>
              <p className="text-sm text-dark-400">{studyId}/STUDY_REPORT.md</p>
            </div>
          </div>
          <div className="flex items-center gap-2">
            <button
              onClick={fetchReport}
              className="p-2 hover:bg-dark-600 rounded-lg transition-colors"
              title="Refresh"
            >
              <RefreshCw size={18} className={`text-dark-300 ${loading ? 'animate-spin' : ''}`} />
            </button>
            {studyPath && (
              <a
                href={`file:///${studyPath.replace(/\\/g, '/')}/STUDY_REPORT.md`}
                target="_blank"
                rel="noopener noreferrer"
                className="p-2 hover:bg-dark-600 rounded-lg transition-colors"
                title="Open in editor"
              >
                <ExternalLink size={18} className="text-dark-300" />
              </a>
            )}
            <button
              onClick={() => setIsOpen(false)}
              className="p-2 hover:bg-dark-600 rounded-lg transition-colors"
            >
              <X size={20} className="text-dark-300" />
            </button>
          </div>
        </div>

        {/* Content */}
        <div className="flex-1 overflow-auto p-8 bg-dark-700">
          {loading && (
            <div className="flex items-center justify-center h-full">
              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-400"></div>
            </div>
          )}

          {error && (
            <div className="flex flex-col items-center justify-center h-full text-dark-400">
              <FileText size={48} className="mb-4 opacity-50" />
              <p>{error}</p>
              <button
                onClick={fetchReport}
                className="mt-4 px-4 py-2 text-sm bg-dark-600 hover:bg-dark-500 text-dark-200 rounded-lg transition-colors"
              >
                Try Again
              </button>
            </div>
          )}

          {markdown && !loading && (
            <article className="markdown-body">
              <ReactMarkdown
                remarkPlugins={[remarkGfm, [remarkMath, { singleDollarTextMath: false }]]}
                rehypePlugins={[[rehypeKatex, { strict: false, trust: true, output: 'html' }]]}
                components={{
                  // Custom heading styles
                  h1: ({children}) => (
                    <h1 className="text-3xl font-bold text-dark-50 mb-6 pb-3 border-b border-dark-500">
                      {children}
                    </h1>
                  ),
                  h2: ({children}) => (
                    <h2 className="text-2xl font-semibold text-dark-100 mt-8 mb-4 pb-2 border-b border-dark-600">
                      {children}
                    </h2>
                  ),
                  h3: ({children}) => (
                    <h3 className="text-xl font-semibold text-dark-100 mt-6 mb-3">
                      {children}
                    </h3>
                  ),
                  h4: ({children}) => (
                    <h4 className="text-lg font-medium text-dark-200 mt-4 mb-2">
                      {children}
                    </h4>
                  ),
                  // Paragraph styling
                  p: ({children}) => (
                    <p className="text-dark-200 leading-relaxed mb-4">
                      {children}
                    </p>
                  ),
                  // List styling
                  ul: ({children}) => (
                    <ul className="list-disc list-inside text-dark-200 mb-4 space-y-1 ml-2">
                      {children}
                    </ul>
                  ),
                  ol: ({children}) => (
                    <ol className="list-decimal list-inside text-dark-200 mb-4 space-y-1 ml-2">
                      {children}
                    </ol>
                  ),
                  li: ({children}) => (
                    <li className="text-dark-200 leading-relaxed">
                      {children}
                    </li>
                  ),
                  // Strong/bold text
                  strong: ({children}) => (
                    <strong className="font-semibold text-dark-100">
                      {children}
                    </strong>
                  ),
                  // Emphasis/italic
                  em: ({children}) => (
                    <em className="italic text-dark-200">
                      {children}
                    </em>
                  ),
                  // Links
                  a: ({href, children}) => (
                    <a
                      href={href}
                      className="text-primary-400 hover:text-primary-300 underline decoration-primary-400/30 hover:decoration-primary-300"
                      target="_blank"
                      rel="noopener noreferrer"
                    >
                      {children}
                    </a>
                  ),
                  // Inline code
                  code: ({className, children, ...props}) => {
                    const isInline = !className;
                    if (isInline) {
                      return (
                        <code className="bg-dark-800 text-primary-300 px-1.5 py-0.5 rounded text-sm font-mono">
                          {children}
                        </code>
                      );
                    }
                    // Code block
                    return (
                      <code className={`${className} text-sm`} {...props}>
                        {children}
                      </code>
                    );
                  },
                  // Code blocks with pre wrapper
                  pre: ({children}) => (
                    <pre className="bg-dark-900 text-dark-100 p-4 rounded-lg overflow-x-auto mb-4 text-sm font-mono border border-dark-600">
                      {children}
                    </pre>
                  ),
                  // Blockquotes
                  blockquote: ({children}) => (
                    <blockquote className="border-l-4 border-primary-500 pl-4 py-1 my-4 bg-dark-800/50 rounded-r italic text-dark-300">
                      {children}
                    </blockquote>
                  ),
                  // Tables
                  table: ({children}) => (
                    <div className="overflow-x-auto mb-6">
                      <table className="min-w-full border-collapse border border-dark-500 text-sm">
                        {children}
                      </table>
                    </div>
                  ),
                  thead: ({children}) => (
                    <thead className="bg-dark-600">
                      {children}
                    </thead>
                  ),
                  th: ({children}) => (
                    <th className="border border-dark-500 px-4 py-2 text-left font-semibold text-dark-100">
                      {children}
                    </th>
                  ),
                  td: ({children}) => (
                    <td className="border border-dark-500 px-4 py-2 text-dark-200">
                      {children}
                    </td>
                  ),
                  tr: ({children}) => (
                    <tr className="hover:bg-dark-600/50 transition-colors">
                      {children}
                    </tr>
                  ),
                  // Horizontal rule
                  hr: () => (
                    <hr className="border-dark-500 my-8" />
                  ),
                  // Images
                  img: ({src, alt}) => (
                    <img
                      src={src}
                      alt={alt || ''}
                      className="max-w-full h-auto rounded-lg border border-dark-500 my-4"
                    />
                  ),
                }}
              >
                {markdown}
              </ReactMarkdown>
            </article>
          )}
        </div>
      </div>
    </div>
  );
}