"use client";
import { isText, isImage, isPDF } from "./FileIcon";
import MarkdownViewer from "./MarkdownViewer";

function getExt(name) {
  return name.split(".").pop()?.toLowerCase();
}

function getLang(name) {
  const map = {
    py: "python",
    js: "javascript",
    jsx: "javascript",
    ts: "typescript",
    tsx: "typescript",
    cpp: "cpp",
    c: "c",
    java: "java",
    cs: "csharp",
    sh: "bash",
    bash: "bash",
    html: "html",
    css: "css",
    json: "json",
    yaml: "yaml",
    yml: "yaml",
  };
  return map[getExt(name)] || "plaintext";
}

export default function FileViewer({ name, content, downloadUrl }) {
  const ext = getExt(name);

  // Markdown
  if (ext === "md") {
    return (
      <div className="min-h-screen bg-white px-8 py-6 max-w-4xl mx-auto">
        <MarkdownViewer content={content || ""} />
      </div>
    );
  }

  // Plain text / code
  if (isText(name)) {
    // Wrap in a fenced markdown code block for syntax highlighting
    const fenced = `\`\`\`${getLang(name)}\n${content || ""}\n\`\`\``;
    return (
      <div
        className="min-h-screen"
        style={{ background: "#1e1e1e", padding: "2rem" }}
      >
        <MarkdownViewer content={fenced} />
      </div>
    );
  }

  // Image
  if (isImage(name)) {
    return (
      <div className="min-h-screen flex items-center justify-center p-8 bg-gray-100">
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img
          src={downloadUrl}
          alt={name}
          className="max-w-full max-h-[80vh] rounded shadow-lg object-contain"
        />
      </div>
    );
  }

  // PDF
  if (isPDF(name)) {
    return (
      <div className="min-h-screen flex flex-col bg-white">
        <iframe
          src={downloadUrl}
          className="flex-1 w-full"
          style={{ minHeight: "85vh", border: "none" }}
          title={name}
        />
      </div>
    );
  }

  // Fallback — unsupported in browser
  return (
    <div className="min-h-screen bg-white flex items-center justify-center">
      <div className="text-center p-8 border border-gray-200 rounded-xl bg-gray-50">
        <p className="text-gray-800 font-semibold mb-2">{name}</p>
        <p className="text-sm text-gray-500 mb-4">
          This file type cannot be previewed in the browser.
        </p>
        {downloadUrl && (
          <a
            href={downloadUrl}
            download={name}
            className="inline-block px-4 py-2 rounded text-sm font-semibold text-amber-100"
            style={{ background: "#3d2b1f" }}
          >
            Download File
          </a>
        )}
      </div>
    </div>
  );
}