import { useState, useEffect, useRef, useCallback } from 'react';
import {
  X,
  Download,
  Loader2,
  Music,
  Film,
  Image,
  FileType2,
  Maximize2,
  Minimize2,
  Square,
  Play,
  Pause,
  Volume2,
  VolumeX,
  ZoomIn,
  ZoomOut,
  RotateCw,
  ArrowUp,
} from 'lucide-react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import rehypeRaw from 'rehype-raw';
import rehypeSlug from 'rehype-slug';
import { Dialog, DialogOverlay, DialogPortal } from '@/components/ui/dialog';
import * as DialogPrimitive from '@radix-ui/react-dialog';
import { cardStyle } from '@/components/Card';
import { useFiles } from 'apps/FileBrowser';
import { getHeaders } from 'hooks/useClient';
import { config } from 'config';
import { toast } from 'sonner';
import { getIcon } from 'material-file-icons';

type FileViewerProps = {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  filePath: string;
  fileName: string;
  root?: string;
};

type FileType = 'markdown' | 'audio' | 'video' | 'image' | 'pdf' | 'code' | 'text';

const AUDIO_EXTS = ['mp3', 'wav', 'flac', 'ogg', 'oga', 'opus', 'aac', 'm4a', 'wma'];
const NATIVE_VIDEO_EXTS = ['mp4', 'm4v', 'webm', 'ogv', 'mov'];
const TRANSCODE_VIDEO_EXTS = [
  'mkv',
  'avi',
  'wmv',
  'flv',
  'ts',
  'mts',
  'm2ts',
  '3gp',
  '3g2',
  'vob',
  'divx',
  'asf',
  'f4v',
  'rm',
  'rmvb',
];
const ALL_VIDEO_EXTS = [...NATIVE_VIDEO_EXTS, ...TRANSCODE_VIDEO_EXTS];
const IMAGE_EXTS = [
  'jpg',
  'jpeg',
  'png',
  'gif',
  'webp',
  'svg',
  'bmp',
  'ico',
  'tiff',
  'tif',
  'avif',
  'heic',
  'heif',
  'jfif',
  'apng',
];

// Map file extension to shiki language identifier
const EXT_TO_LANG: Record<string, string> = {
  js: 'javascript',
  mjs: 'javascript',
  cjs: 'javascript',
  jsx: 'jsx',
  ts: 'typescript',
  mts: 'typescript',
  cts: 'typescript',
  tsx: 'tsx',
  json: 'json',
  jsonc: 'jsonc',
  html: 'html',
  htm: 'html',
  css: 'css',
  scss: 'scss',
  sass: 'sass',
  less: 'less',
  py: 'python',
  rb: 'ruby',
  rs: 'rust',
  go: 'go',
  java: 'java',
  kt: 'kotlin',
  kts: 'kotlin',
  swift: 'swift',
  c: 'c',
  h: 'c',
  cpp: 'cpp',
  cc: 'cpp',
  cxx: 'cpp',
  hpp: 'cpp',
  cs: 'csharp',
  php: 'php',
  sh: 'bash',
  bash: 'bash',
  zsh: 'bash',
  sql: 'sql',
  yaml: 'yaml',
  yml: 'yaml',
  toml: 'toml',
  xml: 'xml',
  xsl: 'xml',
  lua: 'lua',
  r: 'r',
  dart: 'dart',
  vue: 'vue',
  svelte: 'svelte',
  graphql: 'graphql',
  gql: 'graphql',
  dockerfile: 'dockerfile',
  makefile: 'makefile',
  zig: 'zig',
  elixir: 'elixir',
  ex: 'elixir',
  exs: 'elixir',
};

function getFileType(name: string): FileType {
  const ext = name.split('.').pop()?.toLowerCase() ?? '';
  const baseName = name.toLowerCase();
  if (['md', 'mdx', 'markdown'].includes(ext)) return 'markdown';
  if (ext === 'pdf') return 'pdf';
  if (EXT_TO_LANG[ext]) return 'code';
  if (AUDIO_EXTS.includes(ext)) return 'audio';
  if (ALL_VIDEO_EXTS.includes(ext)) return 'video';
  if (IMAGE_EXTS.includes(ext)) return 'image';
  if (baseName === 'dockerfile' || baseName === 'makefile') return 'code';
  return 'text';
}

function getLang(name: string): string {
  const ext = name.split('.').pop()?.toLowerCase() ?? '';
  const baseName = name.toLowerCase();
  if (baseName === 'dockerfile') return 'dockerfile';
  if (baseName === 'makefile') return 'makefile';
  return EXT_TO_LANG[ext] ?? 'text';
}

function getExt(name: string): string {
  return name.split('.').pop()?.toLowerCase() ?? '';
}

function needsTranscode(name: string): boolean {
  return TRANSCODE_VIDEO_EXTS.includes(getExt(name));
}

