import React from 'react';
import {
    AbsoluteFill,
    interpolate,
    useCurrentFrame,
    useVideoConfig,
    Easing,
    Img,
    staticFile,
    spring,
    random,
} from 'remotion';
import { MouseCursor } from '../components/MouseCursor';
import { Button } from '@/src/components/Button';
import { Loader2, Check, UserCheck, ShieldCheck } from 'lucide-react';

// Import logo using the alias setup in remotion.config.ts
// We'll use the staticFile helper if it's in public, but these are in src/assets
// So we can try to import them directly if the bundler allows, or move them to public.
// Given Header.tsx imports them, they should be importable.
// import IconWhite from '@/src/assets/logo/Icon White Transparent.svg'; // Not used in this version
// Import black logo for light mode
import IconBlack from '@/src/assets/logo/Icon Black Transparent.svg';

const Background: React.FC<{ loadingOpacity: number }> = ({ loadingOpacity }) => {
    return (
        <AbsoluteFill className="bg-white">
            {/* Website-Matching Grid */}
            <div className="absolute inset-0">
                <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
                    <defs>
                        <pattern id="lightGrid" width="40" height="40" patternUnits="userSpaceOnUse">
                            <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#f1f5f9" strokeWidth="1" />
                        </pattern>
                    </defs>
                    <rect width="100%" height="100%" fill="url(#lightGrid)" />
                </svg>
            </div>

            {/* Subtle Gradient Overlay */}
            <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,transparent_0%,rgba(255,255,255,0.8)_100%)]" />

            {/* Dynamic "Processing" Rings (Background Activity during loading) */}
            <div
                className="absolute inset-0 flex items-center justify-center pointer-events-none"
                style={{ opacity: loadingOpacity * 0.1 }}
            >
                <div className="w-[500px] h-[500px] border border-slate-900 rounded-full animate-[spin_10s_linear_infinite] opacity-20 border-t-transparent" />
                <div className="absolute w-[400px] h-[400px] border border-slate-900 rounded-full animate-[spin_7s_linear_infinite_reverse] opacity-20 border-b-transparent" />
            </div>

            {/* STATIC Logo - Strictly no animation on the container */}
            <div className="absolute top-12 left-12 z-0">
                <div className="flex items-center gap-4">
                    <div className="w-14 h-14 flex items-center justify-center bg-white rounded-xl border border-slate-200 shadow-sm">
                        <Img src={IconBlack} className="w-8 h-8 opacity-90" />
                    </div>
                    <div className="flex flex-col opacity-80">
                        <span className="text-slate-900 font-sans font-bold text-lg tracking-tight leading-none">Mintel.me</span>
                        <span className="text-slate-400 font-serif italic text-xs mt-1">Component Library</span>
                    </div>
                </div>
            </div>
        </AbsoluteFill>
    );
};

// Toast Notification Component
const Toast: React.FC<{ show: boolean; text: string }> = ({ show, text }) => {
    const frame = useCurrentFrame();
    const { fps } = useVideoConfig();

    // Animate in/out based on 'show' prop would require state tracking or precise frame logic
    // We'll trust the parent to mount/unmount or pass an animatable value
    // For video, deterministic frame-based spring is best.

    // We'll actually control position purely by parent for simplicity in this demo context
    return (
        <div className="flex items-center gap-3 bg-slate-900 text-white px-6 py-4 rounded-xl shadow-2xl border border-slate-800">
            <div className="w-8 h-8 rounded-full bg-green-500/20 flex items-center justify-center text-green-400">
                <ShieldCheck size={18} />
            </div>
            <div className="flex flex-col">
                <span className="font-bold text-sm tracking-wide">Authentication Successful</span>
                <span className="text-slate-400 text-xs font-medium">Access granted to secure portal</span>
            </div>
        </div>
    );
}

