"use client";

import React, { Suspense, useMemo } from "react";
import { Canvas } from "@react-three/fiber";
import { Environment, OrbitControls, useGLTF } from "@react-three/drei";
import { AlertCircle, Box, ExternalLink, Loader2 } from "lucide-react";
import { Button } from "@/components/ui/button";

interface Model3DViewerProps {
  modelUrl?: string | null;
  previewImageUrl?: string | null;
}

class ViewerErrorBoundary extends React.Component<
  { children: React.ReactNode; fallback: React.ReactNode },
  { hasError: boolean }
> {
  constructor(props: { children: React.ReactNode; fallback: React.ReactNode }) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  componentDidUpdate(prevProps: { children: React.ReactNode }) {
    if (prevProps.children !== this.props.children && this.state.hasError) {
      this.setState({ hasError: false });
    }
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback;
    }
    return this.props.children;
  }
}

function ModelScene({ url }: { url: string }) {
  const model = useGLTF(url);
  const scene = useMemo(() => model.scene.clone(), [model.scene]);
  return <primitive object={scene} scale={1} />;
}

function isGlbOrGltf(url?: string | null) {
  const value = String(url || "").toLowerCase();
  return /\.(gltf|glb)(\?|#|$)/.test(value);
}

function EmptyState({ previewImageUrl }: { previewImageUrl?: string | null }) {
  return (
    <div className="flex h-full w-full flex-col items-center justify-center gap-3 bg-muted/20 p-4">
      {previewImageUrl ? (
        <img
          src={previewImageUrl}
          alt="3D 预览"
          className="max-h-[65%] max-w-full rounded-lg border object-contain"
        />
      ) : (
        <Box className="h-14 w-14 text-muted-foreground/60" />
      )}
      <p className="text-sm text-muted-foreground">生成完成后可在此区域预览 3D 资产</p>
    </div>
  );
}

export function Model3DViewer({ modelUrl, previewImageUrl }: Model3DViewerProps) {
  if (!modelUrl) {
    return <EmptyState previewImageUrl={previewImageUrl} />;
  }

  if (!isGlbOrGltf(modelUrl)) {
    return (
      <div className="flex h-full w-full flex-col items-center justify-center gap-3 bg-muted/20 p-4">
        <AlertCircle className="h-8 w-8 text-amber-500" />
        <p className="text-sm text-muted-foreground">
          当前文件格式不支持内嵌预览，请在新窗口打开
        </p>
        <Button asChild variant="secondary" className="gap-2">
          <a href={modelUrl} target="_blank" rel="noreferrer">
            <ExternalLink className="h-4 w-4" />
            打开3D文件
          </a>
        </Button>
      </div>
    );
  }

  return (
    <ViewerErrorBoundary
      fallback={
        <div className="flex h-full w-full flex-col items-center justify-center gap-3 bg-muted/20 p-4">
          <AlertCircle className="h-8 w-8 text-destructive" />
          <p className="text-sm text-muted-foreground">3D 预览加载失败，请尝试在新窗口打开</p>
          <Button asChild variant="secondary" className="gap-2">
            <a href={modelUrl} target="_blank" rel="noreferrer">
              <ExternalLink className="h-4 w-4" />
              打开3D文件
            </a>
          </Button>
        </div>
      }
    >
      <Canvas camera={{ position: [2, 1.5, 2], fov: 45 }}>
        <ambientLight intensity={0.8} />
        <directionalLight position={[5, 8, 5]} intensity={1.2} />
        <Suspense
          fallback={
            <mesh>
              <boxGeometry args={[0.6, 0.6, 0.6]} />
              <meshStandardMaterial color="#94a3b8" wireframe />
            </mesh>
          }
        >
          <ModelScene url={modelUrl} />
          <Environment preset="city" />
        </Suspense>
        <OrbitControls enablePan enableZoom enableRotate />
      </Canvas>
      <div className="pointer-events-none absolute left-3 top-3 rounded-md bg-background/80 px-2 py-1 text-xs text-muted-foreground">
        <span className="inline-flex items-center gap-1">
          <Loader2 className="h-3 w-3" />
          拖拽旋转 / 滚轮缩放
        </span>
      </div>
    </ViewerErrorBoundary>
  );
}