function getRawUrl(filePath: string, root?: string): string {
  const headers = getHeaders();
  const token = headers['Authorization']?.replace('Bearer ', '') ?? '';
  const rootParam = root && root !== 'home' ? `&root=${encodeURIComponent(root)}` : '';
  return `${config.API_URL}/file-browser/raw?path=${encodeURIComponent(filePath)}&token=${encodeURIComponent(token)}${rootParam}`;
}

function getTranscodeUrl(filePath: string, root?: string, t = '0'): string {
  const headers = getHeaders();
  const token = headers['Authorization']?.replace('Bearer ', '') ?? '';
  const rootParam = root && root !== 'home' ? `&root=${encodeURIComponent(root)}` : '';
  return `${config.API_URL}/file-browser/transcode?path=${encodeURIComponent(filePath)}&t=${encodeURIComponent(t)}&token=${encodeURIComponent(token)}${rootParam}`;
}

function formatTime(s: number): string {
  if (!isFinite(s) || isNaN(s)) return '0:00';
  const h = Math.floor(s / 3600);
  const m = Math.floor((s % 3600) / 60);
  const sec = Math.floor(s % 60);
  if (h > 0) return `${h}:${m.toString().padStart(2, '0')}:${sec.toString().padStart(2, '0')}`;
  return `${m}:${sec.toString().padStart(2, '0')}`;
}

// ── Shared seek bar hook ──
function useSeekBar(mediaRef: React.RefObject<HTMLMediaElement | null>, duration: number) {
  const barRef = useRef<HTMLDivElement>(null);

  const seekTo = useCallback(
    (clientX: number) => {
      const el = mediaRef.current;
      const bar = barRef.current;
      if (!el || !bar || !duration) return;
      const rect = bar.getBoundingClientRect();
      const pct = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
      el.currentTime = pct * duration;
    },
    [duration, mediaRef],
  );

  const onSeekDown = useCallback(
    (e: React.MouseEvent<HTMLDivElement>) => {
      e.preventDefault();
      seekTo(e.clientX);
      const onMove = (ev: MouseEvent) => seekTo(ev.clientX);
      const onUp = () => {
        window.removeEventListener('mousemove', onMove);
        window.removeEventListener('mouseup', onUp);
      };
      window.addEventListener('mousemove', onMove);
      window.addEventListener('mouseup', onUp);
    },
    [seekTo],
  );

  return { barRef, onSeekDown };
}

// ── Seek bar component ──
function SeekBar({
  barRef,
  onSeekDown,
  pct,
  trackClass = 'bg-duck-dark/10',
  fillClass = 'bg-duck-teal',
  thumbClass = 'bg-duck-teal border-white',
}: {
  barRef: React.RefObject<HTMLDivElement | null>;
  onSeekDown: (e: React.MouseEvent<HTMLDivElement>) => void;
  pct: number;
  trackClass?: string;
  fillClass?: string;
  thumbClass?: string;
}) {
  return (
    <div ref={barRef} onMouseDown={onSeekDown} className="relative h-4 flex items-center cursor-pointer group">
      <div className={`absolute left-0 right-0 h-1.5 rounded-full ${trackClass} pointer-events-none`}>
        <div className={`absolute inset-y-0 left-0 rounded-full ${fillClass}`} style={{ width: `${pct}%` }} />
      </div>
      <div
        className={`absolute top-1/2 -translate-y-1/2 w-3.5 h-3.5 rounded-full shadow-md border-2 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none ${thumbClass} ${fillClass}`}
        style={{ left: `calc(${pct}% - 7px)` }}
      />
    </div>
  );
}

// ── Copy button for code blocks ──
function CopyButton({ text }: { text: string }) {
  const [copied, setCopied] = useState(false);
  return (
    <button
      onClick={() => {
        navigator.clipboard.writeText(text);
        setCopied(true);
        setTimeout(() => setCopied(false), 1500);
      }}
      className="absolute top-2 right-2 px-2 py-1 text-[10px] font-mono rounded bg-white/10 text-white/60 hover:text-white hover:bg-white/20 transition-colors cursor-pointer"
    >
      {copied ? 'Copied!' : 'Copy'}
    </button>
  );
}

