openchamber/packages/ui/src/components/chat/FileAttachment.tsx

import React, { useRef, memo } from 'react';
import { RiAttachment2, RiCloseLine, RiComputerLine, RiFileImageLine, RiFileLine, RiFilePdfLine, RiHardDrive3Line } from '@remixicon/react';
import { useSessionStore, type AttachedFile } from '@/stores/useSessionStore';
import { useUIStore } from '@/stores/useUIStore';
import { toast } from '@/components/ui';
import { cn } from '@/lib/utils';
import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip';
import { useIsVSCodeRuntime } from '@/hooks/useRuntimeAPIs';
import { useIsTextTruncated } from '@/hooks/useIsTextTruncated';
import type { ToolPopupContent } from './message/types';

export const FileAttachmentButton = memo(() => {
  const fileInputRef = useRef<HTMLInputElement>(null);
  const { addAttachedFile } = useSessionStore();
  const { isMobile } = useUIStore();
  const isVSCodeRuntime = useIsVSCodeRuntime();
  const buttonSizeClass = isMobile ? 'h-9 w-9' : 'h-7 w-7';
  const iconSizeClass = isMobile ? 'h-5 w-5' : 'h-[18px] w-[18px]';

  const attachFiles = async (files: FileList | File[]) => {
    let attachedCount = 0;
    for (let i = 0; i < files.length; i++) {
      const file = files[i];
      const sizeBefore = useSessionStore.getState().attachedFiles.length;
      try {
        await addAttachedFile(file);
        const sizeAfter = useSessionStore.getState().attachedFiles.length;
        if (sizeAfter > sizeBefore) {
          attachedCount++;
        }
      } catch (error) {
        console.error('File attach failed', error);
        toast.error(error instanceof Error ? error.message : 'Failed to attach file');
      }
    }
    if (attachedCount > 0) {
      toast.success(`Attached ${attachedCount} file${attachedCount > 1 ? 's' : ''}`);
    }
  };

  const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files;
    if (!files) return;
    await attachFiles(files);

    if (fileInputRef.current) {
      fileInputRef.current.value = '';
    }
  };

  const handleVSCodePick = async () => {
    try {
      const response = await fetch('/api/vscode/pick-files');
      const data = await response.json();
      const picked = Array.isArray(data?.files) ? data.files : [];
      const skipped = Array.isArray(data?.skipped) ? data.skipped : [];

      if (skipped.length > 0) {
        const summary = skipped.map((s: { name?: string; reason?: string }) => `${s?.name || 'file'}: ${s?.reason || 'skipped'}`).join('\n');
        toast.error(`Some files were skipped:\n${summary}`);
      }

      const asFiles = picked
        .map((file: { name: string; mimeType?: string; dataUrl?: string }) => {
          if (!file?.dataUrl) return null;
          try {
            const [meta, base64] = file.dataUrl.split(',');
            const mime = file.mimeType || (meta?.match(/data:(.*);base64/)?.[1] || 'application/octet-stream');
            if (!base64) return null;
            const binary = atob(base64);
            const bytes = new Uint8Array(binary.length);
            for (let i = 0; i < binary.length; i++) {
              bytes[i] = binary.charCodeAt(i);
            }
            const blob = new Blob([bytes], { type: mime });
            return new File([blob], file.name || 'file', { type: mime });
          } catch (err) {
            console.error('Failed to decode VS Code picked file', err);
            return null;
          }
        })
        .filter(Boolean) as File[];

      if (asFiles.length > 0) {
        await attachFiles(asFiles);
      }
    } catch (error) {
      console.error('VS Code file pick failed', error);
      toast.error(error instanceof Error ? error.message : 'Failed to pick files in VS Code');
    }
  };

  return (
    <>
      <input
        ref={fileInputRef}
        type="file"
        multiple
        className="hidden"
        onChange={handleFileSelect}
        accept="*/*"
      />
      <button
        type='button'
        onClick={() => {
          if (isVSCodeRuntime) {
            void handleVSCodePick();
          } else {
            fileInputRef.current?.click();
          }
        }}
        className={cn(
          buttonSizeClass,
          'flex items-center justify-center text-muted-foreground transition-none outline-none focus:outline-none flex-shrink-0'
        )}
        title='Attach files'
      >
        <RiAttachment2 className={cn(iconSizeClass, 'text-current')} />
      </button>
    </>
  );
});

