'use client';

import { useSession } from 'next-auth/react';
import { useState, useEffect, useRef } from 'react';
import { Check, User, RefreshCw } from 'lucide-react';
import { Emoji } from '@/components/ui/Emoji';

const WELCOME_GREETINGS = [
  'Bienvenue',
  'Salut',
  'Coucou',
  'Hello',
  'Hey',
  'Salutations',
  'Bonjour',
  'Hola',
  'Ciao',
  'Yo',
];

const WELCOME_MESSAGES = [
  { text: 'Prêt à conquérir la journée ?', icon: '🚀' },
  { text: 'Votre productivité vous attend !', icon: '⚡' },
  { text: "C'est parti pour une journée productive !", icon: '💪' },
  { text: 'Organisons ensemble vos tâches !', icon: '📋' },
  { text: 'Votre tableau de bord vous attend !', icon: '🎯' },
  { text: 'Prêt à faire la différence ?', icon: '✨' },
  { text: "Concentrons-nous sur l'essentiel !", icon: '🎯' },
  { text: 'Une nouvelle journée, de nouvelles opportunités !', icon: '🌟' },
  { text: 'Votre succès commence ici !', icon: '🏆' },
  { text: 'Transformons vos objectifs en réalité !', icon: '🎪' },
  { text: "C'est l'heure de briller !", icon: '⭐' },
  { text: "Votre efficacité n'attend que vous !", icon: '🔥' },
  { text: 'Organisons votre succès !', icon: '📊' },
  { text: 'Prêt à dépasser vos limites ?', icon: '🚀' },
  { text: 'Votre productivité vous remercie !', icon: '🙏' },
  { text: "C'est parti pour une journée exceptionnelle !", icon: '🌈' },
  { text: 'Votre organisation parfaite vous attend !', icon: '🎨' },
  { text: 'Prêt à accomplir de grandes choses ?', icon: '🏅' },
  { text: 'Votre motivation est votre force !', icon: '💎' },
  { text: 'Créons ensemble votre succès !', icon: '🎭' },
  // Messages humoristiques
  { text: 'Attention, productivité en approche !', icon: '🚨' },
  { text: 'Votre cerveau va être bien occupé !', icon: '🧠' },
  { text: 'Préparez-vous à être impressionné par vous-même !', icon: '😎' },
  { text: 'Mode super-héros activé !', icon: '🦸‍♂️' },
  { text: 'Votre liste de tâches tremble déjà !', icon: '😱' },
  { text: 'Prêt à faire exploser vos objectifs ?', icon: '💥' },
  { text: "Votre procrastination n'a qu'à bien se tenir !", icon: '😤' },
  { text: "C'est l'heure de montrer qui est le boss !", icon: '👑' },
  { text: 'Votre café peut attendre, vos tâches non !', icon: '☕' },
  { text: 'Prêt à devenir la légende de la productivité ?', icon: '🏆' },
  { text: 'Attention, efficacité maximale détectée !', icon: '⚡' },
  { text: 'Votre motivation est plus forte que le café !', icon: '☕' },
  { text: 'Prêt à faire rougir votre calendrier ?', icon: '📅' },
  { text: 'Votre énergie positive est contagieuse !', icon: '😄' },
  { text: "C'est parti pour une journée épique !", icon: '🎬' },
  { text: 'Votre détermination brille plus que le soleil !', icon: '☀️' },
  { text: 'Prêt à transformer le chaos en ordre ?', icon: '🎯' },
  { text: "Votre focus est plus précis qu'un laser !", icon: '🔴' },
  { text: "C'est l'heure de montrer vos super-pouvoirs !", icon: '🦸‍♀️' },
  { text: 'Votre organisation va faire des jaloux !', icon: '😏' },
  { text: 'Prêt à devenir le héros de votre propre histoire ?', icon: '📚' },
  { text: 'Votre productivité va battre des records !', icon: '🏃‍♂️' },
  { text: 'Attention, génie au travail !', icon: '🧪' },
  { text: 'Votre créativité déborde !', icon: '🎨' },
  { text: 'Prêt à faire trembler vos deadlines ?', icon: '⏰' },
  { text: 'Votre énergie positive illumine la pièce !', icon: '💡' },
  { text: "C'est parti pour une aventure productive !", icon: '🗺️' },
  { text: 'Votre motivation est plus forte que la gravité !', icon: '🌍' },
  { text: "Prêt à devenir le maître de l'organisation ?", icon: '🎭' },
  { text: 'Votre efficacité va faire des étincelles !', icon: '✨' },
];