// ── Highlighted code block for markdown ──
function HighlightedCodeBlock({ code, lang }: { code: string; lang: string }) {
  const [html, setHtml] = useState<string | null>(null);

  useEffect(() => {
    let cancelled = false;
    import('shiki')
      .then(({ codeToHtml }) => codeToHtml(code, { lang, theme: 'github-dark-default' }))
      .then((result) => {
        if (!cancelled) setHtml(result);
      })
      .catch(() => {});
    return () => {
      cancelled = true;
    };
  }, [code, lang]);

  if (html) {
    return (
      <div className="relative my-4">
        <CopyButton text={code} />
        {lang && (
          <span className="absolute top-2 left-3 text-[10px] font-mono text-white/30 uppercase tracking-wider z-10">
            {lang}
          </span>
        )}
        <div
          className="[&_pre]:rounded-lg [&_pre]:p-4 [&_pre]:pt-8 [&_pre]:overflow-x-auto [&_pre]:text-sm [&_pre]:font-mono [&_pre]:leading-relaxed [&_pre]:border [&_pre]:border-white/5 [&_code]:font-mono"
          dangerouslySetInnerHTML={{ __html: html }}
        />
      </div>
    );
  }

  return (
    <pre className="relative rounded-lg bg-[#0d1117] text-[#e6edf3] p-4 overflow-x-auto text-sm font-mono leading-relaxed my-4 border border-white/5">
      <CopyButton text={code} />
      {lang && (
        <span className="absolute top-2 left-3 text-[10px] font-mono text-white/30 uppercase tracking-wider">
          {lang}
        </span>
      )}
      <code className="block pt-4">{code}</code>
    </pre>
  );
}

// ── Scroll to top button ──
function ScrollToTopButton({ scrollContainer }: { scrollContainer: React.RefObject<HTMLDivElement | null> }) {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const el = scrollContainer.current;
    if (!el) return;
    const onScroll = () => setVisible(el.scrollTop > 200);
    el.addEventListener('scroll', onScroll, { passive: true });
    return () => el.removeEventListener('scroll', onScroll);
  }, [scrollContainer]);

  if (!visible) return null;

  return (
    <button
      onClick={() => scrollContainer.current?.scrollTo({ top: 0, behavior: 'smooth' })}
      className="sticky bottom-4 float-right mr-4 z-10 p-2.5 rounded-full bg-duck-teal text-white shadow-lg hover:bg-duck-teal/90 active:scale-95 transition-all cursor-pointer"
      title="Scroll to top"
    >
      <ArrowUp className="h-4 w-4" />
    </button>
  );
}

// ── Markdown renderer ──
const MarkdownRenderer = ({
  content,
  scrollContainer,
}: {
  content: string;
  scrollContainer: React.RefObject<HTMLDivElement | null>;
}) => {
  const handleAnchorClick = useCallback(
    (ev: React.MouseEvent<HTMLElement>) => {
      const target = (ev.target as HTMLElement).closest('a');
      if (!target) return;
      const href = target.getAttribute('href');
      if (!href?.startsWith('#')) return;
      ev.preventDefault();
      const id = href.slice(1);
      const el = scrollContainer.current?.querySelector(`#${CSS.escape(id)}`);
      if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
    },
    [scrollContainer],
  );

  return (
    <article className="file-viewer-md" onClick={handleAnchorClick}>
      <ReactMarkdown
        remarkPlugins={[remarkGfm]}
        rehypePlugins={[rehypeRaw, rehypeSlug]}
        components={{
          pre({ children }) {
            return <div className="relative">{children}</div>;
          },
          code({ className, children, ...props }) {
            const isBlock = className?.startsWith('language-');
            const lang = className?.replace('language-', '') ?? '';
            const text = String(children).replace(/\n$/, '');

            if (!isBlock) {
              return (
                <code
                  className="px-1.5 py-0.5 rounded bg-duck-teal/10 text-duck-teal text-[0.85em] font-mono"
                  {...props}
                >
                  {children}
                </code>
              );
            }

            return <HighlightedCodeBlock code={text} lang={lang} />;
          },
        }}
      >
        {content}
      </ReactMarkdown>
    </article>
  );
};

// ── Text renderer ──
const TextRenderer = ({ content }: { content: string }) => (
  <pre className="whitespace-pre-wrap font-mono text-sm text-duck-dark leading-relaxed p-4">{content}</pre>
);

// ── Code renderer with syntax highlighting ──
const CodeRenderer = ({ content, lang }: { content: string; lang: string }) => {
  const [html, setHtml] = useState<string | null>(null);

  useEffect(() => {
    let cancelled = false;
    import('shiki')
      .then(({ codeToHtml }) => codeToHtml(content, { lang, theme: 'github-dark-default' }))
      .then((result) => {
        if (!cancelled) setHtml(result);
      })
      .catch(() => {
        if (!cancelled) setHtml(null);
      });
    return () => {
      cancelled = true;
    };
  }, [content, lang]);

  if (html === null) {
    return <TextRenderer content={content} />;
  }

  return (
    <div
      className="code-highlight text-sm leading-relaxed [&_pre]:p-4 [&_pre]:overflow-x-auto [&_pre]:rounded-none [&_code]:font-mono"
      dangerouslySetInnerHTML={{ __html: html }}
    />
  );
};