interface FileChipProps {
  file: AttachedFile;
  onRemove: () => void;
}

const TruncatedMarquee = memo(({ text, title }: { text: string; title?: string }) => {
  const labelRef = useRef<HTMLSpanElement>(null);
  const isTruncated = useIsTextTruncated(labelRef, [text]);

  return (
    <span
      ref={labelRef}
      className={cn('marquee-text', isTruncated && 'marquee-text--active')}
      title={title ?? text}
    >
      {text}
    </span>
  );
});

const FileChip = memo(({ file, onRemove }: FileChipProps) => {
  const getFileIcon = () => {
    if (file.mimeType.startsWith('image/')) {
      return <RiFileImageLine className="h-3.5 w-3.5" />;
    }
    if (file.mimeType.includes('text') || file.mimeType.includes('code')) {
      return <RiFileLine className="h-3.5 w-3.5" />;
    }
    if (file.mimeType.includes('json') || file.mimeType.includes('xml')) {
      return <RiFilePdfLine className="h-3.5 w-3.5" />;
    }
    return <RiFileLine className="h-3.5 w-3.5" />;
  };

  const formatFileSize = (bytes: number) => {
    if (bytes < 1024) return bytes + ' B';
    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
    return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
  };

  const extractFilename = (path: string): string => {

    const normalized = path.replace(/\\/g, '/');

    const parts = normalized.split('/');
    const filename = parts[parts.length - 1];

    return filename || path;
  };

  const displayName = extractFilename(file.filename);

  return (
    <div className="inline-flex items-center gap-1.5 px-2.5 py-1 bg-muted/30 border border-border/30 rounded-xl typography-meta">
      {}
      <div title={file.source === 'server' ? "Server file" : "Local file"}>
        {file.source === 'server' ? (
          <RiHardDrive3Line className="h-3 w-3 text-primary" />
        ) : (
          <RiComputerLine className="h-3 w-3 text-muted-foreground" />
        )}
      </div>
      {getFileIcon()}
      <div className="overflow-hidden max-w-[200px]">
        <TruncatedMarquee text={displayName} title={file.serverPath || displayName} />
      </div>
      <span className="text-muted-foreground flex-shrink-0">
        ({formatFileSize(file.size)})
      </span>
      <button
        onClick={onRemove}
        className="ml-1 hover:text-destructive p-0.5"
        title="Remove file"
      >
        <RiCloseLine className="h-3 w-3" />
      </button>
    </div>
  );
});

export const AttachedFilesList = memo(() => {
  const { attachedFiles, removeAttachedFile } = useSessionStore();

  if (attachedFiles.length === 0) return null;

  return (
    <div className="pb-2">
      <div className="flex items-center flex-wrap gap-2 px-3 py-2 bg-muted/30 rounded-xl border border-border/30">
        <span className="typography-meta text-muted-foreground font-medium">Attached:</span>
        {attachedFiles.map((file) => (
          <FileChip
            key={file.id}
            file={file}
            onRemove={() => removeAttachedFile(file.id)}
          />
        ))}
      </div>
    </div>
  );
});

interface FilePart {
  type: string;
  mime?: string;
  url?: string;
  filename?: string;
  size?: number;
}

interface MessageFilesDisplayProps {
  files: FilePart[];
  onShowPopup?: (content: ToolPopupContent) => void;
}

