"use client";

import React, { useEffect, useState } from "react";
import { motion, AnimatePresence } from "framer-motion";

const DIAGNOSTICS = [
  "SOLAR PANEL DİZİLERİ SENKRONİZE EDİLİYOR...",
  "RÜZGAR TRÜBİN KOMPANSATÖRLERİ DENGELENİYOR...",
  "KOJENERASYON OPTİMİZASYON KATI AKTİFLEŞTİRİLİYOR...",
  "YEŞİL DÖNÜŞÜM KARBON AĞI YAPILANDIRILIYOR...",
  "SCENERJİ ENERJİ AKIŞI STABİL DURUMA GETİRİLDİ.",
];

export default function Preloader({ onComplete }: { onComplete: () => void }) {
  const [progress, setProgress] = useState(0);
  const [diagnosticText, setDiagnosticText] = useState(DIAGNOSTICS[0]);
  const [isVisible, setIsVisible] = useState(true);

  useEffect(() => {
    let currentProgress = 0;
    const duration = 2400; // 2.4 seconds total preloader time
    const intervalTime = 20;
    const step = 100 / (duration / intervalTime);

    const timer = setInterval(() => {
      currentProgress += step;
      if (currentProgress >= 100) {
        currentProgress = 100;
        clearInterval(timer);
        setTimeout(() => {
          setIsVisible(false);
          setTimeout(onComplete, 800); // Allow curtain reveal animation to complete
        }, 500);
      }
      setProgress(Math.floor(currentProgress));

      // Update diagnostic text based on progress
      const diagIndex = Math.min(
        Math.floor((currentProgress / 100) * DIAGNOSTICS.length),
        DIAGNOSTICS.length - 1
      );
      setDiagnosticText(DIAGNOSTICS[diagIndex]);
    }, intervalTime);

    return () => clearInterval(timer);
  }, [onComplete]);

  return (
    <AnimatePresence>
      {isVisible && (
        <motion.div
          initial={{ opacity: 1 }}
          exit={{ 
            clipPath: "polygon(0 0, 100% 0, 100% 0, 0 0)",
            transition: { duration: 0.8, ease: [0.76, 0, 0.24, 1] }
          }}
          className="fixed inset-0 w-full h-full bg-[#03070b] z-[99999] flex flex-col items-center justify-center p-6 select-none"
        >
          {/* Subtle decorative grid in preloader */}
          <div 
            className="absolute inset-0 w-full h-full opacity-10 pointer-events-none"
            style={{
              backgroundImage: `
                linear-gradient(to right, rgba(13, 242, 147, 0.05) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(13, 242, 147, 0.05) 1px, transparent 1px)
              `,
              backgroundSize: "40px 40px",
            }}
          />

          <div className="w-full max-w-xl flex flex-col relative z-10">
            {/* Tech Logo / Icon */}
            <div className="flex items-center gap-3 mb-10">
              <div className="w-6 h-6 border border-accent-emerald flex items-center justify-center rounded-sm animate-spin-slow">
                <div className="w-2.5 h-2.5 bg-accent-emerald" />
              </div>
              <span className="font-space text-lg font-bold tracking-[0.2em] text-accent-emerald uppercase">
                SCENERJİ SYSTEM
              </span>
              <span className="ml-auto text-[10px] font-mono text-text-dim px-2 py-0.5 border border-text-dim/20 rounded-sm">
                v2.6.0
              </span>
            </div>

            {/* Diagnostic Logs */}
            <div className="h-16 font-mono text-xs text-text-secondary border-l border-accent-emerald/20 pl-4 mb-8 flex flex-col justify-center">
              <span className="text-[10px] text-accent-cyan tracking-wider uppercase mb-1">
                [SİSTEM TEŞHİS KÜTÜPHANESİ]
              </span>
              <span className="animate-pulse">{diagnosticText}</span>
            </div>

            {/* Progress Counter & Bar */}
            <div className="flex items-end justify-between font-space mb-3">
              <span className="text-sm font-light text-text-secondary tracking-widest uppercase">
                ENERJİ AĞI KALİBRASYONU
              </span>
              <span className="text-3xl font-bold text-accent-emerald tabular-nums">
                {progress}%
              </span>
            </div>
            
            <div className="w-full h-[2px] bg-bg-tertiary relative overflow-hidden rounded-full">
              <motion.div 
                className="h-full bg-gradient-to-r from-accent-cyan to-accent-emerald"
                style={{ width: `${progress}%` }}
              />
            </div>

            <div className="mt-8 flex justify-between font-mono text-[9px] text-text-dim uppercase tracking-wider">
              <span>KURULUM: AYRIS TECH</span>
              <span>LOKASYON: TÜRKİYE</span>
            </div>
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}