// ── Audio renderer ──
const AudioRenderer = ({ src, fileName }: { src: string; fileName: string }) => {
  const audioRef = useRef<HTMLAudioElement>(null);
  const [playing, setPlaying] = useState(false);
  const [currentTime, setCurrent] = useState(0);
  const [duration, setDuration] = useState(0);
  const [volume, setVolume] = useState(1);
  const [muted, setMuted] = useState(false);
  const [loaded, setLoaded] = useState(false);
  const [error, setError] = useState(false);
  const { barRef, onSeekDown } = useSeekBar(audioRef, duration);

  const ext = fileName.split('.').pop()?.toUpperCase() ?? 'AUDIO';

  useEffect(() => {
    const a = audioRef.current;
    if (!a) return;
    const onLoaded = () => {
      setDuration(a.duration);
      setLoaded(true);
    };
    const onTime = () => setCurrent(a.currentTime);
    const onEnded = () => setPlaying(false);
    const onError = () => setError(true);
    a.addEventListener('loadedmetadata', onLoaded);
    a.addEventListener('timeupdate', onTime);
    a.addEventListener('ended', onEnded);
    a.addEventListener('error', onError);
    return () => {
      a.removeEventListener('loadedmetadata', onLoaded);
      a.removeEventListener('timeupdate', onTime);
      a.removeEventListener('ended', onEnded);
      a.removeEventListener('error', onError);
    };
  }, []);

  const togglePlay = useCallback(() => {
    const a = audioRef.current;
    if (!a) return;
    if (playing) a.pause();
    else a.play();
    setPlaying(!playing);
  }, [playing]);

  const changeVolume = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    const v = parseFloat(e.target.value);
    setVolume(v);
    setMuted(v === 0);
    if (audioRef.current) audioRef.current.volume = v;
  }, []);

  const toggleMute = useCallback(() => {
    const a = audioRef.current;
    if (!a) return;
    if (muted) {
      a.volume = volume || 1;
      setMuted(false);
    } else {
      a.volume = 0;
      setMuted(true);
    }
  }, [muted, volume]);

  const pct = duration > 0 ? (currentTime / duration) * 100 : 0;

  if (error) {
    return (
      <div className="flex items-center justify-center h-full">
        <span className="text-sm text-red-500">Failed to load audio file</span>
      </div>
    );
  }

  return (
    <div className="flex items-center justify-center h-full px-8">
      <audio ref={audioRef} src={src} preload="metadata" />
      <div className="w-full max-w-xl space-y-6">
        <div className="flex flex-col items-center gap-4">
          <div className="relative w-32 h-32 rounded-2xl bg-gradient-to-br from-duck-teal/20 via-duck-forest/10 to-duck-yellow/20 border-2 border-duck-dark/10 flex items-center justify-center shadow-lg">
            <Music className="h-12 w-12 text-duck-teal/60" />
            <span className="absolute bottom-2 right-2 text-[9px] font-mono font-bold text-duck-dark/30 tracking-wider">
              {ext}
            </span>
          </div>
          <div className="text-center">
            <p className="text-sm font-semibold text-duck-dark truncate max-w-xs">{fileName}</p>
            {loaded && <p className="text-xs text-duck-dark/40 mt-0.5">{formatTime(duration)}</p>}
          </div>
        </div>
        <div className="space-y-1.5">
          <SeekBar barRef={barRef} onSeekDown={onSeekDown} pct={pct} />
          <div className="flex justify-between text-[10px] font-mono text-duck-dark/40">
            <span>{formatTime(currentTime)}</span>
            <span>{formatTime(duration)}</span>
          </div>
        </div>
        <div className="flex items-center justify-center gap-6">
          <div className="flex items-center gap-2">
            <button
              onClick={toggleMute}
              className="p-1.5 text-duck-dark/40 hover:text-duck-dark transition-colors cursor-pointer"
            >
              {muted ? <VolumeX className="h-4 w-4" /> : <Volume2 className="h-4 w-4" />}
            </button>
            <input
              type="range"
              min={0}
              max={1}
              step={0.01}
              value={muted ? 0 : volume}
              onChange={changeVolume}
              className="w-20 h-1 accent-duck-teal cursor-pointer"
            />
          </div>
          <button
            onClick={togglePlay}
            disabled={!loaded}
            className="w-14 h-14 rounded-full bg-duck-teal text-white flex items-center justify-center shadow-lg hover:bg-duck-teal/90 disabled:opacity-40 transition-all cursor-pointer active:scale-95"
          >
            {!loaded ? (
              <Loader2 className="h-6 w-6 animate-spin" />
            ) : playing ? (
              <Pause className="h-6 w-6" />
            ) : (
              <Play className="h-6 w-6 ml-0.5" />
            )}
          </button>
          <div className="w-[104px]" />
        </div>
      </div>
    </div>
  );
};

