'use client';

import React, { useEffect, useMemo, useRef, useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Loader2 } from 'lucide-react';

interface ScriptLoadingProps {
  /** When true, progress snaps to 100% */
  isCompleted?: boolean;
  /** Estimated total duration in ms to reach ~95% (default 80s) */
  estimatedMs?: number;
}

/**
 * Dark-themed loading with spinner, staged copy and progress bar.
 * Progress linearly approaches 95% over estimatedMs, then snaps to 100% if isCompleted=true.
 */
export const ScriptLoading: React.FC<ScriptLoadingProps> = ({ isCompleted = false, estimatedMs = 80000 }) => {
  const [progress, setProgress] = useState<number>(0);
  const intervalRef = useRef<NodeJS.Timeout | null>(null);

  const targetWhenPending = 95; // cap before data arrives
  const tickMs = 200; // update cadence

  // staged messages by progress
  const stageMessage = useMemo(() => {
    if (progress >= 100) return 'Done';
    if (progress >= 95) return 'Almost done, please wait...';
    if (progress >= 82) return 'Generating script and prompt...';
    if (progress >= 63) return 'Polishing dialogue and transitions...';
    if (progress >= 45) return 'Arranging shots and rhythm...';
    if (progress >= 28) return 'Shaping characters and scene details...';
    if (progress >= 12) return 'Outlining the story...';
    return 'Waking up the creative engine...';
  }, [progress]);

  // progress auto-increment
  useEffect(() => {
    const desiredTarget = isCompleted ? 100 : targetWhenPending;

    // when completed, quickly animate to 100
    if (isCompleted) {
      setProgress((prev) => (prev < 100 ? Math.max(prev, 96) : 100));
    }

    if (intervalRef.current) clearInterval(intervalRef.current);

    // compute linear increment to reach target in remaining estimated time
    const totalTicks = Math.ceil(estimatedMs / tickMs);
    const baseIncrement = (targetWhenPending - 0) / Math.max(totalTicks, 1);

    intervalRef.current = setInterval(() => {
      setProgress((prev) => {
        const target = isCompleted ? 100 : desiredTarget;
        if (prev >= target) return prev;
        const remaining = target - prev;
        const step = Math.max(Math.min(baseIncrement, remaining * 0.25), 0.2);
        const next = Math.min(prev + step, target);
        return Number(next.toFixed(2));
      });
    }, tickMs);

    return () => {
      if (intervalRef.current) clearInterval(intervalRef.current);
    };
  }, [isCompleted, estimatedMs]);

  const widthStyle = { width: `${Math.min(progress, 100)}%` };

  return (
    <div data-alt="script-loading-container" className="flex w-full h-full items-center justify-center">
      <div data-alt="loading-stack" className="flex w-full h-full flex-col items-center justify-center gap-6 px-4">
        {/* subtle animated halo */}
        {/* <div data-alt="spinner-wrapper" className="relative">
          <motion.div
            className="absolute inset-0 rounded-full blur-2xl"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.8 }}
            style={{
              background: 'conic-gradient(from 0deg, rgba(139,92,246,0.25), rgba(34,211,238,0.25), rgba(139,92,246,0.25))',
              width: 120,
              height: 120
            }}
          />
          <div className="relative flex items-center justify-center">
            <Loader2 className="h-10 w-10 text-cyan-300 animate-spin" />
          </div>
        </div> */}

        <AnimatePresence mode="wait">
          <motion.div
            key={stageMessage}
            data-alt="loading-message"
            initial={{ opacity: 0, y: 6 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -6 }}
            transition={{ duration: 0.25 }}
            className="text-center text-base md:text-lg text-white/90"
          >
            {stageMessage}
          </motion.div>
        </AnimatePresence>

        <div data-alt="progress-wrapper" className="w-full max-w-xl">
          <div className="h-2 w-full rounded-full bg-white/10 overflow-hidden">
            <motion.div
              data-alt="progress-bar"
              className="h-full rounded-full bg-gradient-to-r from-indigo-400 via-cyan-300 to-indigo-400"
              animate={widthStyle}
              transition={{ type: 'tween', ease: 'easeOut', duration: 0.25 }}
            />
          </div>
          <div className="mt-2 flex items-center justify-between text-xs text-white/60">
            <span data-alt="progress-label">Generating Script...</span>
            <span data-alt="progress-percent">{Math.round(progress)}%</span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ScriptLoading;