import React, { useEffect, useState } from 'react';
import type { ReactElement } from 'react';
import Head from 'next/head';
import Link from 'next/link';
import BaseButton from '../components/BaseButton';
import SectionFullScreen from '../components/SectionFullScreen';
import LayoutGuest from '../layouts/Guest';
import { getPageTitle } from '../config';
import { useAppSelector } from '../stores/hooks';
import { getPexelsImage } from '../helpers/pexels';
import BaseIcon from '../components/BaseIcon';
import { mdiInstagram, mdiLightningBolt, mdiEarth, mdiAccountGroup } from '@mdi/js';

export default function LandingPage() {
    const [illustrationImage, setIllustrationImage] = useState<any>(null);
    const { currentUser } = useAppSelector((state) => state.auth);

    useEffect(() => {
        async function fetchData() {
            const image = await getPexelsImage();
            setIllustrationImage(image);
        }
        fetchData();
    }, []);

    return (
        <div className="bg-[#0b0e14] min-h-screen text-white overflow-x-hidden font-sans">
            <Head>
                <title>{getPageTitle('Ultra Sosyal - Connect. Share. Shine.')}</title>
            </Head>

            {/* Neon Glow Accents */}
            <div className="fixed top-[-10%] left-[-10%] w-[40%] h-[40%] bg-blue-600/20 blur-[120px] rounded-full pointer-events-none"></div>
            <div className="fixed bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-purple-600/20 blur-[120px] rounded-full pointer-events-none"></div>

            <SectionFullScreen bg="void">
                <div className="container mx-auto px-6 py-12 flex flex-col items-center relative z-10">
                    {/* Header/Nav */}
                    <nav className="w-full flex justify-between items-center mb-16">
                        <div className="flex items-center space-x-2">
                            <div className="w-10 h-10 bg-gradient-to-tr from-blue-500 to-purple-600 rounded-xl flex items-center justify-center shadow-lg shadow-blue-500/20">
                                <BaseIcon path={mdiInstagram} size={24} className="text-white" />
                            </div>
                            <span className="text-2xl font-black tracking-tighter bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-400">
                                ULTRA SOSYAL
                            </span>
                        </div>
                        <div className="space-x-4">
                            {!currentUser ? (
                                <>
                                    <Link href="/login" className="px-6 py-2 rounded-full font-medium hover:text-blue-400 transition-colors">
                                        Login
                                    </Link>
                                    <Link href="/register" className="px-6 py-2 bg-gradient-to-r from-blue-600 to-purple-600 rounded-full font-bold shadow-lg shadow-blue-600/20 hover:scale-105 transition-transform">
                                        Join Now
                                    </Link>
                                </>
                            ) : (
                                <Link href="/feed" className="px-6 py-2 bg-gradient-to-r from-blue-600 to-purple-600 rounded-full font-bold shadow-lg shadow-blue-600/20 hover:scale-105 transition-transform">
                                    Go to Feed
                                </Link>
                            )}
                        </div>
                    </nav>

                    {/* Hero Section */}
                    <div className="flex flex-col lg:flex-row items-center justify-between w-full gap-12">
                        <div className="lg:w-1/2 space-y-8 text-center lg:text-left">
                            <div className="inline-flex items-center space-x-2 px-3 py-1 bg-blue-500/10 border border-blue-500/20 rounded-full text-blue-400 text-sm font-bold animate-pulse">
                                <BaseIcon path={mdiLightningBolt} size={14} />
                                <span>THE NEXT GENERATION OF SOCIAL</span>
                            </div>
                            <h1 className="text-5xl lg:text-7xl font-black leading-tight tracking-tight">
                                Share your <br />
                                <span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 via-purple-500 to-pink-500">
                                    Digital Soul.
                                </span>
                            </h1>
                            <p className="text-lg text-gray-400 max-w-xl mx-auto lg:mx-0">
                                Experience a borderless world of connection. Posts, Stories, Reels, and real-time interaction, all in a stunning neon aesthetic.
                            </p>
                            <div className="flex flex-col sm:flex-row items-center justify-center lg:justify-start space-y-4 sm:space-y-0 sm:space-x-4">
                                <BaseButton
                                    href={currentUser ? "/feed" : "/register"}
                                    label={currentUser ? "Explore Feed" : "Get Started - It's Free"}
                                    color="info"
                                    className="px-8 py-4 rounded-2xl font-black text-lg bg-blue-600 hover:bg-blue-700 shadow-2xl shadow-blue-600/40"
                                />
                                <div className="flex -space-x-3">
                                    {[1, 2, 3, 4].map((i) => (
                                        <div key={i} className="w-10 h-10 rounded-full border-2 border-[#0b0e14] bg-gray-800 flex items-center justify-center text-[10px] font-bold">
                                            U{i}
                                        </div>
                                    ))}
                                    <div className="pl-6 text-sm text-gray-500 font-medium">
                                        Joined by 20k+ creators
                                    </div>
                                </div>
                            </div>
                        </div>

                        {/* Interactive Card Mockup */}
                        <div className="lg:w-1/2 relative">
                            <div className="relative z-10 w-[300px] h-[500px] bg-gray-900 border border-white/10 rounded-[3rem] p-4 shadow-2xl rotate-2 hover:rotate-0 transition-transform duration-500 overflow-hidden">
                                <div className="absolute inset-0 bg-gradient-to-b from-transparent via-black/20 to-black/80"></div>
                                {illustrationImage && (
                                    <img 
                                        src={illustrationImage.src?.large} 
                                        alt="Mockup" 
                                        className="absolute inset-0 w-full h-full object-cover opacity-60"
                                    />
                                )}
                                <div className="relative h-full flex flex-col justify-end space-y-4 p-4">
                                    <div className="flex items-center space-x-2">
                                        <div className="w-8 h-8 rounded-full bg-blue-500"></div>
                                        <div className="flex-1">
                                            <div className="h-2 w-20 bg-white/40 rounded"></div>
                                            <div className="h-1.5 w-12 bg-white/20 rounded mt-1"></div>
                                        </div>
                                    </div>
                                    <div className="space-y-2">
                                        <div className="h-3 w-full bg-white/10 rounded"></div>
                                        <div className="h-3 w-2/3 bg-white/10 rounded"></div>
                                    </div>
                                    <div className="flex justify-between items-center text-white/60">
                                        <div className="flex space-x-4">
                                            <BaseIcon path={mdiInstagram} size={20} />
                                            <div className="w-5 h-5 border-2 border-white/60 rounded"></div>
                                        </div>
                                        <div className="w-5 h-5 border-2 border-white/60 rounded-full"></div>
                                    </div>
                                </div>
                            </div>
                            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-blue-600/30 blur-[100px] rounded-full"></div>
                        </div>
                    </div>

                    {/* Features Grid */}
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-32 w-full">
                        {[
                            { icon: mdiEarth, title: "Global Reach", desc: "Connect with people from every corner of the world instantly." },
                            { icon: mdiLightningBolt, title: "Hyper Fast", desc: "Built for speed. Real-time notifications and instant uploads." },
                            { icon: mdiAccountGroup, title: "Community Driven", desc: "Groups, forums, and shared collections to grow together." }
                        ].map((f, i) => (
                            <div key={i} className="p-8 bg-white/5 border border-white/10 rounded-3xl hover:bg-white/10 transition-colors">
                                <div className="w-12 h-12 bg-blue-500/20 rounded-2xl flex items-center justify-center mb-6">
                                    <BaseIcon path={f.icon} size={24} className="text-blue-400" />
                                </div>
                                <h3 className="text-xl font-bold mb-2">{f.title}</h3>
                                <p className="text-gray-400">{f.desc}</p>
                            </div>
                        ))}
                    </div>

                    {/* Footer */}
                    <footer className="mt-32 w-full pt-12 border-t border-white/10 flex flex-col md:flex-row justify-between items-center text-gray-500 text-sm">
                        <p>© 2026 ULTRA SOSYAL. Built for the bold.</p>
                        <div className="flex space-x-6 mt-4 md:mt-0">
                            <Link href="/privacy-policy" className="hover:text-white transition-colors">Privacy</Link>
                            <Link href="/terms-of-use" className="hover:text-white transition-colors">Terms</Link>
                            <a href="mailto:ultrasosyal.destek@gmail.com" className="hover:text-white transition-colors">Support</a>
                        </div>
                    </footer>
                </div>
            </SectionFullScreen>
        </div>
    );
}

LandingPage.getLayout = function getLayout(page: ReactElement) {
    return <LayoutGuest>{page}</LayoutGuest>;
};