// ── Video renderer ──
const VideoRenderer = ({ src, fileName }: { src: string; fileName: string }) => {
  const videoRef = useRef<HTMLVideoElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);
  const hideTimer = useRef<ReturnType<typeof setTimeout>>(null);
  const [playing, setPlaying] = useState(false);
  const [currentTime, setCurrent] = useState(0);
  const [duration, setDuration] = useState(0);
  const [volume, setVolume] = useState(1);
  const [muted, setMuted] = useState(false);
  const [loaded, setLoaded] = useState(false);
  const [error, setError] = useState(false);
  const [showControls, setShowControls] = useState(true);
  const [isFullscreen, setIsFullscreen] = useState(false);
  const { barRef, onSeekDown } = useSeekBar(videoRef, duration);

  useEffect(() => {
    const v = videoRef.current;
    if (!v) return;
    const onLoaded = () => {
      setDuration(v.duration);
      setLoaded(true);
    };
    const onTime = () => setCurrent(v.currentTime);
    const onPlay = () => setPlaying(true);
    const onPause = () => setPlaying(false);
    const onEnded = () => setPlaying(false);
    const onError = () => setError(true);
    v.addEventListener('loadedmetadata', onLoaded);
    v.addEventListener('timeupdate', onTime);
    v.addEventListener('play', onPlay);
    v.addEventListener('pause', onPause);
    v.addEventListener('ended', onEnded);
    v.addEventListener('error', onError);
    return () => {
      v.removeEventListener('loadedmetadata', onLoaded);
      v.removeEventListener('timeupdate', onTime);
      v.removeEventListener('play', onPlay);
      v.removeEventListener('pause', onPause);
      v.removeEventListener('ended', onEnded);
      v.removeEventListener('error', onError);
    };
  }, []);

  // Fullscreen change detection
  useEffect(() => {
    const onChange = () => setIsFullscreen(!!document.fullscreenElement);
    document.addEventListener('fullscreenchange', onChange);
    return () => document.removeEventListener('fullscreenchange', onChange);
  }, []);

  // Auto-hide controls
  const resetHideTimer = useCallback(() => {
    setShowControls(true);
    if (hideTimer.current) clearTimeout(hideTimer.current);
    hideTimer.current = setTimeout(() => {
      if (videoRef.current && !videoRef.current.paused) setShowControls(false);
    }, 2500);
  }, []);

  const togglePlay = useCallback(() => {
    const v = videoRef.current;
    if (!v) return;
    if (v.paused) v.play();
    else v.pause();
  }, []);

  const changeVolume = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    const val = parseFloat(e.target.value);
    setVolume(val);
    setMuted(val === 0);
    if (videoRef.current) videoRef.current.volume = val;
  }, []);

  const toggleMute = useCallback(() => {
    const v = videoRef.current;
    if (!v) return;
    if (muted) {
      v.volume = volume || 1;
      setMuted(false);
    } else {
      v.volume = 0;
      setMuted(true);
    }
  }, [muted, volume]);

  const toggleFullscreen = useCallback(() => {
    const c = containerRef.current;
    if (!c) return;
    if (document.fullscreenElement) document.exitFullscreen();
    else c.requestFullscreen();
  }, []);

  const pct = duration > 0 ? (currentTime / duration) * 100 : 0;

  if (error) {
    return (
      <div className="flex items-center justify-center h-full">
        <span className="text-sm text-red-500">Failed to load video</span>
      </div>
    );
  }

  return (
    <div
      ref={containerRef}
      className="relative w-full h-full bg-black flex items-center justify-center group"
      onMouseMove={resetHideTimer}
      onMouseLeave={() => {
        if (playing) setShowControls(false);
      }}
    >
      <video ref={videoRef} src={src} preload="metadata" className="max-w-full max-h-full" onClick={togglePlay} />

      {/* Big center play button when paused */}
      {loaded && !playing && (
        <button onClick={togglePlay} className="absolute inset-0 flex items-center justify-center cursor-pointer">
          <div className="w-16 h-16 rounded-full bg-black/50 backdrop-blur-sm flex items-center justify-center">
            <Play className="h-8 w-8 text-white ml-1" />
          </div>
        </button>
      )}

      {/* Loading spinner */}
      {!loaded && (
        <div className="absolute inset-0 flex items-center justify-center">
          <Loader2 className="h-8 w-8 text-white animate-spin" />
        </div>
      )}

      {/* Bottom controls overlay */}
      <div
        className={`absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent pt-12 pb-3 px-4 transition-opacity duration-300 ${
          showControls || !playing ? 'opacity-100' : 'opacity-0 pointer-events-none'
        }`}
      >
        {/* Seek bar */}
        <SeekBar
          barRef={barRef}
          onSeekDown={onSeekDown}
          pct={pct}
          trackClass="bg-white/20"
          fillClass="bg-duck-teal"
          thumbClass="bg-duck-teal border-white"
        />

        {/* Controls row */}
        <div className="flex items-center gap-3 mt-1">
          <button onClick={togglePlay} className="p-1 text-white hover:text-duck-teal transition-colors cursor-pointer">
            {playing ? <Pause className="h-5 w-5" /> : <Play className="h-5 w-5" />}
          </button>

          <div className="flex items-center gap-1.5">
            <button
              onClick={toggleMute}
              className="p-1 text-white/70 hover:text-white transition-colors cursor-pointer"
            >
              {muted ? <VolumeX className="h-4 w-4" /> : <Volume2 className="h-4 w-4" />}
            </button>
            <input
              type="range"
              min={0}
              max={1}
              step={0.01}
              value={muted ? 0 : volume}
              onChange={changeVolume}
              className="w-16 h-1 accent-duck-teal cursor-pointer"
            />
          </div>

          <span className="text-xs font-mono text-white/60 select-none">
            {formatTime(currentTime)} / {formatTime(duration)}
          </span>

          <div className="flex-1" />

          <span className="text-[9px] font-mono text-white/30 uppercase tracking-wider">{getExt(fileName)}</span>

          <button
            onClick={toggleFullscreen}
            className="p-1 text-white/70 hover:text-white transition-colors cursor-pointer"
          >
            {isFullscreen ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
          </button>
        </div>
      </div>
    </div>
  );
};

