"use client";

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

type MediaViewerProps = {
  workspaceId: string;
  path: string;
  type: "video" | "audio";
};

export function MediaViewer({ workspaceId, path, type }: MediaViewerProps) {
  const rawUrl = getFileRawUrl(workspaceId, path);
  const downloadUrl = getFileDownloadUrl(workspaceId, path);
  const filename = path.split("/").pop() ?? path;
  const Icon = type === "video" ? Video : Music;

  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>
        <a href={downloadUrl} download={filename}>
          <Button variant="ghost" size="icon" className="h-7 w-7 rounded-full">
            <Download className="w-3.5 h-3.5" />
          </Button>
        </a>
      </div>

      {/* Player */}
      <div className="flex-1 flex items-center justify-center p-8 bg-foreground/[0.01]">
        {type === "video" ? (
          <video
            key={path}
            controls
            preload="metadata"
            className="max-w-full max-h-full rounded-lg"
          >
            <source src={rawUrl} />
            Your browser does not support video playback.
          </video>
        ) : (
          <div className="flex flex-col items-center gap-6">
            <div className="w-24 h-24 rounded-full bg-primary/10 border border-primary/20 flex items-center justify-center">
              <Music className="w-10 h-10 text-primary/60" />
            </div>
            <p className="text-sm font-mono font-bold text-foreground/70">{filename}</p>
            <audio key={path} controls preload="metadata" className="w-80">
              <source src={rawUrl} />
              Your browser does not support audio playback.
            </audio>
          </div>
        )}
      </div>
    </div>
  );
}
