'use client';

import { useSession } from 'next-auth/react';
import { useTranslations } from 'next-intl';
import { motion } from 'framer-motion';
import { Sparkles, Sun, Moon, CloudSun } from 'lucide-react';

import { cn } from '@/lib/utils';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { WidgetContainer } from '../widget-container';

interface WelcomeWidgetProps {
  id: string;
  isEditing?: boolean;
  onRemove?: () => void;
  className?: string;
}

/**
 * Get the appropriate greeting based on the current hour
 */
function getGreetingKey(hour: number): string {
  if (hour >= 5 && hour < 12) return 'goodMorning';
  if (hour >= 12 && hour < 17) return 'goodAfternoon';
  if (hour >= 17 && hour < 21) return 'goodEvening';
  return 'goodNight';
}

/**
 * Get the appropriate icon based on the current hour
 */
function getGreetingIcon(hour: number) {
  if (hour >= 5 && hour < 12) return Sun;
  if (hour >= 12 && hour < 17) return CloudSun;
  if (hour >= 17 && hour < 21) return CloudSun;
  return Moon;
}

/**
 * Welcome Widget - Personalized greeting with user info
 */
export function WelcomeWidget({
  id,
  isEditing = false,
  onRemove,
  className,
}: WelcomeWidgetProps) {
  const { data: session } = useSession();
  const t = useTranslations('widgets.welcome');

  const currentHour = new Date().getHours();
  const greetingKey = getGreetingKey(currentHour);
  const GreetingIcon = getGreetingIcon(currentHour);

  const userName = session?.user?.name || 'User';
  const userInitials = userName
    .split(' ')
    .map((n) => n[0])
    .join('')
    .toUpperCase()
    .slice(0, 2);

  return (
    <WidgetContainer
      id={id}
      title=""
      isEditing={isEditing}
      onRemove={onRemove}
      showHeader={isEditing}
      className={cn('overflow-hidden', className)}
      colSpan={2}
    >
      <div className="relative flex items-center gap-4 py-2">
        {/* Decorative background gradient */}
        <div className="absolute inset-0 -m-6 bg-gradient-to-r from-primary/5 via-transparent to-primary/5" />

        {/* User Avatar */}
        <motion.div
          initial={{ scale: 0.8, opacity: 0 }}
          animate={{ scale: 1, opacity: 1 }}
          transition={{ duration: 0.3 }}
        >
          <Avatar className="h-16 w-16 border-2 border-primary/20">
            <AvatarImage src={session?.user?.image || undefined} alt={userName} />
            <AvatarFallback className="bg-primary/10 text-lg font-semibold text-primary">
              {userInitials}
            </AvatarFallback>
          </Avatar>
        </motion.div>

        {/* Greeting Text */}
        <div className="relative flex-1">
          <motion.div
            initial={{ y: 10, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            transition={{ duration: 0.3, delay: 0.1 }}
            className="flex items-center gap-2"
          >
            <GreetingIcon className="h-5 w-5 text-primary" />
            <span className="text-sm text-muted-foreground">{t(greetingKey)}</span>
          </motion.div>

          <motion.h2
            initial={{ y: 10, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            transition={{ duration: 0.3, delay: 0.2 }}
            className="text-2xl font-bold tracking-tight"
          >
            {userName}
          </motion.h2>

          <motion.p
            initial={{ y: 10, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            transition={{ duration: 0.3, delay: 0.3 }}
            className="mt-1 flex items-center gap-1 text-sm text-muted-foreground"
          >
            <Sparkles className="h-3 w-3" />
            {t('subtitle')}
          </motion.p>
        </div>
      </div>
    </WidgetContainer>
  );
}