// ── Image renderer ──
const ZOOM_STEPS = [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 5];

const ImageRenderer = ({ src, fileName }: { src: string; fileName: string }) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const minZoom = ZOOM_STEPS[0] ?? 1;
  const maxZoom = ZOOM_STEPS[ZOOM_STEPS.length - 1] ?? 1;
  const [zoom, setZoom] = useState(1);
  const [rotation, setRotation] = useState(0);
  const [loaded, setLoaded] = useState(false);
  const [error, setError] = useState(false);
  const [dragging, setDragging] = useState(false);
  const [offset, setOffset] = useState({ x: 0, y: 0 });
  const dragStart = useRef({ x: 0, y: 0, ox: 0, oy: 0 });

  const zoomIn = useCallback(() => {
    setZoom((z) => {
      const next = ZOOM_STEPS.find((s) => s > z);
      return next ?? z;
    });
  }, []);

  const zoomOut = useCallback(() => {
    setZoom((z) => {
      const prev = [...ZOOM_STEPS].reverse().find((s) => s < z);
      return prev ?? z;
    });
  }, []);

  const resetView = useCallback(() => {
    setZoom(1);
    setRotation(0);
    setOffset({ x: 0, y: 0 });
  }, []);

  const rotate = useCallback(() => {
    setRotation((r) => (r + 90) % 360);
  }, []);

  // Scroll to zoom
  const onWheel = useCallback(
    (e: React.WheelEvent) => {
      e.preventDefault();
      if (e.deltaY < 0) zoomIn();
      else zoomOut();
    },
    [zoomIn, zoomOut],
  );

  // Pan with mouse drag when zoomed
  const onMouseDown = useCallback(
    (e: React.MouseEvent) => {
      if (zoom <= 1) return;
      e.preventDefault();
      setDragging(true);
      dragStart.current = { x: e.clientX, y: e.clientY, ox: offset.x, oy: offset.y };

      const onMove = (ev: MouseEvent) => {
        setOffset({
          x: dragStart.current.ox + (ev.clientX - dragStart.current.x),
          y: dragStart.current.oy + (ev.clientY - dragStart.current.y),
        });
      };
      const onUp = () => {
        setDragging(false);
        window.removeEventListener('mousemove', onMove);
        window.removeEventListener('mouseup', onUp);
      };
      window.addEventListener('mousemove', onMove);
      window.addEventListener('mouseup', onUp);
    },
    [zoom, offset],
  );

  // Reset offset when zoom goes to 1
  useEffect(() => {
    if (zoom <= 1) setOffset({ x: 0, y: 0 });
  }, [zoom]);

  if (error) {
    return (
      <div className="flex items-center justify-center h-full">
        <span className="text-sm text-red-500">Failed to load image</span>
      </div>
    );
  }

  return (
    <div className="relative w-full h-full flex flex-col">
      {/* Image area */}
      <div
        ref={containerRef}
        className={`flex-1 min-h-0 flex items-center justify-center overflow-hidden bg-[repeating-conic-gradient(#e5e7eb_0%_25%,transparent_0%_50%)] bg-[length:16px_16px] ${
          zoom > 1 ? (dragging ? 'cursor-grabbing' : 'cursor-grab') : 'cursor-zoom-in'
        }`}
        onWheel={onWheel}
        onMouseDown={zoom > 1 ? onMouseDown : undefined}
        onClick={zoom <= 1 ? zoomIn : undefined}
      >
        {!loaded && (
          <div className="absolute inset-0 flex items-center justify-center">
            <Loader2 className="h-6 w-6 text-duck-teal animate-spin" />
          </div>
        )}
        <img
          src={src}
          alt={fileName}
          onLoad={() => setLoaded(true)}
          onError={() => setError(true)}
          className="transition-transform duration-150 select-none"
          draggable={false}
          style={{
            transform: `translate(${offset.x}px, ${offset.y}px) scale(${zoom}) rotate(${rotation}deg)`,
            maxWidth: zoom <= 1 ? '100%' : 'none',
            maxHeight: zoom <= 1 ? '100%' : 'none',
            opacity: loaded ? 1 : 0,
          }}
        />
      </div>

      {/* Toolbar */}
      <div className="shrink-0 flex items-center justify-center gap-1 py-2 border-t border-duck-dark/10 bg-white/80">
        <button
          onClick={zoomOut}
          disabled={zoom <= minZoom}
          className="p-1.5 rounded-md text-duck-dark/50 hover:text-duck-dark hover:bg-duck-dark/5 disabled:opacity-30 transition-colors cursor-pointer"
        >
          <ZoomOut className="h-4 w-4" />
        </button>
        <button
          onClick={resetView}
          className="px-2 py-1 rounded-md text-xs font-mono text-duck-dark/50 hover:text-duck-dark hover:bg-duck-dark/5 transition-colors cursor-pointer min-w-[4rem] text-center"
        >
          {Math.round(zoom * 100)}%
        </button>
        <button
          onClick={zoomIn}
          disabled={zoom >= maxZoom}
          className="p-1.5 rounded-md text-duck-dark/50 hover:text-duck-dark hover:bg-duck-dark/5 disabled:opacity-30 transition-colors cursor-pointer"
        >
          <ZoomIn className="h-4 w-4" />
        </button>
        <div className="w-px h-4 bg-duck-dark/10 mx-1" />
        <button
          onClick={rotate}
          className="p-1.5 rounded-md text-duck-dark/50 hover:text-duck-dark hover:bg-duck-dark/5 transition-colors cursor-pointer"
        >
          <RotateCw className="h-4 w-4" />
        </button>
      </div>
    </div>
  );
};

