frontend/src/components/Docs.tsx

import React, { useState, useEffect } from 'react'
import ReactMarkdown from 'react-markdown'
import rehypeRaw from 'rehype-raw'
import rehypeSanitize from 'rehype-sanitize'
import remarkGfm from 'remark-gfm'
import LoadingSpinner from './LoadingSpinner'

const Docs: React.FC = () => {
  const [markdown, setMarkdown] = useState<string>('')
  const [loading, setLoading] = useState<boolean>(true)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    const fetchMarkdown = async () => {
      try {
        setLoading(true)
        const response = await fetch(
          'https://raw.githubusercontent.com/facebookresearch/omnisealbench/refs/heads/main/README.md'
        )
        if (!response.ok) {
          throw new Error(`Failed to fetch documentation: ${response.status}`)
        }
        const text = await response.text()
        setMarkdown(text)
      } catch (err) {
        console.error('Error fetching markdown:', err)
        setError(err instanceof Error ? err.message : 'Unknown error')
      } finally {
        setLoading(false)
      }
    }

    fetchMarkdown()
  }, [])

  if (loading) {
    return <LoadingSpinner />
  }

  if (error) {
    return (
      <div className="alert alert-error">
        <div>
          <span>Failed to load documentation: {error}</span>
        </div>
      </div>
    )
  }

  return (
    <div className="container mx-auto px-4 py-6">
      <ReactMarkdown
        rehypePlugins={[rehypeRaw, rehypeSanitize]}
        remarkPlugins={[remarkGfm]}
        components={{
          h1: ({ node, ...props }) => (
            <h1 className="text-3xl font-bold mb-4 mt-6 text-primary" {...props} />
          ),
          h2: ({ node, ...props }) => (
            <h2 className="text-2xl font-semibold mb-3 mt-5 text-primary-focus" {...props} />
          ),
          h3: ({ node, ...props }) => (
            <h3 className="text-xl font-medium mb-2 mt-4 text-secondary" {...props} />
          ),
          h4: ({ node, ...props }) => (
            <h4 className="text-lg font-medium mb-2 mt-3 text-secondary-focus" {...props} />
          ),
          p: ({ node, ...props }) => <p className="my-3 text-base leading-relaxed" {...props} />,
          ul: ({ node, ...props }) => <ul className="list-disc pl-6 my-3" {...props} />,
          ol: ({ node, ...props }) => <ol className="list-decimal pl-6 my-3" {...props} />,
          li: ({ node, ...props }) => <li className="mb-1" {...props} />,
          blockquote: ({ node, ...props }) => (
            <blockquote className="border-l-4 border-primary pl-4 italic my-4" {...props} />
          ),
          img: ({ node, ...props }) => (
            <img
              {...props}
              className="max-w-full h-auto rounded-lg shadow-md my-4"
              alt={props.alt || 'Documentation image'}
            />
          ),
          a: ({ node, ...props }) => (
            <a
              {...props}
              target="_blank"
              rel="noopener noreferrer"
              className="link link-primary link-hover"
            />
          ),
          code: ({ node, className, children, ...props }: any) => {
            const isInline = !className
            if (isInline) {
              return (
                <code
                  className="px-1 py-0.5 bg-base-200 rounded text-accent font-mono text-sm"
                  {...props}
                >
                  {children}
                </code>
              )
            }
            return (
              <div className="my-4 rounded-md bg-base-300 overflow-x-auto">
                <pre className="p-4 font-mono text-sm">
                  <code className={`${className || ''}`} {...props}>
                    {children}
                  </code>
                </pre>
              </div>
            )
          },
          table: ({ node, ...props }) => (
            <div className="overflow-x-auto my-4">
              <table className="table table-zebra w-full" {...props} />
            </div>
          ),
          thead: ({ node, ...props }) => <thead className="bg-base-200" {...props} />,
          th: ({ node, ...props }) => <th className="px-4 py-2 text-left" {...props} />,
          td: ({ node, ...props }) => (
            <td className="px-4 py-2 border-t border-base-300" {...props} />
          ),
          hr: ({ node, ...props }) => <hr className="my-6 border-base-300" {...props} />,
        }}
      >
        {markdown}
      </ReactMarkdown>
    </div>
  )
}

export default Docs