"use client";

import { Download } from "lucide-react";
import { Button } from "@/components/ui/button";
import { getFileRawUrl, getFileDownloadUrl } from "@/lib/api/workspace";
import { getFileCategoryIcon } from "@/lib/workspace-file-types";

type BinaryViewerProps = {
  workspaceId: string;
  path: string;
};

export function BinaryViewer({ workspaceId, path }: BinaryViewerProps) {
  const rawUrl = getFileRawUrl(workspaceId, path);
  const downloadUrl = getFileDownloadUrl(workspaceId, path);
  const filename = path.split("/").pop() ?? path;
  const ext = filename.includes(".") ? filename.slice(filename.lastIndexOf(".")).toUpperCase() : "";
  const Icon = getFileCategoryIcon(path);

  return (
    <div className="flex flex-col h-full">
      {/* Header */}
      <div className="flex items-center justify-between px-4 py-2.5 border-b border-foreground/5 bg-foreground/[0.02] shrink-0">
        <div className="flex items-center gap-2">
          <Icon className="w-3.5 h-3.5 text-primary/60" />
          <span className="text-xs font-mono font-bold text-foreground/70 truncate">{path}</span>
        </div>
      </div>

      {/* Content */}
      <div className="flex-1 flex items-center justify-center p-8 bg-foreground/[0.01]">
        <div className="flex flex-col items-center gap-6">
          <div className="w-24 h-24 rounded-2xl bg-primary/10 border border-primary/20 flex items-center justify-center">
            <Icon className="w-10 h-10 text-primary/60" />
          </div>
          <div className="text-center">
            <p className="text-sm font-mono font-bold text-foreground/70">{filename}</p>
            {ext && (
              <p className="text-[10px] font-mono text-muted-foreground/40 mt-1 uppercase tracking-widest">
                {ext} file
              </p>
            )}
          </div>
          <a href={downloadUrl} download={filename}>
            <Button variant="outline" className="gap-2 rounded-full text-xs border-foreground/10">
              <Download className="w-3.5 h-3.5" />
              Download
            </Button>
          </a>
        </div>
      </div>
    </div>
  );
}
