"use client";
import { useEditorStore, FileTab } from "../store/editor-zustand";

function StudioSidebar() {
  const files = useEditorStore((s: any) => s.files);
  const openFile = useEditorStore((s: any) => s.openFile);
  const activeTabId = useEditorStore((s: any) => s.activeTabId);
  // Split files into mockup sections
  const foundationFiles = files.filter((f: FileTab) => f.name === "auth.ts" || f.name === "passport.ts" || f.name === "security.ts");
  const corporationFiles = files.filter((f: FileTab) => f.name === "terminal.ts" || f.name === "deployment.ts" || f.name === "analytics.ts");
  const labsFiles = files.filter((f: FileTab) => f.name === "copilot.ts" || f.name === "nexus-v2.ts" || f.name === "experimental.ts");
  return (
    <div className="sidebar">
      <div className="sidebar-section">
        <div className="sidebar-header foundation">
          <span>🔴</span>
          <span>Foundation APIs</span>
        </div>
        <div className="file-tree">
          {foundationFiles.map((file: FileTab) => (
            <div
              key={file.id}
              className={"file-item" + (activeTabId === file.id ? " active" : "")}
              onClick={() => openFile(file)}
              style={{ cursor: "pointer" }}
            >
              <span className="file-icon">📄</span>
              <span>{file.name}</span>
            </div>
          ))}
        </div>
      </div>
      <div className="sidebar-section">
        <div className="sidebar-header corporation">
          <span>🔵</span>
          <span>Corporation Services</span>
        </div>
        <div className="file-tree">
          {corporationFiles.map((file: FileTab) => (
            <div
              key={file.id}
              className={"file-item" + (activeTabId === file.id ? " active" : "")}
              onClick={() => openFile(file)}
              style={{ cursor: "pointer" }}
            >
              <span className="file-icon">📄</span>
              <span>{file.name}</span>
            </div>
          ))}
        </div>
      </div>
      <div className="sidebar-section">
        <div className="sidebar-header labs">
          <span>🟡</span>
          <span>Labs Experimental</span>
        </div>
        <div className="file-tree">
          {labsFiles.map((file: FileTab) => (
            <div
              key={file.id}
              className={"file-item" + (activeTabId === file.id ? " active" : "")}
              onClick={() => openFile(file)}
              style={{ cursor: "pointer" }}
            >
              <span className="file-icon">📄</span>
              <span>{file.name}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
export default StudioSidebar;