"use client";

import { File } from "lucide-react";

type FileViewerProps = {
  path: string | null;
  content: string | null;
  totalLines: number;
  loading: boolean;
};

export function FileViewer({ path, content, totalLines, loading }: FileViewerProps) {
  if (loading) {
    return (
      <div className="flex items-center justify-center h-full">
        <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest animate-pulse">
          Loading file...
        </div>
      </div>
    );
  }

  if (!path || content === null) {
    return (
      <div className="flex flex-col items-center justify-center h-full gap-3">
        <File className="w-10 h-10 text-muted-foreground/20" />
        <p className="text-[10px] text-muted-foreground/40 font-mono uppercase tracking-widest">
          Select a file from the tree
        </p>
      </div>
    );
  }

  const lines = content.split("\n");

  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">
          <File 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>
        <span className="text-[10px] font-mono text-muted-foreground/40">
          {totalLines} lines
        </span>
      </div>

      {/* Code content */}
      <div className="flex-1 overflow-auto">
        <div className="font-mono text-[13px] leading-[1.6]">
          {lines.map((line, i) => (
            <div key={i} className="flex hover:bg-foreground/[0.03] group">
              <span className="shrink-0 w-14 text-right pr-4 text-muted-foreground/25 select-none text-xs leading-[1.6] py-px group-hover:text-muted-foreground/40">
                {i + 1}
              </span>
              <pre className="flex-1 whitespace-pre-wrap break-all text-foreground/70 py-px pr-4">
                {line || " "}
              </pre>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
