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

function StudioEditor() {
  const openTabs = useEditorStore((s: any) => s.openTabs);
  const activeTabId = useEditorStore((s: any) => s.activeTabId);
  const setActiveTab = useEditorStore((s: any) => s.setActiveTab);
  const closeTab = useEditorStore((s: any) => s.closeTab);
  // Find active file
  const activeFile = openTabs.find((f: any) => f.id === activeTabId);
  return (
    <div className="editor-area">
      <div className="editor-tabs">
        {openTabs.length === 0 && (
          <div className="editor-tab empty">No files open</div>
        )}
        {openTabs.map((file: any) => (
          <div
            key={file.id}
            className={"editor-tab" + (activeTabId === file.id ? " active" : "")}
            onClick={() => setActiveTab(file.id)}
            style={{ cursor: "pointer" }}
          >
            <span>📄</span>
            <span>{file.name}</span>
            <span
              className="close-btn"
              style={{ marginLeft: 8, color: "#888", cursor: "pointer" }}
              onClick={e => { e.stopPropagation(); closeTab(file.id); }}
            >×</span>
          </div>
        ))}
      </div>
      <div className="editor-content">
        {activeFile ? (
          activeFile.content.split("\n").map((line: string, i: number) => (
            <div className="code-line" key={i}>
              <div className="line-number">{i + 1}</div>
              <div className="line-content">{line}</div>
            </div>
          ))
        ) : (
          <div style={{ color: "#888", padding: 32, textAlign: "center" }}>
            No file open. Select a file to begin.
          </div>
        )}
      </div>
    </div>
  );
}
export default StudioEditor;