'use client';

import React, { useContext, useEffect, useRef, useState } from 'react';
import { Ripple } from 'primereact/ripple';
import { InputText } from 'primereact/inputtext';
import { StyleClass } from 'primereact/styleclass';
import { useRouter } from 'next/navigation';
import { Button } from 'primereact/button';
import { LayoutContext } from '../layout/context/layoutcontext';
import { PrimeReactContext } from 'primereact/api';
import type { ColorScheme } from '@/types';

const LandingPage = () => {
    const router = useRouter();
    const { layoutConfig, setLayoutConfig } = useContext(LayoutContext);
    const { changeTheme } = useContext(PrimeReactContext);

    const homeRef = useRef(null);
    const timesRef = useRef(null);
    const menuRef = useRef(null);
    const menuButtonRef = useRef(null);
    const meetRef = useRef(null);
    const featuresRef = useRef(null);
    const pricingRef = useRef(null);
    const pricingButtonRef = useRef(null);
    const buyRef = useRef(null);
    const featuresButtonRef = useRef(null);

    const goHome = () => {
        router.push('/');
    };

    const scrollToElement = (el: React.RefObject<HTMLElement>) => {
        if (el.current) {
            el.current?.scrollIntoView({
                behavior: 'smooth',
                block: 'start',
                inline: 'nearest'
            });
        }
    };

    const changeColorScheme = (colorScheme: ColorScheme) => {
        changeTheme?.(layoutConfig.colorScheme, colorScheme, 'theme-link', () => {
            setLayoutConfig((prevState) => ({
                ...prevState,
                colorScheme,
                menuTheme: layoutConfig.colorScheme === 'dark' ? 'dark' : 'light'
            }));
        });
    };

    useEffect(() => {
        changeColorScheme('light');
        setLayoutConfig((prevState) => ({
            ...prevState,
            menuTheme: 'light'
        }));
    }, []);

    return (
        <div ref={homeRef} className="landing-container" style={{ background: '#100e23' }}>
            <div id="header" className="landing-header flex flex-column w-full p-6" style={{ minHeight: '1000px', background: 'linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%)' }}>
                <div className="header-menu-container flex align-items-center justify-content-between">
                    <div className="header-left-elements flex align-items-center justify-content-between">
                        <div className="cursor-pointer layout-topbar-logo flex align-items-center" onClick={goHome}>
                            <i className="pi pi-building text-orange-600 text-3xl mr-3"></i>
                            <span className="text-2xl font-bold text-gray-800">BTP Xpress</span>
                        </div>

                        <StyleClass nodeRef={menuButtonRef} selector="@next" enterClassName="hidden" enterActiveClassName="px-scalein" leaveToClassName="hidden" leaveActiveClassName="px-fadeout">
                            <a ref={menuButtonRef} className="p-ripple cursor-pointer block lg:hidden text-gray-800 font-medium line-height-3 hover:text-gray-800" style={{ fontSize: '2rem' }}>
                                <i className="pi pi-bars"></i>
                                <Ripple />
                            </a>
                        </StyleClass>
                        <ul
                            ref={menuRef}
                            id="menu"
                            style={{ top: '0px', right: '0%' }}
                            className="list-none  lg:flex lg:flex-row flex-column align-items-start bg-white absolute lg:relative h-screen lg:h-auto lg:surface-ground m-0 z-5 w-full sm:w-6 lg:w-full py-6 lg:py-0"
                        >
                            <StyleClass nodeRef={timesRef} selector="@parent" enterClassName="hidden" enterActiveClassName="px-scalein" leaveToClassName="hidden" leaveActiveClassName="px-fadeout">
                                <a ref={timesRef} className="p-ripple cursor-pointer block lg:hidden text-gray-800 font-medium line-height-3 hover:text-gray-800 absolute" style={{ top: '3rem', right: '2rem' }}>
                                    <i className="pi pi-times text-4xl"></i>
                                    <Ripple />
                                </a>
                            </StyleClass>
                            <li>
                                <a onClick={() => scrollToElement(homeRef)} className="p-ripple flex m-0 md:ml-5 md:px-0 px-3 py-3 text-gray-800 font-medium line-height-3 hover:text-gray-800 cursor-pointer">
                                    <span>Accueil</span>
                                    <Ripple />
                                </a>
                            </li>
                            <li>
                                <a onClick={() => scrollToElement(meetRef)} className="p-ripple flex m-0 md:ml-5 md:px-0 px-3 py-3 text-gray-800 font-medium line-height-3 hover:text-gray-800 cursor-pointer">
                                    <span>Découvrir</span>
                                    <Ripple />
                                </a>
                            </li>
                            <li>
                                <a onClick={() => scrollToElement(featuresRef)} className="p-ripple flex m-0 md:ml-5 md:px-0 px-3 py-3 text-gray-800 font-medium line-height-3 hover:text-gray-800 cursor-pointer">
                                    <span>Fonctionnalités</span>
                                    <Ripple />
                                </a>
                            </li>
                            <li>
                                <a onClick={() => scrollToElement(pricingRef)} className="p-ripple flex m-0 md:ml-5 md:px-0 px-3 py-3 text-gray-800 font-medium line-height-3 hover:text-gray-800 cursor-pointer">
                                    <span>Tarifs</span>
                                    <Ripple />
                                </a>
                            </li>
                            <li>
                                <a onClick={() => window.location.href = '/api/auth/login'} className="p-ripple flex m-0 md:ml-5 md:px-0 px-3 py-3 text-gray-800 font-medium line-height-3 hover:text-gray-800 cursor-pointer">
                                    <span>Connexion</span>
                                    <Ripple />
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div className="header-right-elements flex align-items-center">
                        <a onClick={() => {
                            const keycloakUrl = process.env.NEXT_PUBLIC_KEYCLOAK_URL || 'https://security.lions.dev';
                            const realm = process.env.NEXT_PUBLIC_KEYCLOAK_REALM || 'btpxpress';
                            const clientId = process.env.NEXT_PUBLIC_KEYCLOAK_CLIENT_ID || 'btpxpress-frontend';
                            const redirectUri = encodeURIComponent(window.location.origin + '/dashboard');
                            window.location.href = `${keycloakUrl}/realms/${realm}/protocol/openid_connect/registrations?client_id=${clientId}&response_type=code&redirect_uri=${redirectUri}`;
                        }} className="p-button p-button-outlined p-button-secondary p-button-text p-button p-component font-medium border-round text-white bg-orange-500 border-orange-500 cursor-pointer mr-3" style={{ padding: '0.714rem 1.5rem' }}>
                            <span aria-hidden="true" className="p-button-label">
                                Démarrer maintenant
                            </span>
                        </a>
                        <a href="/pages/contact">
                            <Button className="contact-button mr-3 p-button-outlined p-button-secondary p-button-text p-button p-component font-medium border-round text-gray-700" style={{ background: 'rgba(68, 72, 109, 0.05)' }}>
                                <span aria-hidden="true" className="p-button-label">
                                    Contact
                                </span>
                            </Button>
                        </a>
                    </div>
                </div>

                <div className="header-text" style={{ padding: '100px 60px' }}>
                    <div className="flex align-items-center mb-4">
                        <i className="pi pi-building text-orange-600 text-4xl mr-3"></i>
                        <span className="text-3xl font-bold text-gray-800">BTP Xpress</span>
                    </div>
                    <h1 className="mb-0 text-gray-800" style={{ fontSize: '80px', lineHeight: '95px' }}>
                        Construisez l&apos;avenir
                    </h1>
                    <h2 className="mt-0 font-medium text-4xl text-gray-700">avec BTP Xpress, la suite logicielle qui transforme le BTP</h2>
                    <p className="text-xl text-gray-600 mb-5 line-height-3" style={{ maxWidth: '650px' }}>
                        <strong>Fini les chantiers qui dérapent, les budgets qui explosent et les équipes désorganisées.</strong>
                        BTP Xpress centralise tout : de la première estimation au dernier m² livré,
                        pilotez vos projets avec la précision d&apos;un architecte et l&apos;efficacité d&apos;un chef de chantier expérimenté.
                    </p>

                    <div className="flex flex-wrap gap-3 mb-6">
                        <div className="flex align-items-center bg-white px-4 py-2 border-round shadow-2">
                            <i className="pi pi-check-circle text-green-600 mr-2"></i>
                            <span className="font-semibold text-gray-800">Gestion complète de projets</span>
                        </div>
                        <div className="flex align-items-center bg-white px-4 py-2 border-round shadow-2">
                            <i className="pi pi-check-circle text-green-600 mr-2"></i>
                            <span className="font-semibold text-gray-800">Suivi temps réel</span>
                        </div>
                        <div className="flex align-items-center bg-white px-4 py-2 border-round shadow-2">
                            <i className="pi pi-check-circle text-green-600 mr-2"></i>
                            <span className="font-semibold text-gray-800">Facturation automatisée</span>
                        </div>
                    </div>
                    <a onClick={() => window.location.href = '/api/auth/login'} className="p-button text-white bg-orange-500 border-orange-500 font-bold border-round cursor-pointer mr-3 shadow-3" style={{ padding: '1.2rem 2.5rem', fontSize: '1.2rem' }}>
                        <i className="pi pi-play mr-2"></i>
                        Démarrer maintenant
                    </a>
                    <a href="#features" className="p-button p-button-outlined text-orange-600 border-orange-300 font-bold border-round cursor-pointer" style={{ padding: '1.2rem 2.5rem', fontSize: '1.2rem' }}>
                        <i className="pi pi-eye mr-2"></i>
                        Voir les fonctionnalités
                    </a>
                </div>

                <div ref={featuresRef} className="header-features" style={{ padding: '100px 60px' }}>
                    <div className="text-center mb-6">
                        <h2 className="text-4xl font-bold text-gray-800 mb-4">Spécialisé pour tous les métiers du BTP</h2>
                        <p className="text-xl text-gray-600">Une solution adaptée à chaque corps de métier</p>
                    </div>
                    <div className="grid">
                        <div className="col-12 md:col-6 lg:col-3 mb-4">
                            <div className="bg-white p-6 border-round shadow-2 text-center h-full">
                                <i className="pi pi-home text-4xl mb-3 block"></i>
                                <span className="title mb-3 block text-2xl font-semibold">Gros Œuvre &amp; Structure</span>
                                <span className="content">Béton, maçonnerie, charpente : gérez vos approvisionnements, planifiez vos coulages, suivez vos cadences et optimisez vos rotations d&apos;équipes.</span>
                            </div>
                        </div>
                        <div className="col-12 md:col-6 lg:col-3 mb-4">
                            <div className="bg-white p-6 border-round shadow-2 text-center h-full">
                                <i className="pi pi-wrench text-4xl mb-3 block"></i>
                                <span className="title mb-3 block text-2xl font-semibold">Second Œuvre &amp; Finitions</span>
                                <span className="content">Électricité, plomberie, peinture, carrelage : coordonnez vos interventions, gérez vos stocks et respectez les délais de livraison.</span>
                            </div>
                        </div>
                        <div className="col-12 md:col-6 lg:col-3 mb-4">
                            <div className="bg-white p-6 border-round shadow-2 text-center h-full">
                                <i className="pi pi-car text-4xl mb-3 block"></i>
                                <span className="title mb-3 block text-2xl font-semibold">Travaux Publics &amp; VRD</span>
                                <span className="content">Terrassement, voirie, réseaux : planifiez vos chantiers, gérez votre matériel et optimisez vos déplacements d&apos;équipes.</span>
                            </div>
                        </div>
                        <div className="col-12 md:col-6 lg:col-3 mb-4">
                            <div className="bg-white p-6 border-round shadow-2 text-center h-full">
                                <i className="pi pi-briefcase text-4xl mb-3 block"></i>
                                <span className="title mb-3 block text-2xl font-semibold">Maîtrise d&apos;Œuvre &amp; AMO</span>
                                <span className="content">Pilotage de projets, coordination, suivi budgétaire : centralisez tous vos dossiers et collaborez efficacement avec tous les intervenants.</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div ref={meetRef} id="meet-btpxpress" className="flex justify-content-center w-full relative text-center py-8" style={{ minHeight: '400px', background: 'linear-gradient(135deg, #f97316 0%, #fb923c 30%, #fed7aa 100%)', boxShadow: '0 10px 25px rgba(249, 115, 22, 0.15)', zIndex: 100, position: 'relative' }}>
                <div className="flex flex-column align-items-center justify-content-center px-6">
                    <h2 className="text-4xl font-bold text-gray-800 mb-4">
                        BTP Xpress en action
                    </h2>
                    <p className="text-xl text-gray-700 mb-6 line-height-3" style={{ maxWidth: '600px' }}>
                        Découvrez comment nos clients transforment leur activité BTP avec des outils pensés pour leur réussite
                    </p>
                    <div className="grid w-full" style={{ maxWidth: '900px' }}>
                        <div className="col-12 md:col-4 text-center mb-4">
                            <div className="bg-white border-round p-4 shadow-2" style={{ border: '1px solid #e5e7eb' }}>
                                <i className="pi pi-clock text-orange-600 text-4xl mb-3"></i>
                                <div className="text-3xl font-bold text-green-600 mb-2">-50%</div>
                                <div className="text-lg font-semibold text-gray-800">Temps administratif</div>
                                <div className="text-sm text-gray-600">Automatisation des tâches répétitives</div>
                            </div>
                        </div>
                        <div className="col-12 md:col-4 text-center mb-4">
                            <div className="bg-white border-round p-4 shadow-2" style={{ border: '1px solid #e5e7eb' }}>
                                <i className="pi pi-chart-bar text-green-600 text-4xl mb-3"></i>
                                <div className="text-3xl font-bold text-green-600 mb-2">+35%</div>
                                <div className="text-lg font-semibold text-gray-800">Rentabilité</div>
                                <div className="text-sm text-gray-600">Optimisation des coûts et marges</div>
                            </div>
                        </div>
                        <div className="col-12 md:col-4 text-center mb-4">
                            <div className="bg-white border-round p-4 shadow-2" style={{ border: '1px solid #e5e7eb' }}>
                                <i className="pi pi-users text-blue-600 text-4xl mb-3"></i>
                                <div className="text-3xl font-bold text-blue-600 mb-2">98%</div>
                                <div className="text-lg font-semibold text-gray-800">Satisfaction client</div>
                                <div className="text-sm text-gray-600">Respect des délais et qualité</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div className="w-full py-6" style={{ background: 'linear-gradient(180deg, #ffffff 0%, #f9fafb 50%, #f3f4f6 100%)' }}>
                <div id="features" className="px-4 lg:px-8 features">
                    <h2 className="font-medium text-3xl text-center text-gray-800 mb-6">La différence BTP Xpress : des résultats concrets</h2>
                </div>
            </div>
        </div>
    );
};

export default LandingPage;