import { Download, Loader2, Music, Film, Image, FileType2, Volume2, ScanText, FileText, AudioLines, FolderArchive, Save, Pencil, Eye } from 'lucide-react';
import { getIcon } from 'material-file-icons';
import { getLang } from './file-types';
import { useFileViewer } from './FileViewerContext';

export const FileViewerHeader = () => {
  const {
    fileName,
    fileType,
    content,
    directContent,
    ttsLoading,
    ocrLoading,
    transcribeLoading,
    extractAudioLoading,
    extractLoading,
    handleReadAloud,
    handleOcr,
    handleTranscribe,
    handleExtractAudio,
    handleExtract,
    handleDownload,
    handleSaveResult,
    saveResultLoading,
    editable,
    editing,
    setEditing,
  } = useFileViewer();

  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" />
    ) : fileType === 'archive' ? (
      <FolderArchive className="h-4 w-4 text-duck-orange shrink-0" />
    ) : (
      <span className="inline-flex h-4 w-4 shrink-0" dangerouslySetInnerHTML={{ __html: getIcon(fileName).svg }} />
    );

  return (
    <>
      {headerIcon}
      <span className="text-xs font-medium truncate flex-1">{fileName}</span>
      <span className="text-[10px] font-mono uppercase tracking-wider shrink-0 opacity-60">
        {fileType === 'code' ? getLang(fileName) : fileType}
      </span>
      {editable && content && (
        <button
          onClick={() => setEditing(!editing)}
          className="p-1 rounded hover:bg-current/10 transition-colors cursor-pointer"
          title={editing ? 'View' : 'Edit'}
        >
          {editing ? <Eye className="h-3.5 w-3.5" /> : <Pencil className="h-3.5 w-3.5" />}
        </button>
      )}
      {(fileType === 'markdown' || fileType === 'code' || fileType === 'text') && content && (
        <button
          onClick={handleReadAloud}
          disabled={ttsLoading}
          className="p-1 rounded hover:bg-current/10 disabled:opacity-40 transition-colors cursor-pointer"
          title="Read Aloud"
        >
          {ttsLoading ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Volume2 className="h-3.5 w-3.5" />}
        </button>
      )}
      {fileType === 'image' && (
        <button
          onClick={handleOcr}
          disabled={ocrLoading}
          className="p-1 rounded hover:bg-current/10 disabled:opacity-40 transition-colors cursor-pointer"
          title="Extract Text (OCR)"
        >
          {ocrLoading ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <ScanText className="h-3.5 w-3.5" />}
        </button>
      )}
      {fileType === 'audio' && (
        <button
          onClick={handleTranscribe}
          disabled={transcribeLoading}
          className="p-1 rounded hover:bg-current/10 disabled:opacity-40 transition-colors cursor-pointer"
          title="Transcribe"
        >
          {transcribeLoading ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <FileText className="h-3.5 w-3.5" />}
        </button>
      )}
      {fileType === 'video' && (
        <button
          onClick={handleExtractAudio}
          disabled={extractAudioLoading}
          className="p-1 rounded hover:bg-current/10 disabled:opacity-40 transition-colors cursor-pointer"
          title="Extract Audio"
        >
          {extractAudioLoading ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <AudioLines className="h-3.5 w-3.5" />}
        </button>
      )}
      {fileType === 'archive' && (
        <button
          onClick={handleExtract}
          disabled={extractLoading}
          className="p-1 rounded hover:bg-current/10 disabled:opacity-40 transition-colors cursor-pointer"
          title="Extract"
        >
          {extractLoading ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <FolderArchive className="h-3.5 w-3.5" />}
        </button>
      )}
      {handleSaveResult && (
        <button
          onClick={handleSaveResult}
          disabled={saveResultLoading}
          className="p-1 rounded hover:bg-current/10 disabled:opacity-40 transition-colors cursor-pointer"
          title="Save next to original"
        >
          {saveResultLoading ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Save className="h-3.5 w-3.5" />}
        </button>
      )}
      {!directContent && (
        <button
          onClick={handleDownload}
          className="p-1 rounded hover:bg-current/10 transition-colors cursor-pointer"
          title="Download"
        >
          <Download className="h-3.5 w-3.5" />
        </button>
      )}
    </>
  );
};
