"use client";

// Lightweight wrapper around <StepViewer>. Used anywhere we want a
// "Show 3D" toggle that reveals the in-browser STEP viewer on demand:
//
//   - Assembly detail page (admin)
//   - Operator scan page (phone)
//
// Keeps the heavy occt / three.js / WASM out of the initial bundle via
// next/dynamic + ssr:false, and only starts loading when the user taps
// the toggle.
//
// Intentionally does NOT capture thumbnails — the part detail page has
// its own richer variant for that. Here we just render the model.

import dynamic from "next/dynamic";
import { useState } from "react";

const StepViewer = dynamic(() => import("@/components/StepViewer"), {
  ssr: false,
  loading: () => (
    <div className="relative w-full h-[320px] rounded-lg border border-slate-200 bg-slate-50 flex items-center justify-center text-sm text-slate-500">
      Loading viewer…
    </div>
  ),
});

interface Props {
  /** FileAsset id whose bytes will be streamed from /api/v1/files/:id/download. */
  fileId: string;
  /** Human-friendly file name shown in the header. */
  fileName: string;
  /** Panel heading, e.g. "3D viewer" or "Assembly 3D". */
  title?: string;
  /** If true, the panel renders already open. Defaults to false — saves the
   *  ~2 MB WASM download until the operator actually asks for it, which matters
   *  on a phone. */
  defaultOpen?: boolean;
  /** Height of the viewer canvas. Defaults to 360 (good for phones). Admin
   *  pages can bump this to 480. */
  height?: number;
  /** Extra tailwind classes for the outer <section>. */
  className?: string;
}

export default function StepViewerPanel({
  fileId,
  fileName,
  title = "3D viewer",
  defaultOpen = false,
  height = 360,
  className,
}: Props) {
  const [open, setOpen] = useState(defaultOpen);
  const [edges, setEdges] = useState(true);
  const url = `/api/v1/files/${fileId}/download`;

  return (
    <section className={className}>
      <div className="flex items-center justify-between gap-3 mb-2">
        <h2 className="text-sm font-semibold text-slate-900">{title}</h2>
        <div className="flex items-center gap-3">
          {open ? (
            <label className="flex items-center gap-1.5 text-xs text-slate-600">
              <input
                type="checkbox"
                checked={edges}
                onChange={(e) => setEdges(e.target.checked)}
              />
              Show edges
            </label>
          ) : null}
          <button
            type="button"
            onClick={() => setOpen((v) => !v)}
            className={`rounded-md text-sm font-medium px-3 py-1.5 ${
              open
                ? "bg-white border border-slate-300 text-slate-700"
                : "bg-slate-900 text-white"
            }`}
          >
            {open ? "Hide" : "Show 3D"}
          </button>
        </div>
      </div>
      {open ? (
        <div className="rounded-xl border border-slate-200 bg-white p-3">
          <div className="mb-2 text-[11px] text-slate-500 truncate" title={fileName}>
            Viewing: <code className="font-mono text-slate-700">{fileName}</code>
          </div>
          <div style={{ height }} className="relative w-full rounded-lg border border-slate-200 bg-slate-50 overflow-hidden">
            <StepViewer
              key={`${fileId}-${edges ? "e" : "ne"}`}
              url={url}
              showEdges={edges}
              className="absolute inset-0"
            />
          </div>
          <p className="mt-2 text-[11px] text-slate-500">
            Drag to rotate · pinch / scroll to zoom · two-finger drag to pan. Rendered in
            your browser — the STEP file isn&apos;t downloaded to your device.
          </p>
        </div>
      ) : (
        <p className="text-xs text-slate-500">
          Interactive 3D preview. Tap <span className="font-medium">Show 3D</span> to load
          (~2 MB of viewer code fetched on first use).
        </p>
      )}
    </section>
  );
}