import { Suspense } from 'react';
    import { LoginForm } from '@/components/auth/LoginForm';
    import { getDynamicImages, getAllCountries } from '@/lib/api/client';
    import { WebsiteFooter } from '@/components/website/WebsiteFooter';
    import Image from 'next/image';
    import Link from 'next/link';

    const SECURITY_KEY = process.env.NEXT_PUBLIC_SECURITY_KEY!;
    const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;


   const formatQuoteWithLineBreak = (text: string) => {
  if (!text) return text;
  
  // Agar text already HTML hai toh return as is
  if (text.includes('<br')) return text;
  
  // First break point after ~60 characters
  const breakPoint = 60;
  if (text.length > breakPoint) {
    const firstPart = text.substring(0, breakPoint);
    const lastSpaceIndex = firstPart.lastIndexOf(' ');
    const breakIndex = lastSpaceIndex > 0 ? lastSpaceIndex : breakPoint;
    
    return (
      <>
        {text.substring(0, breakIndex)}
        <br className="hidden xl:block" />
        {text.substring(breakIndex)}
      </>
    );
  }
  
  return text;
};


    async function getLoginPageData() {
    try {
        const [images, storeLinks,homePageData] = await Promise.all([
         getDynamicImages(SECURITY_KEY),
      fetch(`${BASE_URL}/social/getStoreIcons`).then(res => res.json()).catch(() => ({ data: [] })),
      fetch(`${BASE_URL}/page/home-page?securityKey=${SECURITY_KEY}`,{ next: { revalidate: 60 }}).then(res => res.json()).catch(() => ({ data: null })),
    ]);
        
        return {
        logoImage: images?.data,
        storeLinks: storeLinks?.data || [],
              homePageData: homePageData?.data,

        };
    } catch (error) {
        return {
        logoImage: null,
        storeLinks: [],
              homePageData: null,

        };
    }
    }

    export default async function LoginPage() {
  const { logoImage, storeLinks, homePageData } = await getLoginPageData();

   const quote = homePageData?.loginQuote?.quote;

    return (
        <>
        <section className="bg-[#F5F5F5] min-h-screen flex flex-col px-3">

            {/* Max width container to prevent stretching */}
            <div className="max-w-[1600px] mx-auto w-full relative py-5">
            <div
                className="w-full rounded-2xl"
                style={{
                backgroundImage: "url('/hero_banner.png')",
                backgroundRepeat: "no-repeat",
                backgroundSize: "cover",
                backgroundPosition: "center",
                }}
            >
                <div className="pb-[28px] pt-2 px-6 sm:px-10 md:pl-[10%]">
                <Image
                    height={50}
                    width={50}
                    src="checkuridea_logo.svg"
                    alt="Logo"
                    className="mb-2 w-[120px]"
                />

                <span className="text-[30px] leading-10 text-[#1D1D1D]">
                    Share Your Ideas. <br />
                    <strong>Get Feedback Make</strong> <br /> The Real
                </span>

                <p className="text-[14px] sm:text-[18px] text-[#1D1D1D] mt-2 mb-0 leading-6">
                    Share, track, and manage your ideas in one place.{" "}
                    <br className="hidden md:block" />
                    Join a community of creators and innovators.
                </p>
                </div>
            </div>

            <div className="flex flex-col-reverse lg:flex-row w-full lg:w-[90%] max-w-[1400px] mx-auto mt-3 py-2.5">
                {/* Quote Section */}
                <div className="md:mt-0 md:w-[48%] lg:w-1/2 md:relative lg:ms-0 md:mx-auto quote">
              <div className="h-auto text-black sm:w-[115%] w-full md:-ml-[4%] px-4 py-4 md:py-10 xl:py-10 bg-white rounded-xl text-center mt-4 mb-4 overflow-hidden">
                    <p className="text-[18px] italic leading-7 font-medium mb-0 relative">
                    <Image
                        height={25}
                        width={25}
                        src="quote_2.svg"
                        alt="quote"
                       className="left-quote absolute md:-left-7 md:w-12 -left-1 xl:left-6 w-4 h-4"
                    />
                    {/* Innovation is seeing what everybody has seen and thinking{" "}
                    <br className="hidden xl:block" /> what nobody of thought. */}
                      {formatQuoteWithLineBreak(quote)}

                    <Image
                        src="quote_1.svg"
                        height={25}
                        width={25}
                        alt="quote"
                        className="right-quote absolute md:right-6 bottom-3 xl:right-10 w-4 md:w-12 h-4"  
                    />
                    </p>
                </div>
                </div>

                {/* Login Form Section - Absolute positioned */}
                <div className="absolute top-2.5 right-1 md:right-2 lg:right-4 xl:right-[12%] 2xl:right-[18%] lg:top-16 auth-form w-full max-w-[500px] bottom-8">
                <LoginForm
                    logoImage={logoImage}
                    storeLinks={storeLinks}
                />
                </div>
            </div>
            </div>

            <WebsiteFooter footerData ={homePageData?.headerFooterImage} socialLinks={homePageData?.socialLinks} />
        
        </section>

        
        </>
    );
    }