const TIME_BASED_MESSAGES = {
  morning: [
    { text: 'Bonjour ! Une belle journée vous attend !', icon: '☀️' },
    { text: "Réveillez-vous, c'est l'heure de briller !", icon: '🌅' },
    { text: 'Le matin est le moment parfait pour commencer !', icon: '🌄' },
    { text: 'Une nouvelle journée, de nouvelles possibilités !', icon: '🌞' },
    { text: 'Bonjour ! Votre café vous attend !', icon: '☕' },
    { text: "Réveillez-vous, les tâches n'attendent pas !", icon: '⏰' },
    { text: 'Bonjour ! Prêt à conquérir le monde ?', icon: '🌍' },
    { text: 'Le matin, tout est possible !', icon: '🌅' },
    { text: 'Bonjour ! Votre motivation vous appelle !', icon: '📞' },
    { text: "Réveillez-vous, c'est l'heure de la productivité !", icon: '⚡' },
  ],
  afternoon: [
    { text: 'Bon après-midi ! Continuons sur cette lancée !', icon: '🌤️' },
    { text: "L'après-midi est parfait pour avancer !", icon: '☀️' },
    {
      text: 'Encore quelques heures pour accomplir vos objectifs !',
      icon: '⏰',
    },
    { text: "L'énergie de l'après-midi vous porte !", icon: '💪' },
    { text: 'Bon après-midi ! Le momentum continue !', icon: '🚀' },
    { text: "L'après-midi, c'est l'heure de l'efficacité !", icon: '⚡' },
    { text: 'Bon après-midi ! Votre café de 14h vous attend !', icon: '☕' },
    { text: "L'après-midi, tout s'accélère !", icon: '🏃‍♂️' },
    { text: 'Bon après-midi ! Prêt pour la deuxième mi-temps ?', icon: '⚽' },
    { text: "L'après-midi, c'est l'heure de briller !", icon: '✨' },
  ],
  evening: [
    { text: 'Bonsoir ! Terminons la journée en beauté !', icon: '🌆' },
    { text: 'Le soir est idéal pour finaliser vos tâches !', icon: '🌇' },
    { text: 'Une dernière poussée avant la fin de journée !', icon: '🌃' },
    { text: 'Le crépuscule vous accompagne !', icon: '🌅' },
    { text: 'Bonsoir ! Prêt pour le sprint final ?', icon: '🏃‍♀️' },
    { text: "Le soir, c'est l'heure de la victoire !", icon: '🏆' },
    { text: 'Bonsoir ! Votre récompense vous attend !', icon: '🎁' },
    { text: 'Le soir, on termine en héros !', icon: '🦸‍♂️' },
    { text: 'Bonsoir ! Prêt à clôturer cette journée ?', icon: '📝' },
    { text: "Le soir, c'est l'heure de la satisfaction !", icon: '😌' },
  ],
};

function getTimeBasedMessage(): { text: string; icon: string } {
  const hour = new Date().getHours();

  if (hour >= 5 && hour < 12) {
    return TIME_BASED_MESSAGES.morning[
      Math.floor(Math.random() * TIME_BASED_MESSAGES.morning.length)
    ];
  } else if (hour >= 12 && hour < 18) {
    return TIME_BASED_MESSAGES.afternoon[
      Math.floor(Math.random() * TIME_BASED_MESSAGES.afternoon.length)
    ];
  } else {
    return TIME_BASED_MESSAGES.evening[
      Math.floor(Math.random() * TIME_BASED_MESSAGES.evening.length)
    ];
  }
}

function getRandomWelcomeMessage(): { text: string; icon: string } {
  return WELCOME_MESSAGES[Math.floor(Math.random() * WELCOME_MESSAGES.length)];
}

