'use client'

import { SectionLabel, Text } from '@/components/ui'
import { cn } from '@/lib/utils'
import React, { useRef, useState } from 'react'
import { motion } from 'motion/react'
import type { CardOptionsItem, HomeImage } from '@/types/home'
import { useIsRtl } from '@/lib/use-is-rtl'
import Image from 'next/image'
import icon from "@/app/assets/Image/icon.png"
interface CardOptionsProps {
  badgeText?: string
  title?: string
  description?: string
  featuresList?: CardOptionsItem[]
  noteTitle?: string
  noteDesc?: string
  sectionImage?: HomeImage | false
  sectionImage2?: HomeImage | false
}

const FloatingCard = ({
  sectionImage,
  sectionImage2,
}: {
  sectionImage?: HomeImage | false
  sectionImage2?: HomeImage | false
}) => {
  const ref = useRef<HTMLDivElement>(null)
  const isRtl = useIsRtl()
  const [tilt, setTilt] = useState({ x: 0, y: 0 })

  const handleMove = (clientX: number, clientY: number) => {
    const el = ref.current
    if (!el) return
    const { left, top, width, height } = el.getBoundingClientRect()
    const px = (clientX - left) / width - 0.5
    const py = (clientY - top) / height - 0.5
    setTilt({ x: px * 25, y: py * -25 })
  }

  if ((!sectionImage || !sectionImage.url) && (!sectionImage2 || !sectionImage2.url)) return null

  return (
    <div className='flex justify-center lg:justify-end w-full'>
      <div className='relative w-[300px] sm:w-[400px] xl:w-[600px]  [@media(min-width:1700px)]:w-[780px]'>
        {sectionImage && sectionImage.url && (
          <img
            src={sectionImage.url}
            alt={sectionImage.alt || ''}
            className='h-auto w-full object-contain'
          />
        )}
        <div
          ref={ref}
          className={cn(
            'absolute top-18 sm:top-24 xl:top-40 [@media(min-width:1700px)]:top-48',
            isRtl
              ? 'right-27 sm:right-33 xl:right-50 [@media(min-width:1700px)]:right-68'
              : 'left-27 sm:left-33 xl:left-48 [@media(min-width:1700px)]:left-68',
          )}
          style={{ perspective: '800px' }}
          onMouseMove={(e) => handleMove(e.clientX, e.clientY)}
          onMouseLeave={() => setTilt({ x: 0, y: 0 })}
          onTouchMove={(e) => { const t = e.touches[0]; handleMove(t.clientX, t.clientY) }}
          onTouchEnd={() => setTilt({ x: 0, y: 0 })}
        >
          <div
            style={{
              transform: `rotateX(${tilt.y}deg) rotateY(${tilt.x}deg)`,
              transition: 'transform 300ms ease-out',
              transformStyle: 'preserve-3d',
              animation: tilt.x === 0 && tilt.y === 0 ? 'floatY 3s ease-in-out infinite' : 'none',
            }}
          >
            {sectionImage2 && sectionImage2.url && (
              <img
                src={sectionImage2.url}
                alt={sectionImage2.alt || ''}
                className='w-[47%] sm:w-[55%] xl:w-[85%]  [@media(min-width:1700px)]:w-full cursor-pointer'
                style={{
                  borderRadius: '12px',
                  transition: 'box-shadow 300ms ease-out',
                  // boxShadow: tilt.x !== 0 || tilt.y !== 0
                  //   ? '0 40px 100px rgba(255,255,255,0.4), 0 15px 40px rgba(255,255,255,0.3)'
                  //   : 'none',
                }}
              />
            )}
          </div>
        </div>
        <style>{`
          @keyframes floatY {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
          }
        `}</style>
      </div>
    </div>
  )
}