export const MessageFilesDisplay = memo(({ files, onShowPopup }: MessageFilesDisplayProps) => {

  const fileItems = files.filter(f => f.type === 'file' && (f.mime || f.url));

  const extractFilename = (path?: string): string => {
    if (!path) return 'Unnamed file';

    const normalized = path.replace(/\\/g, '/');
    const parts = normalized.split('/');
    return parts[parts.length - 1] || path;
  };

  const getFileIcon = (mimeType?: string) => {
    if (!mimeType) return <RiFileLine className="h-3.5 w-3.5" />;

    if (mimeType.startsWith('image/')) {
      return <RiFileImageLine className="h-3.5 w-3.5" />;
    }
    if (mimeType.includes('text') || mimeType.includes('code')) {
      return <RiFileLine className="h-3.5 w-3.5" />;
    }
    if (mimeType.includes('json') || mimeType.includes('xml')) {
      return <RiFilePdfLine className="h-3.5 w-3.5" />;
    }
    return <RiFileLine className="h-3.5 w-3.5" />;
  };

  const imageFiles = fileItems.filter(f => f.mime?.startsWith('image/') && f.url);
  const otherFiles = fileItems.filter(f => !f.mime?.startsWith('image/'));

  const handleImageClick = React.useCallback((file: { filename?: string; mime?: string; size?: number; url?: string }) => {
    if (!onShowPopup || !file?.url) {
      return;
    }

    const filename = extractFilename(file.filename) || 'Image';

    const popupPayload: ToolPopupContent = {
      open: true,
      title: filename,
      content: '',
      metadata: {
        tool: 'image-preview',
        filename,
        mime: file.mime,
        size: file.size,
      },
      image: {
        url: file.url,
        mimeType: file.mime,
        filename,
      },
    };

    onShowPopup(popupPayload);
  }, [onShowPopup]);

  if (fileItems.length === 0) return null;

  return (
    <div className="space-y-2 mt-2">
      {}
      {otherFiles.length > 0 && (
        <div className="flex flex-wrap gap-2">
          {otherFiles.map((file, index) => (
            <div
              key={`file-${index}`}
              className="inline-flex items-center gap-1.5 px-2.5 py-1 bg-muted/30 border border-border/30 rounded-xl typography-meta"
            >
              {getFileIcon(file.mime)}
              <div className="overflow-hidden max-w-[200px]">
                <TruncatedMarquee text={extractFilename(file.filename)} />
              </div>
            </div>
          ))}
        </div>
      )}

      {}
      {imageFiles.length > 0 && (
        <div className="overflow-x-auto -mx-1 px-1 py-1 scrollbar-thin">
          <div className="flex gap-3 snap-x snap-mandatory">
            {imageFiles.map((file, index) => {
    const filename = extractFilename(file.filename) || 'Image';

              return (
                <Tooltip key={`img-${index}`} delayDuration={1000}>
                  <TooltipTrigger asChild>
                    <button
                      type="button"
                      onClick={() => handleImageClick(file)}
                      className="relative flex-none w-16 sm:w-20 md:w-24 aspect-square rounded-xl border border-border/40 bg-muted/10 overflow-hidden snap-start focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-primary"
                      aria-label={filename}
                    >
                      {file.url ? (
                        <img
                          src={file.url}
                          alt={filename}
                          className="h-full w-full object-cover"
                          loading="lazy"
                          onError={(e) => {
                            const target = e.target as HTMLImageElement;
                            target.style.visibility = 'hidden';
                          }}
                        />
                      ) : (
                        <div className="h-full w-full flex items-center justify-center bg-muted/30 text-muted-foreground">
                          <RiFileImageLine className="h-6 w-6" />
                        </div>
                      )}
                      <span className="sr-only">{filename}</span>
                    </button>
                  </TooltipTrigger>
                  <TooltipContent side="top" sideOffset={6} className="typography-meta px-2 py-1">
                    {filename}
                  </TooltipContent>
                </Tooltip>
              );
            })}
          </div>
        </div>
      )}
    </div>
  );
});