'use client';

import { useAuthStore } from '@/stores/auth-store';
import { useEffect, useState } from 'react';
import { useTranslations } from 'next-intl';
import NextImage from 'next/image';
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 {
  ArrowRight,
  Target,      // Marketing/Ads
  Gift,        // Reward Apps
  Store,       // POS System
  Cpu,         // AI/Blockchain
  BarChart3,
  Smartphone,
  CreditCard,
  Blocks
} from 'lucide-react';

/**
 * EN: Home page component - GoodGo Platform Landing Page
 * VI: Component trang chủ - Trang đích GoodGo Platform
 */
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();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isMounted]);

  // EN: Prevent hydration mismatch
  // VI: Ngăn chặn hydration mismatch
  if (!isMounted) {
    return null;
  }

  // EN: Loading state
  // VI: Trạng thái loading
  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="GoodGo Enterprise"
        description="Empowering businesses with comprehensive digital solutions"
        linkText="Explore Now"
        linkUrl="/services"
        imageSrc="/images/home/announcement-bg.png"
      />

      <main className="min-h-screen bg-bg-primary text-text-primary overflow-hidden relative">
        {/* Ambient Background Effects - Removed for Monochrome */}

        <div className="container mx-auto px-6 relative z-10">

          {/* Hero Section */}
          <div className="flex flex-col items-center justify-center min-h-[80vh] text-center space-y-10 pt-20">
            <div className="max-w-5xl space-y-6">
              <div className="inline-flex items-center space-x-2 px-3 py-1 rounded-full bg-glass-subtle border border-glass-border-subtle mb-4">
                <span className="relative flex h-2 w-2">
                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-text-primary opacity-75"></span>
                  <span className="relative inline-flex rounded-full h-2 w-2 bg-text-primary"></span>
                </span>
                <span className="text-sm font-medium text-text-secondary">Ecosystem v2.0 Live</span>
              </div>

              <h1 className="text-5xl md:text-7xl lg:text-8xl font-bold leading-tight tracking-tight">
                <span className="text-text-primary block">
                  Powering the Next
                </span>
                <span className="text-text-primary block">
                  Generation of Business
                </span>
              </h1>

              <p className="text-xl md:text-2xl text-text-secondary max-w-3xl mx-auto leading-relaxed">
                Comprehensive solutions for Marketing, Loyalty, Retail, and Web3 technologies.
                Everything you need to grow your digital presence.
              </p>

              <div className="flex flex-col sm:flex-row items-center justify-center gap-4 pt-8">
                <Button
                  size="lg"
                  className="rounded-full px-8 py-6 text-lg bg-text-primary text-bg-primary hover:bg-text-secondary w-full sm:w-auto transition-all shadow-glow"
                  onPress={() => window.location.href = '/contact'}
                >
                  Start Building
                </Button>
                <Button
                  variant="glass"
                  size="lg"
                  className="rounded-full px-8 py-6 text-lg border-border-primary hover:bg-glass-hover w-full sm:w-auto backdrop-blur-md text-text-primary"
                  onPress={() => window.location.href = '/solutions'}
                >
                  View Solutions
                </Button>
              </div>
            </div>
          </div>

          {/* Solutions Section (4 Pillars) */}
          <section className="py-24" id="solutions">
            <div className="text-center mb-20 animate-fade-in-up">
              <span className="text-text-tertiary font-bold tracking-wider uppercase text-sm mb-2 block">Our Ecosystem</span>
              <h2 className="text-4xl md:text-5xl font-bold mb-4">Core Business Pillars</h2>
              <p className="text-text-secondary max-w-2xl mx-auto text-lg">
                Integrated technological pillars designed to scale your business operations from end to end.
              </p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">

              {/* Pillar 1: Marketing/Ads */}
              <div className="group relative">
                <div className="absolute -inset-0.5 bg-gradient-to-br from-text-secondary to-text-tertiary rounded-2xl opacity-10 group-hover:opacity-30 blur transition duration-500"></div>
                <div className="relative h-full bg-bg-secondary/40 backdrop-blur-xl rounded-2xl border border-glass-border overflow-hidden hover:bg-bg-elevated/90 transition-all duration-300 flex flex-col justify-between">
                  <div>
                    <div className="relative h-48 w-full overflow-hidden">
                      <NextImage
                        src="/images/home/marketing-ads.png"
                        alt="Marketing & Ads"
                        fill
                        className="object-cover transition-transform duration-700 group-hover:scale-110 grayscale"
                      />
                      <div className="absolute inset-0 bg-gradient-to-t from-bg-secondary via-transparent to-transparent"></div>
                    </div>
                    <div className="p-8 pt-6">
                      <div className="w-12 h-12 bg-glass-bg-hover rounded-xl flex items-center justify-center mb-4 text-text-primary">
                        <Target className="h-6 w-6" />
                      </div>
                      <h3 className="text-2xl font-bold mb-3 group-hover:text-text-primary transition-colors">Marketing & Ads</h3>
                      <p className="text-text-tertiary leading-relaxed mb-6">
                        Advanced AdTech solutions, Real-Time Bidding (RTB), and cross-platform campaign management.
                      </p>
                      <ul className="space-y-2 mb-6">
                        <li className="flex items-center text-sm text-text-secondary">
                          <BarChart3 className="h-4 w-4 mr-2 text-text-primary" /> Analytics
                        </li>
                        <li className="flex items-center text-sm text-text-secondary">
                          <Target className="h-4 w-4 mr-2 text-text-primary" /> Precise Targeting
                        </li>
                      </ul>
                    </div>
                  </div>
                  <div className="px-8 pb-8">
                    <Button variant="ghost" className="w-full justify-between group-hover:bg-glass-bg-hover group-hover:text-text-primary">
                      Learn more <ArrowRight className="h-4 w-4" />
                    </Button>
                  </div>
                </div>
              </div>

              {/* Pillar 2: Reward Apps */}
              <div className="group relative">
                <div className="absolute -inset-0.5 bg-gradient-to-br from-text-secondary to-text-tertiary rounded-2xl opacity-10 group-hover:opacity-30 blur transition duration-500"></div>
                <div className="relative h-full bg-bg-secondary/40 backdrop-blur-xl rounded-2xl border border-glass-border overflow-hidden hover:bg-bg-elevated/90 transition-all duration-300 flex flex-col justify-between">
                  <div>
                    <div className="relative h-48 w-full overflow-hidden">
                      <NextImage
                        src="/images/home/reward-apps.png"
                        alt="Reward Apps"
                        fill
                        className="object-cover transition-transform duration-700 group-hover:scale-110 grayscale"
                      />
                      <div className="absolute inset-0 bg-gradient-to-t from-bg-secondary via-transparent to-transparent"></div>
                    </div>
                    <div className="p-8 pt-6">
                      <div className="w-12 h-12 bg-glass-bg-hover rounded-xl flex items-center justify-center mb-4 text-text-primary">
                        <Gift className="h-6 w-6" />
                      </div>
                      <h3 className="text-2xl font-bold mb-3 group-hover:text-text-primary transition-colors">Reward Apps</h3>
                      <p className="text-text-tertiary leading-relaxed mb-6">
                        Customer loyalty programs, gamification layers, and engagement ecosystems.
                      </p>
                      <ul className="space-y-2 mb-6">
                        <li className="flex items-center text-sm text-text-secondary">
                          <Smartphone className="h-4 w-4 mr-2 text-text-primary" /> Mobile First
                        </li>
                        <li className="flex items-center text-sm text-text-secondary">
                          <Gift className="h-4 w-4 mr-2 text-text-primary" /> Loyalty Points
                        </li>
                      </ul>
                    </div>
                  </div>
                  <div className="px-8 pb-8">
                    <Button variant="ghost" className="w-full justify-between group-hover:bg-glass-bg-hover group-hover:text-text-primary">
                      Learn more <ArrowRight className="h-4 w-4" />
                    </Button>
                  </div>
                </div>
              </div>

              {/* Pillar 3: POS System */}
              <div className="group relative">
                <div className="absolute -inset-0.5 bg-gradient-to-br from-text-secondary to-text-tertiary rounded-2xl opacity-10 group-hover:opacity-30 blur transition duration-500"></div>
                <div className="relative h-full bg-bg-secondary/40 backdrop-blur-xl rounded-2xl border border-glass-border overflow-hidden hover:bg-bg-elevated/90 transition-all duration-300 flex flex-col justify-between">
                  <div>
                    <div className="relative h-48 w-full overflow-hidden">
                      <NextImage
                        src="/images/home/pos-system.png"
                        alt="POS System"
                        fill
                        className="object-cover transition-transform duration-700 group-hover:scale-110 grayscale"
                      />
                      <div className="absolute inset-0 bg-gradient-to-t from-bg-secondary via-transparent to-transparent"></div>
                    </div>
                    <div className="p-8 pt-6">
                      <div className="w-12 h-12 bg-glass-bg-hover rounded-xl flex items-center justify-center mb-4 text-text-primary">
                        <Store className="h-6 w-6" />
                      </div>
                      <h3 className="text-2xl font-bold mb-3 group-hover:text-text-primary transition-colors">POS System</h3>
                      <p className="text-text-tertiary leading-relaxed mb-6">
                        Multi-industry Point of Sale solutions for Retail, F&B, and Service sectors.
                      </p>
                      <ul className="space-y-2 mb-6">
                        <li className="flex items-center text-sm text-text-secondary">
                          <CreditCard className="h-4 w-4 mr-2 text-text-primary" /> Payments
                        </li>
                        <li className="flex items-center text-sm text-text-secondary">
                          <Store className="h-4 w-4 mr-2 text-text-primary" /> Inventory
                        </li>
                      </ul>
                    </div>
                  </div>
                  <div className="px-8 pb-8">
                    <Button variant="ghost" className="w-full justify-between group-hover:bg-glass-bg-hover group-hover:text-text-primary">
                      Learn more <ArrowRight className="h-4 w-4" />
                    </Button>
                  </div>
                </div>
              </div>

              {/* Pillar 4: AI/Blockchain */}
              <div className="group relative">
                <div className="absolute -inset-0.5 bg-gradient-to-br from-text-secondary to-text-tertiary rounded-2xl opacity-10 group-hover:opacity-30 blur transition duration-500"></div>
                <div className="relative h-full bg-bg-secondary/40 backdrop-blur-xl rounded-2xl border border-glass-border overflow-hidden hover:bg-bg-elevated/90 transition-all duration-300 flex flex-col justify-between">
                  <div>
                    <div className="relative h-48 w-full overflow-hidden">
                      <NextImage
                        src="/images/home/ai-blockchain.png"
                        alt="AI & Blockchain"
                        fill
                        className="object-cover transition-transform duration-700 group-hover:scale-110 grayscale"
                      />
                      <div className="absolute inset-0 bg-gradient-to-t from-bg-secondary via-transparent to-transparent"></div>
                    </div>
                    <div className="p-8 pt-6">
                      <div className="w-12 h-12 bg-glass-bg-hover rounded-xl flex items-center justify-center mb-4 text-text-primary">
                        <Cpu className="h-6 w-6" />
                      </div>
                      <h3 className="text-2xl font-bold mb-3 group-hover:text-text-primary transition-colors">AI & Blockchain</h3>
                      <p className="text-text-tertiary leading-relaxed mb-6">
                        Next-gen infrastructure including Wallet, Mining, Mission, and AI-driven analytics.
                      </p>
                      <ul className="space-y-2 mb-6">
                        <li className="flex items-center text-sm text-text-secondary">
                          <Blocks className="h-4 w-4 mr-2 text-text-primary" /> Web3 Native
                        </li>
                        <li className="flex items-center text-sm text-text-secondary">
                          <Cpu className="h-4 w-4 mr-2 text-text-primary" /> AI Insights
                        </li>
                      </ul>
                    </div>
                  </div>
                  <div className="px-8 pb-8">
                    <Button variant="ghost" className="w-full justify-between group-hover:bg-glass-bg-hover group-hover:text-text-primary">
                      Learn more <ArrowRight className="h-4 w-4" />
                    </Button>
                  </div>
                </div>
              </div>

            </div>
          </section>

          {/* Authenticated User Welcome - Kept from original but styled */}
          {isAuthenticated && user && (
            <section className="py-12 border-t border-border-primary">
              <div className="max-w-4xl mx-auto text-center">
                <h2 className="text-2xl font-bold mb-6">Ready to continue your work?</h2>
                <div className="flex justify-center">
                  <Button
                    variant="solid"
                    className="bg-text-primary text-bg-primary hover:bg-text-secondary px-8"
                    onPress={() => window.location.href = '/dashboard'}
                  >
                    Go to Dashboard
                  </Button>
                </div>
              </div>
            </section>
          )}

        </div>
      </main>

      <Footer />
    </>
  );
}
