import { WorkspaceMode } from "../lib/types";
import FileTree from "./FileTree";

interface FilesPanelProps {
  workspaceMode: WorkspaceMode;
  onFileSelect?: (path: string) => void;
}

export default function FilesPanel({ workspaceMode, onFileSelect }: FilesPanelProps) {
  const isReadOnly = workspaceMode === WorkspaceMode.Agent;
  const isReadWrite = workspaceMode === WorkspaceMode.User;

  return (
    <div className="border-t border-border-subtle flex flex-col flex-1 min-h-0">
      <div className="flex items-center justify-between px-4 py-2 bg-bg-tertiary">
        <h3 className="text-sm font-semibold text-text-secondary uppercase tracking-wider">
          Files
        </h3>
        <div className="flex items-center gap-1">
          <span
            className={`w-6 h-6 flex items-center justify-center font-mono font-bold text-xs rounded border ${
              isReadWrite
                ? "border-green-500 strobe text-green-500"
                : "border-border-default text-text-muted"
            }`}
            title="Read / Write"
          >
            RW
          </span>
          <span
            className={`w-6 h-6 flex items-center justify-center font-mono font-bold text-xs rounded border ${
              isReadOnly
                ? "border-green-500 strobe text-green-500"
                : "border-border-default text-text-muted"
            }`}
            title="Read Only"
          >
            RO
          </span>
        </div>
      </div>
      <div className="flex-1 overflow-auto">
        <FileTree
          workspaceMode={workspaceMode}
          onFileSelect={onFileSelect}
        />
      </div>
      <div className="px-4 py-2 bg-bg-tertiary border-t border-border-subtle">
        <p className="text-xs text-text-muted">
          {isReadOnly
            ? "Read-only: Agent is working"
            : isReadWrite
              ? "Read-write mode enabled"
              : "Select User or Agent mode to access files"}
        </p>
      </div>
    </div>
  );
}
