'use client';

import { useAuthStore } from '@/stores/auth-store';
import { useEffect, useState } from 'react';
import { useTranslation } from '@/hooks/use-translation';
import { BrandLogo } from '@/components/ui/brand-logo';
import { Button } from '@/components/ui/button';
import { Footer } from '@/components/layout/footer';
import { NavigationHeader } from '@/components/layout/navigation-header';
import { Zap, Building, Code } from 'lucide-react';

/**
 * EN: Home page component - main application entry point with brand elements
 * VI: Component trang chủ - điểm vào chính với brand elements
 */
export default function Home() {
  // EN: Translation hook / VI: Hook translation
  const { t } = useTranslation();

  // EN: Get authentication state from store
  // VI: Lấy trạng thái xác thực từ store
  const { user, isAuthenticated, isLoading, fetchUser } = useAuthStore();

  // EN: State to track if component is mounted on client
  // VI: State để theo dõi xem component đã mount trên client chưa
  const [isMounted, setIsMounted] = useState(false);

  // EN: Set mounted state to true on client side
  // VI: Đặt trạng thái mounted thành true ở phía client
  useEffect(() => {
    setIsMounted(true);
  }, []);

  // EN: Fetch user data on component mount if not authenticated
  // VI: Fetch dữ liệu user khi component mount nếu chưa xác thực
  useEffect(() => {
    if (isMounted && !isAuthenticated) {
      fetchUser();
    }
    // EN: Only run once when mounted or fetchUser changes (which is stable)
    // VI: Chỉ chạy một lần khi mounted hoặc fetchUser thay đổi (ổn định)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isMounted]);

  // EN: Prevent hydration mismatch by not rendering auth-dependent content until mounted
  // VI: Ngăn chặn hydration mismatch bằng cách không render nội dung phụ thuộc auth cho đến khi mounted
  if (!isMounted) {
    return null;
  }

  // EN: Show loading state while checking authentication
  // VI: Hiển thị trạng thái loading trong khi kiểm tra xác thực
  if (isLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center p-8 bg-bg-primary text-text-primary">
        {t('common.loading')}
      </div>
    );
  }

  return (
    <>
      <NavigationHeader />

      {/* EN: Dynamic Background - Pastel Mesh Gradient / VI: Nền động - Mesh Gradient Pastel */}
      <div className="mesh-gradient">
        {/* EN: Primary Pastel Blue / VI: Xanh Pastel chính */}
        <div className="mesh-spot w-[800px] h-[800px] bg-[#93C5FD] -top-1/4 -left-1/4 opacity-[0.08]" />
        {/* EN: Soft Purple / VI: Tím mềm */}
        <div className="mesh-spot w-[600px] h-[600px] bg-[#C084FC] top-1/3 -right-1/4 opacity-[0.12]" style={{ animationDelay: '-7s' }} />
        {/* EN: Bright Cyan / VI: Xanh lơ sáng */}
        <div className="mesh-spot w-[500px] h-[500px] bg-[#67E8F9] -bottom-1/4 left-1/4 opacity-[0.1]" style={{ animationDelay: '-15s' }} />
      </div>

      <main className="relative min-h-screen flex flex-col items-center pt-40 pb-32 px-6 overflow-hidden">
        {/* EN: Floating particles for depth / VI: Các hạt lơ lửng tạo chiều sâu */}
        <div className="absolute top-1/4 left-10 w-2 h-2 rounded-full bg-[#93C5FD] opacity-20 animate-float" />
        <div className="absolute top-1/2 right-10 w-3 h-3 rounded-full bg-[#C084FC] opacity-20 animate-float" style={{ animationDelay: '2s' }} />

        <div className="container-responsive flex flex-col items-center space-y-24 z-10">
          {/* EN: Hero Section / VI: Phần Hero */}
          <div className="flex flex-col items-center text-center space-y-10 max-w-5xl animate-fadeIn">
            <div className="p-4 rounded-3xl bg-white/5 backdrop-blur-2xl border border-white/10 mb-6 animate-float shadow-2xl">
              <BrandLogo variant="full" size="xl" priority className="scale-125" />
            </div>

            <h1 className="text-7xl md:text-8xl font-display font-black tracking-tight bg-clip-text text-transparent bg-brand-gradient-vertical leading-[0.9] pb-4 drop-shadow-2xl">
              {t('home.title')}
            </h1>

            <p className="text-2xl md:text-3xl text-text-secondary max-w-3xl leading-relaxed font-medium">
              {t('home.description')}
            </p>

            <div className="flex flex-col sm:flex-row gap-8 pt-6 w-full sm:w-auto">
              {!isAuthenticated ? (
                <>
                  <Button
                    variant="brand"
                    size="xl"
                    onClick={() => (window.location.href = '/auth/login')}
                    className="px-14 py-8 text-xl rounded-full shadow-brand transition-all hover:scale-110 active:scale-95 hover:shadow-brand-lg"
                  >
                    Get Started
                  </Button>
                  <Button
                    variant="glass"
                    size="xl"
                    onClick={() => (window.location.href = '/auth/login')}
                    className="px-14 py-8 text-xl rounded-full transition-all hover:bg-white/15"
                  >
                    Explore
                  </Button>
                </>
              ) : (
                <Button
                  variant="brand"
                  size="xl"
                  onClick={() => (window.location.href = '/chat')}
                  className="px-14 py-8 text-xl rounded-full shadow-brand hover:scale-110"
                >
                  Dashboard
                </Button>
              )}
            </div>
          </div>

          {/* EN: Feature Highlights / VI: Điểm nổi bật tính năng */}
          {!isAuthenticated && (
            <div className="grid grid-cols-1 md:grid-cols-3 gap-10 w-full">
              {[
                { title: 'Fast Development', icon: Zap, desc: 'Build and deploy in minutes' },
                { title: 'Enterprise Ready', icon: Building, desc: 'Production-grade platform' },
                { title: 'Developer First', icon: Code, desc: 'Built for modern teams' },
              ].map((feature, index) => (
                <div
                  key={index}
                  className="glass-card p-10 rounded-[2.5rem] group animate-fadeIn animate-float"
                  style={{
                    animationDelay: `${index * 0.4}s`,
                    animationDuration: '8s'
                  }}
                >
                  <div className="w-20 h-20 rounded-3xl bg-brand-primary/10 flex items-center justify-center mb-8 transition-all duration-slower group-hover:bg-brand-primary group-hover:scale-110 group-hover:rotate-6 shadow-xl">
                    <feature.icon className="h-10 w-10 text-brand-primary transition-colors group-hover:text-white" />
                  </div>
                  <h3 className="text-2xl font-black mb-4 text-text-primary group-hover:text-brand-primary transition-colors">
                    {feature.title}
                  </h3>
                  <p className="text-lg text-text-secondary leading-relaxed font-medium">
                    {feature.desc}
                  </p>
                </div>
              ))}
            </div>
          )}

          {/* EN: Status Section / VI: Khu vực trạng thái */}
          <div className="animate-fadeIn" style={{ animationDelay: '1.2s' }}>
            {isAuthenticated && user && (
              <div className="glass-card p-12 rounded-[3.5rem] flex flex-col items-center space-y-8 min-w-[450px] shadow-[0_0_100px_rgba(59,130,246,0.1)]">
                <div className="relative">
                  <div className="absolute inset-0 bg-brand-primary blur-3xl opacity-30 animate-pulse" />
                  <div className="w-28 h-28 bg-brand-gradient rounded-[2.5rem] flex items-center justify-center text-5xl font-black text-white relative z-10 rotate-3 animate-float">
                    {user.email?.[0].toUpperCase()}
                  </div>
                </div>
                <div className="text-center">
                  <p className="text-2xl font-bold text-text-primary mb-2">
                    {t('home.welcome', { email: user.email })}
                  </p>
                  <div className="inline-flex items-center px-6 py-2 rounded-full bg-white/5 text-text-secondary border border-white/10">
                    <span className="w-3 h-3 rounded-full bg-accent-success mr-4 shadow-[0_0_12px_var(--accent-success)]" />
                    <span className="uppercase tracking-[0.2em] font-black text-xs">{user.role}</span>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </main>

      <Footer />
    </>
  );
}
