/* ====================================================
 * Loading Screen Component
 * Hiển thị logo, site_name và tagline từ API settings
 * ==================================================== */

'use client';

import { useEffect, useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { useLoadingScreen } from '@/hooks';
import { coreService } from '@/services/coreService';

interface LoadingData {
  logoUrl: string | null;
  siteName: string;
  tagline: string;
}

export default function LoadingScreen() {
  const isLoading = useLoadingScreen(2200);
  const [data, setData] = useState<LoadingData>({
    logoUrl: null,
    siteName: 'Vitalist Pharma',
    tagline: 'Vì sức khỏe cộng đồng',
  });

  useEffect(() => {
    coreService.getSettings()
      .then((s) => {
        setData({
          logoUrl: s?.logo || null,
          siteName: s?.site_name || 'Vitalist Pharma',
          tagline: s?.tagline || 'Vì sức khỏe cộng đồng',
        });
      })
      .catch(() => {/* giữ giá trị mặc định */});
  }, []);

  return (
    <AnimatePresence>
      {isLoading && (
        <motion.div
          className="loading-screen"
          exit={{ opacity: 0 }}
          transition={{ duration: 0.5, ease: 'easeInOut' }}
        >
          {/* Logo + Text Animation */}
          <motion.div
            initial={{ scale: 0.5, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            transition={{ duration: 0.8, ease: 'easeOut' }}
            className="flex flex-col items-center"
          >
            {/* Logo */}
            <motion.div
              className="relative mb-6"
              animate={{ rotateY: [0, 360] }}
              transition={{ duration: 2, ease: 'easeInOut', repeat: Infinity }}
            >
              {data.logoUrl ? (
                <div className="w-24 h-24 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center overflow-hidden p-2">
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img
                    src={data.logoUrl}
                    alt={data.siteName}
                    className="w-full h-full object-contain"
                  />
                </div>
              ) : (
                <div className="w-20 h-20 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center">
                  <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M24 4L28 12H36L30 18L32 26L24 21L16 26L18 18L12 12H20L24 4Z" fill="white" opacity="0.9"/>
                    <path d="M24 28C30.6274 28 36 33.3726 36 40V44H12V40C12 33.3726 17.3726 28 24 28Z" fill="white" opacity="0.7"/>
                    <circle cx="24" cy="20" r="4" fill="white"/>
                  </svg>
                </div>
              )}
            </motion.div>

            {/* Brand Name - từ admin */}
            <motion.h1
              className="text-3xl font-bold text-white tracking-wider font-heading"
              initial={{ y: 20, opacity: 0 }}
              animate={{ y: 0, opacity: 1 }}
              transition={{ delay: 0.3, duration: 0.6 }}
              style={{ fontFamily: 'var(--font-heading)' }}
            >
              {data.siteName}
            </motion.h1>

            {/* Tagline - từ admin */}
            <motion.p
              className="text-white/70 text-sm mt-2 tracking-widest uppercase"
              initial={{ y: 10, opacity: 0 }}
              animate={{ y: 0, opacity: 1 }}
              transition={{ delay: 0.6, duration: 0.6 }}
            >
              {data.tagline}
            </motion.p>
          </motion.div>

          {/* Loading Bar */}
          <motion.div
            className="loading-bar mt-10"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 0.8 }}
          >
            <div className="loading-bar-inner" />
          </motion.div>

          {/* Decorative Circles */}
          <motion.div
            className="absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-white/5"
            animate={{ scale: [1, 1.2, 1], opacity: [0.05, 0.1, 0.05] }}
            transition={{ duration: 3, repeat: Infinity }}
          />
          <motion.div
            className="absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-white/5"
            animate={{ scale: [1.2, 1, 1.2], opacity: [0.08, 0.03, 0.08] }}
            transition={{ duration: 4, repeat: Infinity }}
          />
        </motion.div>
      )}
    </AnimatePresence>
  );
}