function getRandomGreeting(): string {
  return WELCOME_GREETINGS[
    Math.floor(Math.random() * WELCOME_GREETINGS.length)
  ];
}

export function WelcomeSection() {
  const { data: session } = useSession();
  const [welcomeMessage, setWelcomeMessage] = useState<{
    text: string;
    icon: string;
  }>({ text: '', icon: '' });
  const [timeMessage, setTimeMessage] = useState<{
    text: string;
    icon: string;
  }>({ text: '', icon: '' });
  const [greeting, setGreeting] = useState<string>('');
  const [isAnimating, setIsAnimating] = useState(false);
  const [particleCount, setParticleCount] = useState(0);
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    // Générer un message de bienvenue aléatoire
    setWelcomeMessage(getRandomWelcomeMessage());
    setTimeMessage(getTimeBasedMessage());
    setGreeting(getRandomGreeting());

    // Animation d'entrée
    setTimeout(() => setIsAnimating(true), 100);
  }, []);

  const handleRefresh = () => {
    setIsAnimating(false);
    setParticleCount((prev) => prev + 1);

    setTimeout(() => {
      setWelcomeMessage(getRandomWelcomeMessage());
      setTimeMessage(getTimeBasedMessage());
      setGreeting(getRandomGreeting());
      setIsAnimating(true);
    }, 300);
  };

  if (!session?.user) {
    return null;
  }

  const displayName =
    session.user.name ||
    `${session.user.firstName || ''} ${session.user.lastName || ''}`.trim() ||
    session.user.email;

  return (
    <div
      ref={containerRef}
      className="relative overflow-hidden bg-gradient-to-br from-[var(--primary)]/5 via-[var(--accent)]/8 to-[var(--purple)]/5 rounded-2xl p-8 mb-8 border border-[var(--primary)]/20 backdrop-blur-sm"
      style={{
        background: `
          radial-gradient(circle at 20% 80%, color-mix(in srgb, var(--primary) 15%, transparent) 0%, transparent 50%),
          radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 50%),
          radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--purple) 10%, transparent) 0%, transparent 50%),
          linear-gradient(135deg, var(--card) 0%, color-mix(in srgb, var(--card) 95%, var(--primary)) 100%)
        `,
      }}
    >
      {/* Particules animées */}
      <div className="absolute inset-0 pointer-events-none">
        {Array.from({ length: 12 }).map((_, i) => (
          <div
            key={`particle-${particleCount}-${i}`}
            className="absolute w-1 h-1 rounded-full opacity-60"
            style={{
              backgroundColor: `var(--${['primary', 'accent', 'purple', 'success'][i % 4]})`,
              left: `${Math.random() * 100}%`,
              top: `${Math.random() * 100}%`,
              animation: `float ${3 + Math.random() * 4}s ease-in-out infinite`,
              animationDelay: `${Math.random() * 2}s`,
            }}
          />
        ))}
      </div>

      {/* Effet de brillance */}
      <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent transform -skew-x-12 animate-shimmer" />

      <div className="relative z-10 flex flex-col lg:flex-row items-center lg:items-start gap-6">
        {/* Avatar avec animations */}
        <div className="flex-shrink-0 relative group">
          <div className="absolute inset-0 bg-gradient-to-r from-[var(--primary)] via-[var(--accent)] to-[var(--purple)] rounded-full blur-lg opacity-30 group-hover:opacity-50 transition-opacity duration-500 animate-pulse" />

          {session.user.avatar ? (
            <div className="relative">
              <div className="absolute inset-0 bg-gradient-to-r from-[var(--primary)] to-[var(--accent)] rounded-full animate-spin-slow opacity-20" />
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={session.user.avatar}
                alt="Avatar"
                className="relative w-20 h-20 rounded-full object-cover border-4 border-[var(--primary)]/40 shadow-2xl transition-all duration-500 group-hover:scale-110 group-hover:border-[var(--accent)]/60"
              />
              <div className="absolute -bottom-2 -right-2 w-7 h-7 bg-gradient-to-r from-[var(--success)] to-[var(--green)] rounded-full border-4 border-[var(--card)] flex items-center justify-center shadow-lg">
                <Check className="w-4 h-4 text-white" />
              </div>
            </div>
          ) : (
            <div className="relative w-20 h-20 rounded-full bg-gradient-to-br from-[var(--primary)]/30 to-[var(--accent)]/30 border-4 border-[var(--primary)]/40 flex items-center justify-center shadow-2xl transition-all duration-500 group-hover:scale-110 group-hover:border-[var(--accent)]/60">
              <User className="w-10 h-10 text-[var(--primary)] transition-colors duration-500 group-hover:text-[var(--accent)]" />
            </div>
          )}
        </div>

        {/* Message de bienvenue avec animations */}
        <div className="flex-1 text-center lg:text-left space-y-3">
          <div className="overflow-hidden">
            <h1
              className={`text-3xl lg:text-4xl font-bold transition-all duration-700 ${
                isAnimating
                  ? 'translate-y-0 opacity-100'
                  : 'translate-y-4 opacity-0'
              }`}
              style={{ transitionDelay: '0.1s' }}
            >
              <span
                className="inline-block animate-wave text-[var(--foreground)]"
                style={{ animationDelay: '0.1s' }}
              >
                {greeting}
              </span>
              <span className="mx-2 text-[var(--primary)] animate-pulse">
                ,
              </span>
              <span
                className="inline-block animate-wave text-[var(--foreground)]"
                style={{ animationDelay: '0.3s' }}
              >
                {displayName}
              </span>
              <span className="ml-2 text-[var(--accent)] animate-bounce">
                !
              </span>
            </h1>
          </div>

          <div className="overflow-hidden">
            <p
              className={`text-lg text-[var(--muted-foreground)] transition-all duration-700 ${
                isAnimating
                  ? 'translate-y-0 opacity-100'
                  : 'translate-y-4 opacity-0'
              }`}
              style={{ transitionDelay: '0.3s' }}
            >
              {timeMessage.text} <Emoji emoji={timeMessage.icon} size={16} />
            </p>
          </div>

          <div className="overflow-hidden">
            <p
              className={`text-base font-medium bg-gradient-to-r from-[var(--primary)] to-[var(--accent)] bg-clip-text text-transparent transition-all duration-700 ${
                isAnimating
                  ? 'translate-y-0 opacity-100'
                  : 'translate-y-4 opacity-0'
              }`}
              style={{ transitionDelay: '0.5s' }}
            >
              {welcomeMessage.text}{' '}
              <Emoji emoji={welcomeMessage.icon} size={16} />
            </p>
          </div>
        </div>

        {/* Bouton avec animations avancées */}
        <div className="flex-shrink-0">
          <button
            onClick={handleRefresh}
            className="group relative p-4 rounded-2xl bg-gradient-to-br from-[var(--card)] to-[var(--card-hover)] border border-[var(--border)] hover:border-[var(--primary)]/40 transition-all duration-500 hover:shadow-2xl hover:shadow-[var(--primary)]/20 hover:-translate-y-1"
            title="Changer le message"
          >
            <div className="absolute inset-0 bg-gradient-to-r from-[var(--primary)]/10 to-[var(--accent)]/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
            <div className="relative">
              <RefreshCw className="w-6 h-6 text-[var(--muted-foreground)] group-hover:text-[var(--primary)] transition-all duration-500 group-hover:rotate-180" />
            </div>
          </button>
        </div>
      </div>

      <style jsx>{`
        @keyframes float {
          0%,
          100% {
            transform: translateY(0px) rotate(0deg);
          }
          50% {
            transform: translateY(-20px) rotate(180deg);
          }
        }

        @keyframes shimmer {
          0% {
            transform: translateX(-100%) skewX(-12deg);
          }
          100% {
            transform: translateX(200%) skewX(-12deg);
          }
        }

        @keyframes wave {
          0%,
          100% {
            transform: translateY(0);
          }
          50% {
            transform: translateY(-5px);
          }
        }

        @keyframes spin-slow {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }

        .animate-shimmer {
          animation: shimmer 3s ease-in-out infinite;
        }

        .animate-wave {
          animation: wave 2s ease-in-out infinite;
        }

        .animate-spin-slow {
          animation: spin-slow 8s linear infinite;
        }
      `}</style>
    </div>
  );
}
