"use client";

import { useState } from "react";
import NotebookBrowser from "./NotebookBrowser";
import type { NotebookProject } from "./notebookProjects";

export type NotebookFallbackProps = {
  projects: NotebookProject[];
  initialIndex?: number;
  onSelectTab?: (index: number) => void;
};

function clampIndex(index: number, length: number): number {
  if (length < 1) return -1;
  return Math.min(Math.max(index, 0), length - 1);
}

export default function NotebookFallback({
  projects,
  initialIndex = 0,
  onSelectTab,
}: NotebookFallbackProps) {
  const [activeIndex, setActiveIndex] = useState(() =>
    clampIndex(initialIndex, projects.length),
  );

  return (
    <div className="notebook-fallback" data-testid="notebook-fallback">
      <div className="notebook-fallback-intro">
        <span className="notebook-fallback-kicker">Interface em produção</span>
        <p>
          Navegue pelos projetos com as abas abaixo. A experiência permanece
          completa sem movimento ou WebGL.
        </p>
      </div>
      <NotebookBrowser
        activeIndex={activeIndex}
        frame={{
          cursorClicking: false,
          cursorVisible: false,
          cursorX: 0,
          cursorY: 0,
        }}
        onSelectTab={(index) => {
          setActiveIndex(index);
          onSelectTab?.(index);
        }}
        projects={projects}
      />
    </div>
  );
}