// ── PDF renderer ──
const PdfRenderer = ({ src }: { src: string }) => (
  <iframe src={src} className="w-full h-full border-0" title="PDF viewer" />
);

// ── File Viewer modal ──
export const FileViewer = ({ open, onOpenChange, filePath, fileName, root }: FileViewerProps) => {
  const [content, setContent] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [expanded, setExpanded] = useState(false);
  const [ttsLoading, setTtsLoading] = useState(false);
  const [ttsPlaying, setTtsPlaying] = useState(false);
  const ttsAudioRef = useRef<HTMLAudioElement | null>(null);
  const ttsUrlRef = useRef<string | null>(null);
  const scrollRef = useRef<HTMLDivElement>(null);
  const files = useFiles(root);
  const fileType = getFileType(fileName);

  useEffect(() => {
    if (!open) {
      setContent(null);
      setError(null);
      setExpanded(false);
      if (ttsAudioRef.current) {
        ttsAudioRef.current.pause();
        ttsAudioRef.current = null;
      }
      if (ttsUrlRef.current) {
        URL.revokeObjectURL(ttsUrlRef.current);
        ttsUrlRef.current = null;
      }
      setTtsLoading(false);
      setTtsPlaying(false);
      return;
    }

    // Media types stream via URL — no text fetch needed
    if (fileType === 'audio' || fileType === 'video' || fileType === 'image' || fileType === 'pdf') {
      setLoading(false);
      return;
    }

    setLoading(true);
    setError(null);
    files
      .readFile(filePath)
      .then((res) => setContent(res.content))
      .catch(() => setError('Failed to read file'))
      .finally(() => setLoading(false));
  }, [open, filePath]);

  const handleDownload = () => {
    const url = getRawUrl(filePath, root);
    const a = document.createElement('a');
    a.href = url;
    a.download = fileName;
    a.click();
  };

  const handleReadAloud = async () => {
    if (ttsPlaying) {
      if (ttsAudioRef.current) {
        ttsAudioRef.current.pause();
        ttsAudioRef.current = null;
      }
      if (ttsUrlRef.current) {
        URL.revokeObjectURL(ttsUrlRef.current);
        ttsUrlRef.current = null;
      }
      setTtsPlaying(false);
      return;
    }

    setTtsLoading(true);
    try {
      const res = await fetch('http://alpha:9051/v1/audio/speech', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ model: 'kokoro', input: content, voice: 'af_heart', response_format: 'mp3' }),
      });
      if (!res.ok) throw new Error('TTS request failed');
      const blob = await res.blob();
      const url = URL.createObjectURL(blob);
      ttsUrlRef.current = url;
      const audio = new Audio(url);
      ttsAudioRef.current = audio;
      audio.addEventListener('ended', () => {
        setTtsPlaying(false);
        ttsAudioRef.current = null;
        URL.revokeObjectURL(url);
        ttsUrlRef.current = null;
      });
      await audio.play();
      setTtsPlaying(true);
    } catch {
      toast.error('Failed to generate speech audio');
      if (ttsUrlRef.current) {
        URL.revokeObjectURL(ttsUrlRef.current);
        ttsUrlRef.current = null;
      }
      ttsAudioRef.current = null;
      setTtsPlaying(false);
    } finally {
      setTtsLoading(false);
    }
  };

  const headerIcon =
    fileType === 'audio' ? (
      <Music className="h-4 w-4 text-duck-teal shrink-0" />
    ) : fileType === 'video' ? (
      <Film className="h-4 w-4 text-duck-orange shrink-0" />
    ) : fileType === 'image' ? (
      <Image className="h-4 w-4 text-duck-yellow shrink-0" />
    ) : fileType === 'pdf' ? (
      <FileType2 className="h-4 w-4 text-red-500 shrink-0" />
    ) : (
      <span className="inline-flex h-4 w-4 shrink-0" dangerouslySetInnerHTML={{ __html: getIcon(fileName).svg }} />
    );

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

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogPortal>
        <DialogOverlay className="z-[600] bg-black/60 backdrop-blur-sm" />
        <DialogPrimitive.Content
          onOpenAutoFocus={(ev) => ev.preventDefault()}
          className={`fixed left-[50%] top-[50%] z-[600] translate-x-[-50%] translate-y-[-50%] flex flex-col overflow-hidden rounded-xl border-2 border-duck-dark/30 shadow-2xl duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 ${
            expanded ? 'w-[95vw] h-[95vh]' : 'w-[90vw] max-w-4xl h-[85vh]'
          }`}
          style={
            fileType === 'video'
              ? { backgroundColor: '#000' }
              : cardStyle({
                  backgroundColor: 'rgba(255, 255, 255, 0.97)',
                  backgroundImage: `
                  linear-gradient(to right, rgba(20, 83, 45, 0.04) 1px, transparent 1px),
                  linear-gradient(to bottom, rgba(20, 83, 45, 0.04) 1px, transparent 1px)
                `,
                })
          }
        >
          {/* Header */}
          <div
            className={`shrink-0 flex items-center gap-3 px-5 py-3 border-b ${
              fileType === 'video' ? 'border-white/10 bg-black/80' : 'border-duck-dark/10 bg-white/60'
            }`}
          >
            {headerIcon}
            <span
              className={`text-sm font-semibold truncate flex-1 ${
                fileType === 'video' ? 'text-white' : 'text-duck-dark'
              }`}
            >
              {fileName}
            </span>
            <span
              className={`text-[10px] font-mono uppercase tracking-wider shrink-0 ${
                fileType === 'video' ? 'text-white/40' : 'text-duck-dark/40'
              }`}
            >
              {fileType === 'code' ? getLang(fileName) : fileType}
            </span>
            {(fileType === 'markdown' || fileType === 'code' || fileType === 'text') && content && (
              <button
                onClick={handleReadAloud}
                disabled={ttsLoading}
                className="p-1.5 rounded-md text-duck-dark/40 hover:text-duck-dark hover:bg-duck-dark/5 disabled:opacity-40 transition-colors cursor-pointer"
                title="Read Aloud"
              >
                {ttsLoading ? (
                  <Loader2 className="h-4 w-4 animate-spin" />
                ) : ttsPlaying ? (
                  <Square className="h-4 w-4" />
                ) : (
                  <Volume2 className="h-4 w-4" />
                )}
              </button>
            )}
            <button
              onClick={handleDownload}
              className={`p-1.5 rounded-md transition-colors cursor-pointer ${
                fileType === 'video'
                  ? 'text-white/40 hover:text-white hover:bg-white/10'
                  : 'text-duck-dark/40 hover:text-duck-dark hover:bg-duck-dark/5'
              }`}
              title="Download"
            >
              <Download className="h-4 w-4" />
            </button>
            <button
              onClick={() => setExpanded((e) => !e)}
              className={`p-1.5 rounded-md transition-colors cursor-pointer ${
                fileType === 'video'
                  ? 'text-white/40 hover:text-white hover:bg-white/10'
                  : 'text-duck-dark/40 hover:text-duck-dark hover:bg-duck-dark/5'
              }`}
              title={expanded ? 'Collapse' : 'Expand'}
            >
              {expanded ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
            </button>
            <DialogPrimitive.Close
              className={`p-1.5 rounded-md transition-colors cursor-pointer ${
                fileType === 'video'
                  ? 'text-white/40 hover:text-white hover:bg-white/10'
                  : 'text-duck-dark/40 hover:text-duck-dark hover:bg-duck-dark/5'
              }`}
            >
              <X className="h-4 w-4" />
            </DialogPrimitive.Close>
          </div>

          {/* Content */}
          <div ref={scrollRef} className="flex-1 min-h-0 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 === 'image' ? (
              <ImageRenderer src={getRawUrl(filePath, root)} fileName={fileName} />
            ) : fileType === 'video' ? (
              <VideoRenderer src={videoSrc} fileName={fileName} />
            ) : fileType === 'audio' ? (
              <AudioRenderer src={getRawUrl(filePath, root)} fileName={fileName} />
            ) : 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>
        </DialogPrimitive.Content>
      </DialogPortal>
    </Dialog>
  );
};