import { useSearchParams } from "react-router-dom";

export default function ShellEditorPage() {
  const [searchParams] = useSearchParams();
  const modelUrl = searchParams.get("model");

  // Build the SculptGL URL with optional model parameter
  // Always use nosphere=true to start with empty canvas
  const sculptglUrl = modelUrl
    ? `/sculptgl/index.html?nosphere=true&model=${encodeURIComponent(modelUrl)}`
    : "/sculptgl/index.html?nosphere=true";

  return (
    <div className="bf-page bf-page--full bf-page--compact">
      <div className="bf-page-header bf-page-header--center">
        <div>
          <h1 className="bf-page-title">Edit Shell</h1>
          <p className="bf-page-subtitle">Use SculptGL to refine the generated brace shell.</p>
        </div>
        <div className="bf-spacer" />
        <div className="bf-toolbar">
          <a
            href={sculptglUrl}
            target="_blank"
            rel="noopener noreferrer"
            className="btn subtle small"
          >
            Open In New Tab
          </a>
          <a
            href="/sculptgl/index.html?nosphere=true"
            target="_blank"
            rel="noopener noreferrer"
            className="btn subtle small"
          >
            Open Empty Editor
          </a>
        </div>
      </div>

      <div className="shell-editor-page">
        <div className="shell-editor-container">
          <iframe
            src={sculptglUrl}
            title="SculptGL Editor"
            className="shell-editor-iframe"
            allow="fullscreen"
          />
        </div>
        <div className="shell-editor-tips">
          <strong>Quick Tips:</strong>
          <span>Left-click + drag to sculpt</span>
          <span>Right-click + drag to rotate</span>
          <span>Scroll to zoom</span>
          <span>File -{"\u003e"} Import to load STL/OBJ</span>
        </div>
      </div>
    </div>
  );
}
