import React, { useState } from 'react'
import { useSelector } from 'react-redux';
import { useRouter } from 'next/navigation';
import ImageWithFallback from '@/Component/Common/ImageWithFallback';
import { AppStore } from '@/lib/store';
import { useTranslation } from '@/Utils/Hooks/useTranslate';
import { formatNumber } from '@/Utils/Other/FormateNumbers';

const CampaignBrandDetail = (props) => {
    const { campaignBrandDetailData } = props;
    const userDetails: any = useSelector((state: AppStore) => state.userDetailSlice?.userDetails);
    const router = useRouter();
    const [postId, setPostId] = useState('');
    const [socialMediaType, setSocialMediaType] = useState('');
    const { translations } = useTranslation();

    const dangerousTags = [
        'script',
        'style',
        'iframe',
        'embed',
        'object',
        'img',
        'video',
        'audio',
        'source',
        'link'
    ];

    const sanitizeHtml = (html) => {
        if (!html) return '';
        let result = html;
        dangerousTags.forEach(tag => {
            result = result.replace(new RegExp(`<${tag}[\\s\\S]*?>[\\s\\S]*?<\\/${tag}>`, 'gi'), '');
            result = result.replace(new RegExp(`<${tag}[^>]*?\\/?>`, 'gi'), '');
        });
        return result;
    };

    const formatHtml = (text) => {
        let sanitized = sanitizeHtml(text);
        // Convert URLs to clickable anchor tags
        const urlRegex = /(https?:\/\/[^\s]+)/g;
        const formattedText = sanitized?.replace(urlRegex, (url) => `<a href="${url}" target="_blank" rel="noopener noreferrer" class="text-blue-600 underline">${url}</a>`)?.replace(/\n/g, "<br/>"); // Preserve line breaks

        return formattedText;
    };

    return (
        <div className="rounded-xl overflow-hidden bg-lightGray/50">
            <div className='md:py-6 py-5 px-5 bg-gradient-to-br from-secondary to-primary flex md:items-center justify-between max-md:flex-col max-md:gap-5'>
                <div className='flex items-center 2xl:gap-5 gap-3 text-white'>
                    <div className='2xl:min-w-[70px] min-w-14 2xl:w-[70px] 2xl:h-[70px] w-14 h-14 rounded-full overflow-hidden bg-gray'>
                        <ImageWithFallback src={campaignBrandDetailData?.image} alt='Profile' className='w-full h-full object-cover' height={70} width={70} />
                    </div>
                    <div className='flex flex-col gap-1.5'>
                        <h5 className='font-semibold 2xl:text-2xl text-xl leading-7 text-white'>{campaignBrandDetailData?.first_name} {campaignBrandDetailData?.last_name}</h5>
                        {/* <div className='flex items-center gap-2'>
                            <span className='max-2xl:text-sm'>{campaignBrandDetailData?.country}</span>
                            <span className="rounded-full overflow-hidden">•</span>
                            <span className='max-2xl:text-sm'>{campaignBrandDetailData?.business_type}</span>
                            <span className="rounded-full overflow-hidden">•</span>
                            <span className='max-2xl:text-sm'>{campaignBrandDetailData?.working_people}</span>
                        </div> */}
                    </div>
                </div>
            </div>
            {/* <div className='flex items-center lg:gap-16 gap-8 2xl:my-10 my-5 px-5'>
                <div className='flex flex-col gap-0.5'>
                    <h6 className='font-semibold md:text-xl leading-5'>{campaignBrandDetailData?.campaignCount?.[0]?.count}</h6>
                    <span className='2xl:text-base text-sm'>{translations?.totalCampaigns}</span>
                </div>
                <div className='flex flex-col gap-0.5'>
                    <h6 className='font-semibold md:text-xl leading-5'>${formatNumber(campaignBrandDetailData?.campaignCount?.[0]?.total_budget)}</h6>
                    <span className='2xl:text-base text-sm'>{translations?.totalAmountSpent}</span>
                </div>
            </div> */}
            <div className="px-5 2xl:my-10 my-5">
                <h6 className='font-semibold md:text-lg leading-5 mb-3'>{translations?.brandDescription}</h6>
                <p className='text-sm' dangerouslySetInnerHTML={{ __html: campaignBrandDetailData?.about_me ? formatHtml(campaignBrandDetailData?.about_me) : '-' }}></p>
            </div>
        </div>
    )
}

export default CampaignBrandDetail