'use client';
import { useEffect, useRef, useState } from 'react';
import { useParams } from 'react-router';
import { Box } from 'lucide-react';
import { pb } from '~/lib/pocketbase';

// --- A-FRAME/AR.JS CUSTOM ELEMENTS TYPING FIX ---
declare module 'react' {
    namespace JSX {
        interface IntrinsicElements {
            'a-scene': any;
            'a-assets': any;
            'a-asset-item': any;
            'a-marker': any;
            'a-entity': any;
            'a-text': any;
            'model-viewer': React.DetailedHTMLProps<
                React.HTMLAttributes<HTMLElement>,
                HTMLElement
            > & {
                src?: string;
                'ios-src'?: string;
                ar?: boolean;
                'ar-modes'?: string;
                'ar-scale'?: string;
                'ar-placement'?: string;
                'camera-controls'?: boolean;
                'touch-action'?: string;
                alt?: string;
                'shadow-intensity'?: string | number;
                'shadow-softness'?: string | number;
                exposure?: string | number;
                'interaction-prompt'?: string;
                'min-camera-orbit'?: string;
                'max-camera-orbit'?: string;
                'camera-orbit'?: string;
                'field-of-view'?: string;
                scale?: string;
                'auto-rotate'?: boolean;
                'rotation-per-second'?: string;
                onLoad?: (e: any) => void;
                'onAr-status'?: (e: any) => void;
                'onModel-visibility'?: (e: any) => void;
                'onCamera-change'?: (e: any) => void;
            };
        }
    }
}

const AR_HINTS = [
    'Arranging models to view…',
    'Find a flat surface & step back…',
    'Keep your camera steady…',
    'Almost ready, clear some space…',
    'Preparing your AR experience…',
];

export default function ARViewer() {
    const { id } = useParams();
    const modelViewerRef = useRef<HTMLElement>(null);
    const [asset, setAsset] = useState<any>(null);
    const [scriptLoaded, setScriptLoaded] = useState(false);
    const [arLoading, setArLoading] = useState(false);
    const [showHints, setShowHints] = useState(false);
    const [hintIndex, setHintIndex] = useState(0);
    const hintIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
    const hintDelayRef = useRef<ReturnType<typeof setTimeout> | null>(null);

    useEffect(() => {
        if (!id) return;
        const loadAsset = async () => {
            const data = await pb.collection('ar_assets').getOne(id);
            if (data) setAsset(data);
        };
        loadAsset();
    }, [id]);

    useEffect(() => {
        if (document.getElementById('model-viewer-script')) {
            setScriptLoaded(true);
            return;
        }
        const script = document.createElement('script');
        script.id = 'model-viewer-script';
        script.type = 'module';
        script.src = 'https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js';
        script.onload = () => setScriptLoaded(true);
        document.head.appendChild(script);
    }, []);

    const handleARClick = () => {
        const mv = modelViewerRef.current as any;
        if (!mv?.activateAR || arLoading) return;

        setArLoading(true);
        setShowHints(false);
        setHintIndex(0);
        mv.activateAR();

        const cleanup = () => {
            setArLoading(false);
            setShowHints(false);
            if (hintIntervalRef.current) clearInterval(hintIntervalRef.current);
            if (hintDelayRef.current) clearTimeout(hintDelayRef.current);
        };

        // Only show hints if AR is still loading after 1.5s
        hintDelayRef.current = setTimeout(() => {
            setShowHints(true);
            hintIntervalRef.current = setInterval(() => {
                setHintIndex((prev) => (prev + 1) % AR_HINTS.length);
            }, 2000);
        }, 1500);

        const onArStatus = (e: any) => {
            const { status } = e.detail ?? {};
            if (
                status === 'session-started' ||
                status === 'object-placed' ||
                status === 'failed' ||
                status === 'not-presenting'
            ) {
                cleanup();
                mv.removeEventListener('ar-status', onArStatus);
            }
        };
        mv.addEventListener('ar-status', onArStatus);

        // Fallback reset after 15s
        setTimeout(cleanup, 15000);
    };

    const glbUrl = asset?.glb_file
        ? pb.files.getURL(asset, asset.glb_file)
        : asset?.glb_url;

    const usdzUrl = asset?.usdz_file
        ? pb.files.getURL(asset, asset.usdz_file)
        : asset?.usdz_url;

    if (!scriptLoaded || !asset) {
        return (
            <div className="fixed inset-0 bg-black flex flex-col items-center justify-center">
                <div className="w-10 h-10 rounded-full border-2 border-orange-500/20 border-t-orange-500 animate-spin mb-4" />
                <p className="text-white/40 text-xs tracking-widest uppercase">Loading AR Experience…</p>
            </div>
        );
    }

    return (
        <div className="fixed inset-0 bg-black flex flex-col overflow-hidden">
            <style>{`
                model-viewer::part(default-ar-button) { display: none !important; }
            `}</style>

            <model-viewer
                ref={modelViewerRef}
                src={glbUrl}
                ios-src={usdzUrl}
                ar
                ar-modes="webxr scene-viewer quick-look"
                ar-scale="auto"
                ar-placement="floor"
                camera-controls
                touch-action="none"
                interaction-prompt="none"
                shadow-intensity="1"
                shadow-softness="0.8"
                exposure="1"
                className="w-full flex-1 min-h-0 block"
                onError={(e: any) => {
                    console.error('Model viewer error:', e);
                    console.error('Failed to load:', glbUrl);
                }}
                onLoad={() => console.log('Model loaded successfully')}
            />

            <div className="absolute top-0 left-0 right-0 flex items-start justify-between px-5 pt-5 pb-5 pointer-events-none">
                {asset?.name && (
                    <span className="text-white text-sm font-bold tracking-widest uppercase">
                        {asset.name}
                    </span>
                )}
                <div className="pointer-events-auto w-9 h-9 bg-black border border-orange-500 rounded-lg flex items-center justify-center shrink-0 ml-3">
                    <span className="text-orange-500 font-black text-sm leading-none">t.</span>
                </div>
            </div>

            <div className="absolute bottom-0 left-0 right-0 flex items-center justify-end px-5 pt-5 pb-6">
                <button
                    onClick={handleARClick}
                    disabled={arLoading}
                    className={`flex items-center gap-2 text-black font-bold text-xs tracking-widest uppercase px-5 py-3 rounded-lg transition-all duration-150 shadow-[0_0_24px_rgba(249,115,22,0.4)]
                        ${arLoading
                            ? 'bg-orange-500/80 cursor-not-allowed'
                            : 'bg-orange-500 hover:bg-orange-400 active:scale-95'
                        } ${showHints ? 'min-w-[220px] justify-center' : ''}`}
                >
                    {arLoading && showHints ? (
                        <>
                            <div className="w-3.5 h-3.5 rounded-full border-2 border-black/30 border-t-black animate-spin shrink-0" />
                            <span className="truncate">{AR_HINTS[hintIndex]}</span>
                        </>
                    ) : arLoading ? (
                        <>
                            <div className="w-3.5 h-3.5 rounded-full border-2 border-black/30 border-t-black animate-spin shrink-0" />
                            View in AR
                        </>
                    ) : (
                        <>
                            <Box size={16} />
                            View in AR
                        </>
                    )}
                </button>
            </div>
        </div>
    );
}