import { useRouter } from 'next/navigation';
import moment from 'moment';
import { formatNumber } from '@/Utils/Other/FormateNumbers';
import ImageWithFallback from '@/Component/Common/ImageWithFallback';
import { translateJobRequirements } from '@/Utils/Other/TranslateJobRequirement';

const CampaignListingBox = (props) => {
    const { userDetails, itemData, translations } = props;
    const router = useRouter();

    const handleClick = () => {
        if (userDetails?.role == 'brand') {
            router.push(`/brand/my-campaigns/${itemData.slug}?tab=Campaign%20Overview&id=${itemData.id}`)
        }
        else{
            router.push(`/admin/campaigns/${itemData.slug}`)
        }
    }

    return (
        <div
            className='group relative overflow-hidden border border-neutral-100 rounded-card py-5 2xl:px-6 px-5 flex sm:items-center justify-between max-sm:flex-col cursor-pointer gap-4 bg-white shadow-soft hover:shadow-float hover:-translate-y-0.5 hover:border-primary/20 transition-all duration-200'
            onClick={handleClick}
        >
            {/* Gradient top accent bar */}
            <span aria-hidden className="absolute left-0 right-0 top-0 h-[3px] bg-gradient-to-r from-primary to-accent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />

            <div className='flex flex-col gap-3'>
                {/* Date row */}
                <div className="flex items-center gap-2">
                    <svg className="w-4 h-4 text-neutral-400 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                        <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                        <line x1="16" y1="2" x2="16" y2="6"></line>
                        <line x1="8" y1="2" x2="8" y2="6"></line>
                        <line x1="3" y1="10" x2="21" y2="10"></line>
                    </svg>
                    <span className='text-xs text-neutral-500 font-medium'>{moment(itemData?.posting_start_date).format('DD MMM YYYY')} — {moment(itemData.posting_end_date).format('DD MMM YYYY')}</span>
                </div>

                {/* Campaign info row */}
                <div className='flex items-center gap-3'>
                    <div className='min-w-11 w-11 h-11 rounded-full flex items-center justify-center ring-2 ring-white shadow-soft overflow-hidden'>
                        {userDetails &&
                            <ImageWithFallback src={itemData?.users?.image} className="w-full h-full object-cover" alt="Profile" width={44} height={44} />}
                    </div>
                    <div className='flex flex-col gap-0.5'>
                        <h5 className='text-display font-bold line-clamp-1 text-neutral-900 group-hover:text-primary transition-colors'>{itemData.campaign_name}</h5>
                        <span className='text-xs text-neutral-500'>{translateJobRequirements(itemData?.job_requirement, translations)}</span>
                    </div>
                </div>
            </div>

            {/* Stats */}
            <div className='flex items-center gap-3 max-sm:mt-1'>
                <div className="flex flex-col items-center gap-0.5 rounded-xl bg-primary/5 px-5 py-2.5 min-w-[72px]">
                    <span className='text-display text-xl font-bold text-primary leading-none'>{itemData?.invited ?? 0}</span>
                    <span className='text-[11px] uppercase tracking-wider font-semibold text-neutral-500'>{translations?.invited}</span>
                </div>
                <div className="flex flex-col items-center gap-0.5 rounded-xl bg-accent/5 px-5 py-2.5 min-w-[72px]">
                    <span className='text-display text-xl font-bold text-accent leading-none'>{itemData?.hired ?? 0}</span>
                    <span className='text-[11px] uppercase tracking-wider font-semibold text-neutral-500'>{translations?.hired}</span>
                </div>
            </div>
        </div>
    )
}

export default CampaignListingBox