// app/(auth)/sign-up/page.tsx
import { Suspense } from 'react';
import { SignUpForm } from '@/components/auth/SignUpForm';
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 getSignUpPageData() {
  try {
    // ✅ Fetch all data including homePageData for footer
    const [images, countries, storeLinks, homePageData] = await Promise.all([
      getDynamicImages(SECURITY_KEY),
      getAllCountries(SECURITY_KEY),
      fetch(`${BASE_URL}/social/getStoreIcons?securityKey=${SECURITY_KEY}`).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,
      countries: countries?.data || [],
      storeLinks: storeLinks?.data || [],
      homePageData: homePageData?.data,
    };
  } catch (error) {
    return {
      logoImage: null,
      countries: [],
      storeLinks: [],
      homePageData: null,
    };
  }
}

export default async function SignUpPage() {
  const { logoImage, countries, storeLinks, homePageData } = await getSignUpPageData();

  // ✅ Get quote from homePageData (same as login page)
  const quote = homePageData?.loginQuote?.quote || "Innovation is seeing what everybody has seen and thinking what nobody of thought.";

  return (
    <>
      <section className="bg-[#F5F5F5] py-2.5 w-full min-h-[99vh] md:h-full px-3">
        {/* Max width container to prevent stretching */}
        <div className="max-w-[1600px] mx-auto w-full relative">
          <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] mt-2 text-[#1D1D1D] 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">
            {/* Quote Section - DYNAMIC NOW */}
            <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 px-6 md:px-12">
                  <Image
                    height={25}
                    width={25}
                    src="quote_2.svg"
                    alt="quote"
                  className="left-quote absolute md:-left-2 md:w-12 -left-1 xl:left-6 w-4 h-4"
                  />
                  {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>

            {/* SignUp Form Section - Absolute positioned */}
            <div className="absolute top-1 right-3 md:right-8 lg:right-[1%] xl:right-[8%] 2xl:right-[18%] lg:top-6 auth-form w-full max-w-2xl bottom-8">
              <SignUpForm
                logoImage={logoImage}
                countries={countries}
                storeLinks={storeLinks}
              />
            </div>
          </div>
        </div>
      </section>

      {/* ✅ Website Footer */}
      <WebsiteFooter 
        footerData={homePageData?.headerFooterImage} 
        socialLinks={homePageData?.socialLinks} 
      />
    </>
  );
}