import { getSiloRoute } from "../../../lib/directQueries/allqueries";
import HeroSection from "../../components/HeroSection";
import TextDisplay from "../../components/clientcomponents/TextDisplay";
import MarqueeRow from "../../components/MarqueeRow";
import WebPageSchema from "../../components/WebPageSchema";
import ImageWithText from "../../components/ImageWithText";
import FAQSection from "../../components/FAQSection";
import FAQSchema from "../../components/FAQSchema";

const PAGE_SLUG = 'student-visa-services';

const countries = [
  { name: 'United States', flag: 'https://flagcdn.com/w320/us.png' },
  { name: 'United Kingdom', flag: 'https://flagcdn.com/w320/gb.png' },
  { name: 'Canada', flag: 'https://flagcdn.com/w320/ca.png' },
  { name: 'Australia', flag: 'https://flagcdn.com/w320/au.png' },
  { name: 'Germany', flag: 'https://flagcdn.com/w320/de.png' },
  { name: 'France', flag: 'https://flagcdn.com/w320/fr.png' },
  { name: 'Netherlands', flag: 'https://flagcdn.com/w320/nl.png' },
  { name: 'New Zealand', flag: 'https://flagcdn.com/w320/nz.png' },
  { name: 'Japan', flag: 'https://flagcdn.com/w320/jp.png' },
  { name: 'Sweden', flag: 'https://flagcdn.com/w320/se.png' },
  { name: 'Ireland', flag: 'https://flagcdn.com/w320/ie.png' }
];

// ✅ Dynamic metadata from DB
export async function generateMetadata() {
  const response = await getSiloRoute(PAGE_SLUG);
  const page = response?.data;

  return {
    title: page?.meta_title || "Trusted Study Abroad Consultants in Pakistan",
    description: page?.meta_description || "Looking for trusted study abroad consultants in Pakistan? Expert guidance on universities, scholarships, visas, and applications.",
    openGraph: {
      title: page?.meta_title || "Trusted Study Abroad Consultants in Pakistan",
      description: page?.meta_description || "Looking for trusted study abroad consultants in Pakistan?",
      url: `${process.env.NEXT_PUBLIC_APP_URL}/${PAGE_SLUG}`,
      siteName: process.env.NEXT_PUBLIC_APP_WEBSITE_NAME,
      type: "website",
    },
    twitter: {
      card: "summary_large_image",
      title: page?.meta_title || "Trusted Study Abroad Consultants in Pakistan",
      description: page?.meta_description || "Looking for trusted study abroad consultants in Pakistan?",
    },
    alternates: {
      canonical: `${process.env.NEXT_PUBLIC_APP_URL}/${PAGE_SLUG}`,
    },
    robots: {
      index: true,
      follow: true,
      nocache: false,
      googleBot: {
        index: true,
        follow: true,
        noimageindex: false,
        "max-video-preview": -1,
        "max-image-preview": "large",
        "max-snippet": -1,
      },
    },
  };
}

async function fetchData() {
  const [pageData] = await Promise.all([getSiloRoute(PAGE_SLUG)]);

  let faqs = [];
  try {
    const raw = pageData?.data?.faqs;
    faqs = raw ? JSON.parse(raw) : [];
  } catch {
    faqs = [];
  }

  return {
    pageData: pageData.data || null,
    faqs
  };
}

export default async function StudyAbroadConsultantsPage() {
  try {
    const { pageData, faqs } = await fetchData();

    return (
      <>
        <WebPageSchema
          pageSlug={PAGE_SLUG}
          pageData={pageData}
          breadcrumbs={[
            { name: "Home", href: "/" },
            { name: "Test Preparation", href: "/test-preparation" },
          ]}
        />
        <FAQSchema faqs={faqs} />
        <HeroSection
          toptitle=""
          simple_title={pageData?.simple_title}
          color_title={pageData?.color_title}
          description={pageData?.short_description}
        />

        {/* Countries Marquee */}
        <div className="py-20">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="text-center mb-12">
              <h2 className="text-3xl font-bold text-gray-900 mb-4">
                Countries We Help Students Study In
              </h2>
              <p className="text-gray-600 max-w-2xl mx-auto">
                Explore educational opportunities across the globe with our expert guidance
              </p>
            </div>
            
            <div className="space-y-4 mb-12">
              <MarqueeRow countries={countries} />
              <MarqueeRow countries={countries} reverse />
            </div>
          </div>
        </div>
        <div className="py-12 md:py-16 lg:py-20">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="bg-white rounded-2xl shadow-xl overflow-hidden border border-gray-200">
              <div className="p-6 md:p-8 lg:p-12">
                <TextDisplay
                  content={pageData?.top_content}
                  className="prose prose-lg max-w-none sn-content"
                />
              </div>
            </div>
          </div>
        </div>
        <ImageWithText
          title={pageData?.about_title}
          description={pageData?.about_content}   // raw HTML string from DB
          imageSrc={pageData?.about_image}
          imageAlt={pageData?.about_image_alt_text}
          imagePosition={pageData?.about_image_direction}             // "left" | "right"
        />
        <div className="py-12 md:py-16 lg:py-20">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="bg-white rounded-2xl shadow-xl overflow-hidden border border-gray-200">
              <div className="p-6 md:p-8 lg:p-12">
                <TextDisplay
                  content={pageData?.bottom_content}
                  className="prose prose-lg max-w-none sn-content"
                />
              </div>
            </div>
          </div>
        </div>
        {faqs.length > 0 && <FAQSection faqs={faqs} />}
      </>
    );

  } catch (error) {
    console.error('Error in StudyAbroadConsultantsPage:', error);
  }
}