'use client';

import { useEffect, useRef, useState } from 'react';

interface DocViewerProps {
  url: string;
  fileName?: string;
  fallbackText?: string;
}

export default function DocViewer({ url, fileName = '', fallbackText = '' }: DocViewerProps) {
  const containerRef = useRef<HTMLDivElement>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [textContent, setTextContent] = useState<string | null>(null);

  const cleanUrl = url.split('?')[0];
  const isPdf = /\.pdf$/i.test(cleanUrl);
  const isWord = /\.(docx?|rtf)$/i.test(cleanUrl);
  const isTxt = /\.txt$/i.test(cleanUrl);

  useEffect(() => {
    let isMounted = true;
    setLoading(true);
    setError(null);
    setTextContent(null);

    if (!url) {
      setLoading(false);
      return;
    }

    if (isPdf) {
      setLoading(false);
      return;
    }

    if (isTxt) {
      fetch(url)
        .then((res) => {
          if (!res.ok) throw new Error(`HTTP ${res.status}`);
          return res.text();
        })
        .then((text) => {
          if (isMounted) {
            setTextContent(text);
            setLoading(false);
          }
        })
        .catch(() => {
          if (isMounted) {
            setTextContent(fallbackText || 'Unable to load text document content.');
            setLoading(false);
          }
        });
      return;
    }

    if (isWord) {
      fetch(url)
        .then((res) => {
          if (!res.ok) throw new Error(`HTTP ${res.status}`);
          return res.arrayBuffer();
        })
        .then(async (buffer) => {
          if (!isMounted || !containerRef.current) return;
          try {
            const { renderAsync } = await import('docx-preview');
            containerRef.current.innerHTML = '';
            await renderAsync(buffer, containerRef.current, undefined, {
              inWrapper: false,
              ignoreWidth: false,
              ignoreHeight: false,
              experimental: true,
            });
            if (isMounted) setLoading(false);
          } catch (err: any) {
            if (isMounted) {
              if (fallbackText) {
                setTextContent(fallbackText);
              } else {
                setError(err?.message || 'Failed to render Word document');
              }
              setLoading(false);
            }
          }
        })
        .catch(() => {
          if (isMounted) {
            if (fallbackText) {
              setTextContent(fallbackText);
            } else {
              setError('Document file not found on server');
            }
            setLoading(false);
          }
        });
      return;
    }

    // Default/fallback for other file types
    setLoading(false);

    return () => {
      isMounted = false;
    };
  }, [url, isPdf, isWord, isTxt, fallbackText]);

  if (isPdf) {
    return (
      <iframe
        src={url}
        className="w-full h-full border-none bg-white dark:bg-slate-900"
        title="PDF Document Viewer"
      />
    );
  }

  return (
    <div className="w-full h-full relative overflow-y-auto bg-slate-100 dark:bg-slate-950 p-4 custom-scrollbar">
      {loading && (
        <div className="absolute inset-0 z-20 flex flex-col items-center justify-center bg-white/90 dark:bg-slate-900/90 gap-2">
          <i className="fa-solid fa-spinner fa-spin text-2xl text-[#405189]" />
          <span className="text-xs font-semibold text-slate-600 dark:text-slate-300">Rendering document preview…</span>
        </div>
      )}

      {error ? (
        <div className="flex flex-col items-center justify-center min-h-[300px] h-full text-center p-6 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800">
          <i className="fa-solid fa-triangle-exclamation text-amber-500 text-3xl mb-2" />
          <h4 className="text-sm font-bold text-slate-800 dark:text-slate-200">Unable to preview document file</h4>
          <p className="text-xs text-slate-500 dark:text-slate-400 mt-1 max-w-md">{error}</p>
        </div>
      ) : textContent !== null ? (
        <div className="max-w-3xl mx-auto bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-8 shadow-sm text-slate-800 dark:text-slate-200 text-sm leading-relaxed">
          <div className="border-b border-slate-100 dark:border-slate-800 pb-3 mb-4 flex items-center justify-between">
            <p className="text-[10px] font-extrabold uppercase tracking-wide text-slate-400">Job Description Document</p>
            {fileName && <span className="text-xs font-semibold text-slate-500">{fileName}</span>}
          </div>
          <div className="whitespace-pre-line text-xs font-mono bg-slate-50 dark:bg-slate-950 p-4 border border-slate-100 dark:border-slate-800 rounded-none text-slate-700 dark:text-slate-300">
            {textContent}
          </div>
        </div>
      ) : (
        <div className="max-w-3xl mx-auto bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-6 shadow-sm min-h-[400px]">
          <div ref={containerRef} className="docx-render-container text-slate-900 dark:text-slate-100 text-sm leading-relaxed" />
        </div>
      )}
    </div>
  );
}