#!/usr/bin/env bash
set -euo pipefail

mkdir -p components/explorer

cat > components/explorer/ProductionFileExplorer.jsx <<'EOC'
"use client";

import { useEffect, useState } from "react";
import api from "../../src/services/api";

export default function ProductionFileExplorer({ projectId }) {
  const [files, setFiles] = useState([]);

  useEffect(() => {
    if (!projectId) return;

    api.getProjectFiles(projectId)
      .then(setFiles)
      .catch(() => setFiles([]));
  }, [projectId]);

  return (
    <aside className="h-full overflow-auto bg-slate-950 text-sm text-slate-200">
      <div className="border-b border-slate-800 p-3 font-semibold">
        Explorer
      </div>

      {files.map((file) => (
        <div
          key={file.path}
          className="cursor-pointer border-b border-slate-900 px-3 py-2 hover:bg-slate-900"
        >
          {file.path}
        </div>
      ))}
    </aside>
  );
}
EOC

cat > components/explorer/index.js <<'EOC'
export { default as ProductionFileExplorer } from "./ProductionFileExplorer";
EOC

echo "[1/3] Verify..."
test -f components/explorer/ProductionFileExplorer.jsx
test -f components/explorer/index.js

echo "[2/3] Complete."
echo "Production File Explorer installed."