'use client'

import { useEffect, useMemo, useState } from 'react'
import Image from 'next/image'
import { motion, AnimatePresence } from 'framer-motion'
import { wrap } from 'popmotion'
import { Button } from '@/components/Button';
import { H2, P, H4 } from '@/components/Texts';
import { TypeAnimation } from 'react-type-animation'

const galleryItems = [
  { text: 'Navigate and interact with any web interface', image: '/images/interface.png' },
  { text: 'Process documents across all formats', image: '/images/docs.png' },
  { text: 'Execute multi-step workflows autonomously', image: '/images/flow.png' },
  { text: 'Manage calendars, emails, and tasks', image: '/images/calendar.png' },
  { text: 'Perform deep semantic search across all data sources', image: '/images/data.png' },
  { text: 'Identify patterns in complex datasets', image: '/images/datasets.png' },
  { text: 'Provide real-time market intelligence', image: '/images/market.png' },
  { text: 'Generate and debug code in multiple languages', image: '/images/code.png' },
  { text: 'Create consistent branded content', image: '/images/branding.png' },
  { text: 'Translate and localize materials', image: '/images/translate.png' },
  { text: 'Transform and migrate data structures', image: '/images/structure.png' },
]

// 🔧 Carousel Config
const VISIBLE = 4
const CARD_SIZE = 360 // square size on desktop
const GAP = 300       // spacing for larger cards
const ROT_Y = 18
const DEPTH = 210
const SCALE_DROP = 0.12
const AUTOPLAY_MS = 3200

export function ClickableGallery() {
  const [active, setActive] = useState(0)
  const [hovering, setHovering] = useState(false)

  // autoplay
  useEffect(() => {
    if (hovering) return
    const id = setInterval(() => setActive((i) => wrap(0, galleryItems.length, i + 1)), AUTOPLAY_MS)
    return () => clearInterval(id)
  }, [hovering])

  const indices = useMemo(
    () => [...Array(VISIBLE * 2 + 1)].map((_, i) => wrap(0, galleryItems.length, active + i - VISIBLE)),
    [active]
  )

  const next = () => setActive((i) => wrap(0, galleryItems.length, i + 1))
  const prev = () => setActive((i) => wrap(0, galleryItems.length, i - 1))

  return (
    <>
      <div className="relative isolate pt-24 pb-0 text-center w-full h-screen">
        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 1, delay: 1 }} className="mx-auto max-w-5xl">
          <H2 className="text-center">One Agent, Endless Possibilities.</H2>
        </motion.div>
        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 1, delay: 1.5 }} className="mx-auto max-w-4xl mt-6">
          <P className="text-center" color="custom">
            The future isn’t about more tools. It’s about one intelligent partner that can do it all. This is your gateway to creativity, automation, and discovery.
          </P>
        </motion.div>
        <div
          aria-hidden="true"
          className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
        >
          <div
            style={{
              clipPath:
                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
            }}
            className="relative left-[calc(50%-30rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#93c5fd] to-[#9089fc] opacity-30 sm:left-[calc(50%-36rem)] sm:w-[72.1875rem]"
          />
        </div>
      </div>
      <section
        className="relative w-full h-[900px] flex items-center justify-center overflow-hidden bg-background -mt-32"
        onMouseEnter={() => setHovering(true)}
        onMouseLeave={() => setHovering(false)}
      >
        {/* Soft edge fades */}
        <div className="pointer-events-none absolute inset-y-0 left-0 w-32 bg-gradient-to-r from-background to-transparent" />
        <div className="pointer-events-none absolute inset-y-0 right-0 w-32 bg-gradient-to-l from-background to-transparent" />

        <div className="relative w-full max-w-[1800px] h-full" style={{ perspective: '1600px' }}>
          <div
            aria-hidden="true"
            className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
          >
            <div
              style={{
                clipPath:
                  'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
              }}
              className="relative left-[calc(50%+4rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#93c5fd] to-[#9089fc] opacity-30 sm:left-[calc(50%+60rem)] sm:w-[72.1875rem]"
            />
          </div>
          <div className="absolute inset-0" style={{ transformStyle: 'preserve-3d' }}>
          <AnimatePresence initial={false}>
            {indices.map((idx, i) => {
              const distance = i - VISIBLE
              const item = galleryItems[idx]

              const x = distance * GAP
              const z = -Math.abs(distance) * DEPTH
              const r = distance * ROT_Y
              const s = 1 - Math.abs(distance) * SCALE_DROP
              const o = distance === 0 ? 1 : 0.90
              const zIndex = 100 - Math.abs(distance)

              return (
                <motion.div
                  key={`${idx}-${i}`}
                  className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 will-change-transform"
                  initial={{ opacity: 0 }}
                  animate={{
                    transform: `translateX(${x}px) translateZ(${z}px) rotateY(${r}deg) scale(${s})`,
                    zIndex,
                    opacity: o,
                  }}
                  exit={{ opacity: 0 }}
                  transition={{ type: 'spring', stiffness: 220, damping: 26 }}
                  onClick={() => setActive(idx)}
                >
                  {/* Square container, keeps image ratio inside */}
                  <div
                    className="relative rounded-2xl overflow-hidden bg-white flex items-center justify-center"
                    style={{ width: CARD_SIZE, height: CARD_SIZE }}
                  >
                    <Image
                      src={item.image}
                      alt={item.text}
                      fill
                      className="object-contain rounded-2xl"
                      priority={i === VISIBLE}
                    />
                  </div>
                </motion.div>
              )
            })}
          </AnimatePresence>
        </div>

        {/* Arrows */}
        <div className="absolute inset-y-0 left-8 flex items-center z-50">
          <button
            onClick={prev}
            className="bg-white/70 hover:bg-white rounded-full p-3 shadow-lg backdrop-blur-md"
            aria-label="Previous"
          >
            <svg className="size-8" viewBox="0 0 24 24" fill="none" dangerouslySetInnerHTML={{ __html: '<path d="M15 19L8 12l7-7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>' }} />
          </button>
        </div>
        <div className="absolute inset-y-0 right-8 flex items-center z-50">
          <button
            onClick={next}
            className="bg-white/70 hover:bg-white rounded-full p-3 shadow-lg backdrop-blur-md"
            aria-label="Next"
          >
            <svg className="size-8" viewBox="0 0 24 24" fill="none" dangerouslySetInnerHTML={{ __html: '<path d="M9 5l7 7-7 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>' }} />
          </button>
        </div>

        {/* Foreground pill */}
        <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-[60]">
          <div className="flex items-center justify-between w-[1040px] gap-6 rounded-3xl bg-white/95 shadow-[0_8px_40px_rgba(0,0,0,0.15)] px-12 py-6 backdrop-blur">
            <H4 as="h4" className="max-w-[820px] h-[72px]">
              <TypeAnimation
                key={active}
                sequence={[galleryItems[active].text]}
                wrapper="span"
                speed={50}
                repeat={0}
              />
            </H4>
            <Button href="#" color="cyan" className="text-sm px-4 py-2 lg:text-base">
               Start
            </Button> 
          </div>
        </div>
      </div>
    </section>
    </>
  )
}
