import { Link } from 'react-router-dom';

export interface UnsupportedMachinePanelProps {
  machineId: string;
}

export function UnsupportedMachinePanel({ machineId }: UnsupportedMachinePanelProps) {
  return (
    <div className="absolute inset-0 z-20 flex items-center justify-center rounded-2xl bg-[#0B0E14]/74 p-6 backdrop-blur-md">
      <div className="max-w-lg rounded-2xl border border-amber-300/24 bg-[#121721]/94 p-6 text-center shadow-2xl shadow-black/35">
        <p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-amber-200">
          Viewer asset not registered
        </p>
        <h2 className="mt-3 text-2xl font-semibold text-white">{machineId}</h2>
        <p className="mt-3 text-sm leading-6 text-slate-300">
          The reusable viewer is ready, but this machine does not yet have a GLB/GLTF
          definition or procedural factory registered in <code>machineAssets.ts</code>.
          Add a machine definition with parts metadata to enable selection, opacity,
          exploded view, clipping, annotations, and share links.
        </p>

        <div className="mt-5 flex flex-wrap justify-center gap-3">
          <Link
            to="/"
            className="rounded-xl border border-white/10 bg-white/[0.04] px-4 py-2 text-sm font-semibold text-slate-200 transition hover:border-white/25 hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-sky-300"
          >
            Back to catalogue
          </Link>
          <Link
            to="/machines/four-stroke-petrol-engine"
            className="rounded-xl border border-sky-300/40 bg-sky-400/12 px-4 py-2 text-sm font-semibold text-sky-100 transition hover:border-sky-200 hover:bg-sky-400/20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-sky-300"
          >
            Open working demo
          </Link>
        </div>
      </div>
    </div>
  );
}