"use client";

import { AlertTriangle } from "lucide-react";

type ZooDesignStudioFrameProps = {
  isReady: boolean;
  src: string;
};

export function ZooDesignStudioFrame({ isReady, src }: ZooDesignStudioFrameProps) {
  if (!isReady) {
    return (
      <div className="flex h-svh w-full items-center justify-center overflow-hidden bg-[#10100e] p-6 text-[#f8f6ef]">
        <div className="w-full max-w-xl rounded-lg border border-[#3a352c] bg-[#171510] p-6 shadow-2xl">
          <div className="flex items-start gap-3">
            <AlertTriangle className="mt-0.5 h-5 w-5 shrink-0 text-amber-300" />
            <div className="min-w-0">
              <h1 className="font-semibold text-lg">
                HiCAD 官方前端尚未构建
              </h1>
              <p className="mt-2 text-[#d3cabb] text-sm leading-6">
                请运行
                <code className="mx-1 rounded bg-white/10 px-1.5 py-0.5">
                  pnpm zoo-modeling-app:vendor
                </code>
                生成官方 Zoo Design Studio 前端。生成后刷新本页即可使用。
              </p>
            </div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="h-svh w-full overflow-hidden bg-[#10100e]">
      <iframe
        allow="clipboard-read; clipboard-write; fullscreen; gamepad; pointer-lock; web-share; xr-spatial-tracking"
        className="h-full w-full border-0"
        referrerPolicy="strict-origin-when-cross-origin"
        sandbox="allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts"
        src={src}
        title="HiCAD"
      />
    </div>
  );
}