export const CardOptions = ({
  badgeText,
  title,
  description,
  featuresList = [],
  sectionImage,
  sectionImage2,
}: CardOptionsProps) => {
  const isRtl = useIsRtl()

  return (
    <section id='cards' className='flex justify-between gap-5 2xl:gap-[129px] lg:flex-row flex-col stack items-center'>
      <div className='space-y-4 md:space-y-[30px]'>
        <SectionLabel
          label={badgeText ?? ''}
          labelclass='border-white/10'
          textclass='text-white'
          title={title ? <span dangerouslySetInnerHTML={{ __html: title.replace(/<span>/g, '<span class="gradient-text">') }} /> : undefined}
          titleClassName='max-w-[35rem] xl:leading-[1.12] 2xl:leading-[1.14]'
          descriptionClassName='max-w-[34rem] text-white/72 leading-relaxed'
          description={description}
        />

        <div className='grid md:grid-cols-2 gap-y-6'>
          {(featuresList.length % 2 !== 0 ? featuresList.slice(0, -1) : featuresList).map((option, index) => (
            <div
              key={option.payseypay_cards_item_title}
              className={cn(
                'relative flex gap-4 pb-5 md:border-b md:border-[#1D3A1E]',
                index % 2 === 0
                  ? isRtl
                    ? "md:pl-6 md:after:absolute md:after:left-0 md:after:w-px md:after:bg-[#1D3A1E] md:after:content-['']"
                    : "md:pr-6 md:after:absolute md:after:right-0 md:after:w-px md:after:bg-[#1D3A1E] md:after:content-['']"
                  : isRtl
                    ? 'xl:pr-6'
                    : 'xl:pl-6',
                (index === 0 || index === 2) && 'md:after:top-0 md:after:bottom-5',
              )}
            >
              {option.payseypay_cards_item_icon && option.payseypay_cards_item_icon.url && (
                <motion.div
                  className='flex size-16 shrink-0 items-start justify-center'
                  whileHover={{ rotate: [0, -12, 12, -6, 0] }}
                  transition={{ duration: 0.7, ease: 'easeInOut' }}
                >
                  <img
                    src={option.payseypay_cards_item_icon.url}
                    alt={option.payseypay_cards_item_icon.alt || ''}
                    className='h-16 w-16 object-contain'
                  />
                </motion.div>
              )}
              <div className='space-y-1.5'>
                <Text size='body' fontWeight={700} className='text-secondary max-w-[12rem]' textKey={option.payseypay_cards_item_title} />
                <Text size='normal' className='text-[#DFDFDF]' textKey={option.payseypay_cards_item_description} />
              </div>
            </div>
          ))}
        </div>
        {featuresList.length % 2 !== 0 && (() => {
          const last = featuresList[featuresList.length - 1]
          return (
            <div key={last.payseypay_cards_item_title} className='relative flex gap-4'>
              {last.payseypay_cards_item_icon && last.payseypay_cards_item_icon.url && (
                <motion.div
                  className='flex size-16 shrink-0 items-start justify-center'
                  whileHover={{ rotate: [0, -12, 12, -6, 0] }}
                  transition={{ duration: 0.7, ease: 'easeInOut' }}
                >
                  <img src={last.payseypay_cards_item_icon.url} alt={last.payseypay_cards_item_icon.alt || ''} className='h-16 w-16 object-contain' />
                </motion.div>
              )}
              <div className='space-y-1.5'>
                <Text size='body' fontWeight={700} className='text-secondary' textKey={last.payseypay_cards_item_title} />
                <Text size='normal' className='text-[#DFDFDF]' textKey={last.payseypay_cards_item_description} />
              </div>
            </div>
          )
        })()}
{/* <div className='md:border-t md:border-[#1D3A1E] pt-4 md:pt-5 flex gap-[15px]'>
     <Image src={icon} alt=''   className='h-16 w-16 object-contain'/>
        <div className='space-y-1 '>
          <Text size='body' fontWeight={700} className='text-secondary' textKey={noteTitle} />
          <Text size='normal' className='text-white' textKey={noteDesc} />
        </div>
</div> */}
      </div>

      <FloatingCard sectionImage={sectionImage} sectionImage2={sectionImage2} />
    </section>
  )
}