'use client';

import { useAuthStore } from '@/stores/auth-store';
import { useEffect, useState } from 'react';
import { useTranslations } from 'next-intl';
import { BrandLogo } from '@/features/shared/components/brand';
import { Button } from '@/ui';
import { Footer } from '@/shared/components/layout/footer';
import { NavigationHeader } from '@/shared/components/layout/header';
import { AnnouncementBanner } from '@/shared/components/layout/announcement-banner';
import { Search, ArrowRight, Code, Zap, Globe } 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 = useTranslations();

  // 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 />

      {/* Announcement Banner */}
      <AnnouncementBanner
        title="Grok Business and Enterprise"
        description="The best assistant in the world is now Enterprise ready"
        linkText="Learn more"
        linkUrl="/news"
      />

      {/* Hero Section */}
      <main className="min-h-screen bg-bg-primary text-text-primary">
        <div className="container mx-auto px-6">
          {/* Hero Content */}
          <div className="flex flex-col items-center justify-center min-h-screen text-center space-y-12">
            <div className="max-w-4xl space-y-8">
              <h1 className="text-6xl md:text-7xl font-bold leading-tight">
                AI for all humanity
              </h1>

              {/* Search Input */}
              <div className="max-w-2xl mx-auto">
                <div className="relative">
                  <div className="absolute inset-0 bg-glass backdrop-blur-sm rounded-full border border-glass" />
                  <div className="relative flex items-center">
                    <input
                      type="text"
                      placeholder="What do you want to know?"
                      className="w-full px-6 py-4 bg-transparent text-text-primary placeholder:text-text-tertiary rounded-full focus:outline-none text-lg"
                    />
                    <Button
                      variant="ghost"
                      size="sm"
                      className="absolute right-2 p-2 hover:bg-glass-hover rounded-full"
                    >
                      <Search className="h-5 w-5" />
                    </Button>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Products Section */}
          <section className="py-24">
            <div className="text-center mb-16">
              <div className="inline-flex items-center space-x-2 mb-4">
                <span className="text-text-tertiary text-sm font-medium">[</span>
                <span className="text-text-secondary text-sm font-medium">Products</span>
                <span className="text-text-tertiary text-sm font-medium">]</span>
              </div>
              <h2 className="text-4xl md:text-5xl font-bold">AI for all humanity</h2>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              {/* Grok Card */}
              <div className="bg-bg-secondary backdrop-blur-sm rounded-2xl border border-border-primary p-8 hover:bg-glass-hover transition-all duration-300 group">
                <div className="flex flex-col space-y-6">
                  <div className="flex items-center justify-between">
                    <h3 className="text-2xl font-bold">Grok</h3>
                    <div className="w-12 h-12 bg-glass-subtle rounded-full flex items-center justify-center group-hover:bg-glass-hover transition-colors">
                      <ArrowRight className="h-5 w-5" />
                    </div>
                  </div>
                  <p className="text-text-secondary leading-relaxed">
                    Grok is your cosmic guide, now accessible on grok.com, iOS, and Android. Explore the universe with AI.
                  </p>
                  <div className="flex items-center space-x-2">
                    <Button
                      variant="ghost"
                      size="sm"
                      className="text-text-secondary hover:bg-glass-hover"
                      onPress={() => window.location.href = '/chat'}
                    >
                      Use now
                    </Button>
                  </div>
                </div>
              </div>

              {/* API Card */}
              <div className="bg-bg-secondary backdrop-blur-sm rounded-2xl border border-border-primary p-8 hover:bg-glass-hover transition-all duration-300 group">
                <div className="flex flex-col space-y-6">
                  <div className="flex items-center justify-between">
                    <h3 className="text-2xl font-bold">API</h3>
                    <div className="w-12 h-12 bg-glass-subtle rounded-full flex items-center justify-center group-hover:bg-glass-hover transition-colors">
                      <Code className="h-5 w-5" />
                    </div>
                  </div>
                  <p className="text-text-secondary leading-relaxed">
                    Supercharge your applications with Grok's enhanced speed, precision, and multilingual capabilities.
                  </p>
                  <div className="flex items-center space-x-2">
                    <Button
                      variant="ghost"
                      size="sm"
                      className="text-text-secondary hover:bg-glass-hover"
                      onPress={() => window.location.href = '/api'}
                    >
                      Build now
                    </Button>
                  </div>
                </div>
              </div>

              {/* Developer Docs Card */}
              <div className="bg-bg-secondary backdrop-blur-sm rounded-2xl border border-border-primary p-8 hover:bg-glass-hover transition-all duration-300 group">
                <div className="flex flex-col space-y-6">
                  <div className="flex items-center justify-between">
                    <h3 className="text-2xl font-bold">Developer Docs</h3>
                    <div className="w-12 h-12 bg-glass-subtle rounded-full flex items-center justify-center group-hover:bg-glass-hover transition-colors">
                      <Globe className="h-5 w-5" />
                    </div>
                  </div>
                  <p className="text-text-secondary leading-relaxed">
                    Learn how to quickly install Grok at the heart of your applications and explore guides covering common use cases.
                  </p>
                  <div className="flex items-center space-x-2">
                    <Button
                      variant="ghost"
                      size="sm"
                      className="text-text-secondary hover:bg-glass-hover"
                      onPress={() => window.location.href = '/docs'}
                    >
                      Learn more
                    </Button>
                  </div>
                </div>
              </div>
            </div>
          </section>

          {/* Authenticated User Section */}
          {isAuthenticated && user && (
            <section className="py-24">
              <div className="max-w-md mx-auto">
                <div className="bg-bg-secondary backdrop-blur-sm rounded-2xl border border-border-primary p-8 text-center">
                  <div className="w-20 h-20 bg-glass-subtle rounded-2xl flex items-center justify-center mx-auto mb-6 text-3xl font-bold">
                    {user.email?.[0].toUpperCase()}
                  </div>
                  <h3 className="text-xl font-bold mb-2">Welcome back</h3>
                  <p className="text-text-tertiary mb-6">{user.email}</p>
                  <Button
                    variant="ghost"
                    size="sm"
                    className="text-text-secondary border border-border-primary hover:bg-glass-hover w-full"
                    onPress={() => window.location.href = '/chat'}
                  >
                    Continue to Chat
                  </Button>
                </div>
              </div>
            </section>
          )}
        </div>
      </main>

      <Footer />
    </>
  );
}
