import { useMemo, useRef } from 'react';
import { Loader2, FolderArchive } from 'lucide-react';
import { getLang, getRawUrl, getArchiveBaseName } from './file-types';
import { useFileViewer } from './FileViewerContext';
import { PdfRenderer } from './renderers/PdfRenderer';
import { ImageRenderer } from './renderers/ImageRenderer';
import { VideoRenderer } from './renderers/VideoRenderer';
import { AudioRenderer } from './renderers/AudioRenderer';
import { CodeRenderer } from './renderers/CodeRenderer';
import { MarkdownRenderer } from './renderers/MarkdownRenderer';
import { TextRenderer } from './renderers/TextRenderer';
import { ScrollToTopButton } from './renderers/ScrollToTopButton';
import { EditorRenderer } from './renderers/EditorRenderer';
import { JsonEditorRenderer } from './renderers/JsonEditorRenderer';

export const FileViewerBody = () => {
  const { filePath, fileName, root, fileType, content, loading, error, autoPlay, editing, setContent } =
    useFileViewer();
  const scrollRef = useRef<HTMLDivElement>(null);

  const videoSrc = fileType === 'video' ? getRawUrl(filePath, root) : '';

  const isJson = useMemo(() => {
    if (!content) return false;
    if (/\.jsonc?$/i.test(fileName)) return true;
    try {
      const parsed = JSON.parse(content);
      return typeof parsed === 'object' && parsed !== null;
    } catch {
      return false;
    }
  }, [content, fileName]);

  return (
    <div ref={scrollRef} className="h-full overflow-auto">
      {loading ? (
        <div className="flex items-center justify-center h-full">
          <Loader2 className="h-6 w-6 text-duck-teal animate-spin" />
        </div>
      ) : error ? (
        <div className="flex items-center justify-center h-full">
          <span className="text-sm text-red-500">{error}</span>
        </div>
      ) : fileType === 'pdf' ? (
        <PdfRenderer src={getRawUrl(filePath, root)} />
      ) : fileType === 'archive' ? (
        <div className="flex flex-col items-center justify-center h-full gap-3 text-duck-dark/50">
          <FolderArchive className="h-10 w-10" />
          <span className="text-sm">Archive file</span>
          <span className="text-xs">{getArchiveBaseName(fileName)}</span>
        </div>
      ) : fileType === 'image' ? (
        <ImageRenderer src={getRawUrl(filePath, root)} fileName={fileName} />
      ) : fileType === 'video' ? (
        <VideoRenderer src={videoSrc} fileName={fileName} filePath={filePath} root={root} />
      ) : fileType === 'audio' ? (
        <AudioRenderer src={getRawUrl(filePath, root)} fileName={fileName} autoPlay={autoPlay} />
      ) : content !== null && editing && isJson ? (
        <JsonEditorRenderer content={content} filePath={filePath} root={root} onSave={setContent} />
      ) : content !== null && editing ? (
        <EditorRenderer content={content} fileName={fileName} filePath={filePath} root={root} onSave={setContent} />
      ) : content !== null && isJson ? (
        <div>
          <CodeRenderer content={content} lang="json" />
          <ScrollToTopButton scrollContainer={scrollRef} />
        </div>
      ) : content !== null ? (
        fileType === 'code' ? (
          <div>
            <CodeRenderer content={content} lang={getLang(fileName)} />
            <ScrollToTopButton scrollContainer={scrollRef} />
          </div>
        ) : (
          <div className="px-8 py-6">
            {fileType === 'markdown' ? (
              <MarkdownRenderer content={content} scrollContainer={scrollRef} />
            ) : (
              <TextRenderer content={content} />
            )}
            <ScrollToTopButton scrollContainer={scrollRef} />
          </div>
        )
      ) : null}
    </div>
  );
};
