import { fetchAssociatesData } from '@/services/about-us.service';
import Image from 'next/image';
import React from 'react';

interface PageData {
  id: number;
  uuid: string;
  title: string;
  description: string;
  cover_image_url?: string;
  slug: string;
}

interface PageItemData {
  id: number;
  title: string;
  description?: string;
  image?: string;
}

interface AssociatesResponse {
  status: boolean;
  pagedata?: PageData;
  pageItemdataWithSubsection?: PageItemData[];
}

export default async function KemsolPage() {
  let kemsolData: PageData | undefined;
  let kemsolImage: PageItemData | undefined;

  try {
    const response: AssociatesResponse = await fetchAssociatesData(
      '4aaa4554-e971-436e-af5a-a740c8dbc366'
    );

    kemsolData = response?.pagedata;
    kemsolImage = response?.pageItemdataWithSubsection?.[0];
  } catch (error) {
    console.log('Error fetching associate data:', error);
    return null;
  }

  if (!kemsolData) return null;

  const extractHref = (htmlString: string): string => {
    const hrefMatch = htmlString.match(/href\s*=\s*["']([^"']+)["']/i);
    if (hrefMatch?.[1]) {
      return hrefMatch[1]; 
    }
    const urlMatch = htmlString.match(/https?:\/\/[^\s<]+/i);
    return urlMatch ? urlMatch[0] : '#';
  };

  const sideLink = kemsolImage?.description
    ? extractHref(kemsolImage.description)
    : '#';

  return (
    <div className="bg-white">

      <div className=" mx-auto sm:px-4 md:px-6 py-12 max-w-4xl">
        <div className="relative mb-10 text-center">
          <h1 className="text-3xl md:text-4xl font-light text-gray-800 inline-block">
            {kemsolData.title}
          </h1>
          {kemsolImage?.image && (
            <div className="absolute right-0 top-1/2 transform -translate-y-1/2 w-16 sm:w-24 md:w-32 h-auto">
              <a href={sideLink} target="_blank" rel="noopener noreferrer">
                <Image
                  src={kemsolImage.image}
                  alt={`${kemsolImage.title} Logo`}
                  width={128}
                  height={64}
                  className="object-contain"
                />
              </a>
            </div>
          )}
        </div>

        {kemsolData.description && (
          <div
            className="prose max-w-none text-gray-700"
            dangerouslySetInnerHTML={{ __html: kemsolData.description }}
          />
        )}
      </div>
    </div>
  );
}