export const ButtonShowcase: React.FC = () => {
    const frame = useCurrentFrame();
    const { width, height, fps } = useVideoConfig();

    // ---- SEQUENCE TIMELINE (300 frames / 5s) ----
    const ENTER_START = 20;
    const HOVER_START = 70;
    const CLICK_FRAME = 90;
    const LOADING_START = 95;
    const SUCCESS_START = 180;
    const TOAST_START = 190;
    const TOAST_END = 260;
    const EXIT_START = 220;

    // 1. Mouse Animation (Bézier Path)
    const getMousePos = (f: number) => {
        const startX = width * 1.2;
        const startY = height * 1.2;
        const targetX = width / 2;
        const targetY = height / 2;

        if (f < ENTER_START) return { x: startX, y: startY, vx: 0 };

        // Approach
        if (f < HOVER_START) {
            const t = interpolate(f, [ENTER_START, HOVER_START], [0, 1], { extrapolateRight: 'clamp' });
            const ease = Easing.bezier(0.16, 1, 0.3, 1)(t);
            const x = interpolate(ease, [0, 1], [startX, targetX]);
            const y = interpolate(ease, [0, 1], [startY, targetY]);
            return { x, y, vx: -10 }; // Approximate Velocity
        }

        // Hover
        if (f < EXIT_START) {
            const noise = Math.sin(f * 0.1) * 2;
            return { x: targetX + noise, y: targetY + noise, vx: 0 };
        }

        // Exit
        const t = interpolate(f, [EXIT_START, EXIT_START + 30], [0, 1], { extrapolateLeft: 'clamp' });
        const ease = Easing.exp(t);
        return {
            x: interpolate(ease, [0, 1], [targetX, width * 0.9]),
            y: interpolate(ease, [0, 1], [targetY, -100]),
            vx: 10
        };
    };

    const { x: mouseX, y: mouseY, vx } = getMousePos(frame);

    // 3D Cursor Skew
    const cursorSkew = interpolate(vx, [-20, 20], [20, -20], { extrapolateRight: 'clamp', extrapolateLeft: 'clamp' });
    const isClicking = frame >= CLICK_FRAME && frame < CLICK_FRAME + 8;
    const clickRotate = isClicking ? 30 : 0;

    // 2. Button State Logic
    const isLoading = frame >= LOADING_START && frame < SUCCESS_START;
    const isSuccess = frame >= SUCCESS_START;

    // Loading Spinner Rotation
    const spinnerRot = interpolate(frame, [LOADING_START, SUCCESS_START], [0, 720]);

    // Button Scale Physics
    const pressSpring = spring({ frame: frame - CLICK_FRAME, fps, config: { stiffness: 400, damping: 20 } });
    const successSpring = spring({ frame: frame - SUCCESS_START, fps, config: { stiffness: 200, damping: 15 } });

    // Morph scale: Click(Compress) -> Loading(Normal) -> Success(Pop)
    let buttonScale = 1;
    if (frame >= CLICK_FRAME && frame < LOADING_START) {
        buttonScale = 1 - (pressSpring * 0.05);
    } else if (isSuccess) {
        buttonScale = 1 + (successSpring * 0.05);
    }

    // Button Width Morph (Optional: Make it circle on load? Keeping it wide for consistency is safer)

    // 3. Toast Animation
    const toastSpring = spring({ frame: frame - TOAST_START, fps, config: { stiffness: 100, damping: 15 } });
    const toastExit = spring({ frame: frame - TOAST_END, fps, config: { stiffness: 100, damping: 20 } });
    const toastY = interpolate(toastSpring, [0, 1], [100, -80]) + interpolate(toastExit, [0, 1], [0, 200]);
    const toastOpacity = interpolate(toastSpring, [0, 1], [0, 1]) - interpolate(toastExit, [0, 0.5], [0, 1]);

    return (
        <AbsoluteFill className="items-center justify-center overflow-hidden bg-white">
            <Background loadingOpacity={isLoading ? 1 : 0} />

            {/* Main Stage */}
            <div style={{ perspective: '1000px', zIndex: 10 }}>
                {/* Button Container */}
                <div
                    style={{
                        transform: `scale(${buttonScale})`,
                        transition: 'transform 0.1s'
                    }}
                >
                    <Button
                        href="#"
                        variant="primary"
                        showArrow={!isLoading && !isSuccess}
                        className={`
                            !transition-all !duration-500 
                            !px-16 !py-8 !text-2xl !font-bold 
                            ${isSuccess
                                ? '!bg-white !text-slate-900 !border-slate-900 shadow-none' // Success: Outline/Minimal
                                : '!bg-slate-900 !text-white !border-none !shadow-2xl !shadow-slate-300' // Default/Load: Solid
                            }
                            !rounded-full
                        `}
                    >
                        <div className="flex items-center gap-4 min-w-[240px] justify-center text-center">
                            {/* Default State */}
                            {!isLoading && !isSuccess && (
                                <span className="animate-fade-in">Start Verification</span>
                            )}

                            {/* Loading State */}
                            {isLoading && (
                                <div className="absolute inset-0 flex items-center justify-center">
                                    <Loader2
                                        className="animate-spin text-slate-400"
                                        size={32}
                                        style={{ transform: `rotate(${spinnerRot}deg)` }}
                                    />
                                </div>
                            )}

                            {/* Success State */}
                            {isSuccess && (
                                <div className="flex items-center gap-3 animate-slide-up text-slate-900">
                                    <Check size={28} strokeWidth={3} />
                                    <span>Verified</span>
                                </div>
                            )}
                        </div>
                    </Button>
                </div>
            </div>

            {/* Toast Notification Layer - Bottom Center */}
            <div
                className="absolute bottom-0 left-0 right-0 flex justify-center pb-20"
                style={{
                    transform: `translateY(${toastY}px)`,
                    opacity: Math.max(0, toastOpacity)
                }}
            >
                <Toast show={true} text="" />
            </div>

            {/* 3D Cursor */}
            <div
                style={{
                    position: 'absolute',
                    top: 0, left: 0,
                    transform: `translate(${mouseX}px, ${mouseY}px) skewX(${cursorSkew}deg) rotateX(${clickRotate}deg)`,
                    zIndex: 1000,
                    pointerEvents: 'none'
                }}
            >
                <MouseCursor x={0} y={0} isClicking={isClicking} />
            </div>
        </AbsoluteFill>
    );
};