'use client'

import { useEffect, useRef, useState } from 'react'
import { motion } from 'framer-motion'

const DEEP = '#683285'
const PRIMARY = '#A467B7'

type ScreenProps = { variant: 'map' | 'home' | 'chat' }

function PhoneScreen({ variant }: ScreenProps) {
  if (variant === 'map') {
    return (
      <div className="w-full h-full rounded-[28px] bg-white overflow-hidden flex flex-col p-3 font-body select-none">
        <style dangerouslySetInnerHTML={{ __html: `
          @keyframes ride-along-path {
            0% {
              left: 36.3%;
              top: 18.4%;
            }
            14.29% {
              left: 38.0%;
              top: 27.8%;
            }
            28.57% {
              left: 40.5%;
              top: 37.2%;
            }
            42.86% {
              left: 43.0%;
              top: 46.6%;
            }
            57.14% {
              left: 46.0%;
              top: 56.0%;
            }
            71.43% {
              left: 49.0%;
              top: 65.4%;
            }
            85.71% {
              left: 52.0%;
              top: 74.8%;
            }
            100% {
              left: 54.5%;
              top: 84.2%;
            }
          }
          .scooter-rider {
            transform: translate(-50%, -50%);
            animation: ride-along-path 9s linear infinite;
          }
        `}} />
        <div className="flex items-start justify-between rounded-2xl border border-[#E7D3EF] px-3 py-2 mb-3">
          <div>
            <div className="text-[9px] tracking-[0.18em] font-mono font-bold text-[#683285]">NEARLE</div>
            <div className="text-[10px] text-[#94A3B8]">Neighbourhood app</div>
          </div>
          <span className="text-[8px] font-bold bg-[#F5EEF8] text-[#683285] rounded-full px-2 py-0.5">
            FASTEST
          </span>
        </div>

        <div className="flex-1 relative rounded-2xl bg-[#FAFAFB] border border-[#EEF1F5] overflow-hidden">
          <svg className="absolute inset-0 w-full h-full" viewBox="0 0 220 380" preserveAspectRatio="none">
            {[40, 80, 120, 160, 200, 240, 280, 320].map((y) => (
              <line key={`h${y}`} x1="0" y1={y} x2="220" y2={y} stroke="#E5E7EB" strokeWidth="0.5" />
            ))}
            {[40, 80, 120, 160].map((x) => (
              <line key={`v${x}`} x1={x} y1="0" x2={x} y2="380" stroke="#E5E7EB" strokeWidth="0.5" />
            ))}
            <rect x="30" y="60" width="40" height="30" rx="4" fill="#F1F0F4" />
            <rect x="90" y="90" width="50" height="40" rx="4" fill="#F1F0F4" />
            <rect x="160" y="60" width="40" height="30" rx="4" fill="#F1F0F4" />
            <rect x="30" y="160" width="50" height="40" rx="4" fill="#F1F0F4" />
            <rect x="160" y="200" width="40" height="40" rx="4" fill="#F1F0F4" />
            <rect x="30" y="260" width="40" height="40" rx="4" fill="#F1F0F4" />
            <path d="M 80 70 C 90 110, 95 160, 110 220 S 115 290, 120 320" stroke={PRIMARY} strokeWidth="1.5" strokeDasharray="3 3" fill="none" />
          </svg>

          <div className="absolute top-[14%] left-[14%] bg-white text-[9px] font-bold text-[#111827] rounded-md px-1.5 py-0.5 shadow-sm border border-[#EEE]">
            Food Essentials
          </div>
          <div className="absolute w-6 h-6 rounded-full bg-[#683285] border-2 border-white flex items-center justify-center text-[10px] shadow scooter-rider">🛵</div>
          <div className="absolute bottom-[12%] left-[44%] bg-white text-[9px] font-bold text-[#111827] rounded-md px-1.5 py-0.5 shadow-sm border border-[#EEE]">
            Your Home
          </div>
        </div>

        <div className="mt-3 flex gap-2">
          <div className="flex-1 rounded-xl border border-[#EEF1F5] px-2 py-1.5">
            <div className="text-[8px] uppercase tracking-wider text-[#94A3B8] font-mono">Local Shopping</div>
            <div className="text-[12px] font-extrabold text-[#683285]">Safe &amp; Easy</div>
          </div>
          <div className="flex-1 rounded-xl border border-[#EEF1F5] px-2 py-1.5">
            <div className="text-[8px] uppercase tracking-wider text-[#94A3B8] font-mono">Fulfilled by</div>
            <div className="text-[12px] font-extrabold text-[#111827]">Local Business</div>
          </div>
        </div>
      </div>
    )
  }

  if (variant === 'home') {
    return (
      <div className="w-full h-full rounded-[28px] bg-white overflow-hidden flex flex-col p-3 font-body select-none">
        <div className="flex items-center justify-between mb-2">
          <div className="font-display font-extrabold text-[#111827] text-[15px]">Nearle.</div>
          <div className="flex gap-1.5">
            <div className="w-5 h-5 rounded-full bg-[#F5EEF8] flex items-center justify-center text-[9px]">🛒</div>
            <div className="w-5 h-5 rounded-full bg-[#E7D3EF] text-[#683285] flex items-center justify-center text-[8px] font-bold">A</div>
          </div>
        </div>

        <div className="rounded-2xl p-3" style={{ background: `linear-gradient(135deg, ${DEEP} 0%, ${PRIMARY} 100%)` }}>
          <div className="flex items-start justify-between">
            <div>
              <div className="text-[8px] tracking-[0.16em] font-mono text-white/80 font-bold">NEARLE APP</div>
              <div className="text-white font-display font-extrabold text-[15px] mt-0.5 leading-tight">All needs nearby</div>
            </div>
            <div className="w-6 h-4 rounded bg-white/15 flex items-center justify-center text-[10px]">💳</div>
          </div>
          <div className="flex items-end justify-between mt-3 pt-2 border-t border-white/15">
            <div className="text-[7px] tracking-[0.14em] font-mono text-white/85 font-bold">NEIGHBOURHOOD LIVING</div>
            <div className="text-[7px] tracking-[0.14em] font-mono text-white/55 font-bold">LOCAL TRUST</div>
          </div>
        </div>

        <div className="text-[8px] tracking-[0.16em] font-mono font-bold text-[#94A3B8] mt-3 mb-2">DISCOVER NEARLE</div>

        {[
          { icon: '🥐', t: 'Food Hot Food', s: 'Restaurants, take aways', cta: 'ORDER', tone: 'purple' },
          { icon: '🥑', t: 'Food Essentials', s: 'Fruits and essentials instantly', cta: 'ORDER', tone: 'purple' },
        ].map((row) => (
          <div key={row.t} className="flex items-center gap-2 rounded-xl border border-[#EEF1F5] px-2 py-1.5 mb-1.5">
            <div className="w-6 h-6 rounded-md bg-[#F8FAFC] flex items-center justify-center text-[12px]">{row.icon}</div>
            <div className="flex-1 min-w-0">
              <div className="text-[10px] font-extrabold text-[#111827] truncate">{row.t}</div>
              <div className="text-[8px] text-[#94A3B8] truncate">{row.s}</div>
            </div>
            <div
              className={`text-[8px] font-extrabold rounded-md px-1.5 py-0.5 ${
                row.tone === 'blue' ? 'bg-[#E0F2FE] text-[#0284C7]' : 'bg-[#F5EEF8] text-[#683285]'
              }`}
            >
              {row.cta}
            </div>
          </div>
        ))}

        <div className="mt-auto flex items-center justify-around pt-2 rounded-xl bg-[#F5EEF8]/70">
          <div className="flex flex-col items-center text-[#683285]">
            <span className="text-[12px]">🏠</span>
            <span className="text-[7px] font-bold mt-0.5">Home</span>
          </div>
          <div className="flex flex-col items-center text-[#94A3B8]">
            <span className="text-[12px]">🛵</span>
            <span className="text-[7px] font-bold mt-0.5">Tracking</span>
          </div>
          <div className="flex flex-col items-center text-[#94A3B8]">
            <span className="text-[12px]">🛍️</span>
            <span className="text-[7px] font-bold mt-0.5">Local</span>
          </div>
        </div>
      </div>
    )
  }

  // chat
  return (
    <div className="w-full h-full rounded-[28px] bg-white overflow-hidden flex flex-col p-3 font-body select-none">
      <div className="flex items-center gap-2 rounded-xl border border-[#EEF1F5] p-2 mb-2">
        <div className="w-6 h-6 rounded-full bg-[#FFEEC2] flex items-center justify-center text-[10px]">💎</div>
        <div className="flex-1 min-w-0">
          <div className="text-[10px] font-extrabold text-[#111827]">Nearle Community</div>
          <div className="text-[8px] text-[#94A3B8]">Neighbourhood active</div>
        </div>
      </div>

      <div className="flex-1 flex flex-col gap-2 overflow-hidden">
        <div className="self-start max-w-[80%] rounded-xl rounded-tl-sm bg-[#F1F5F9] px-2 py-1.5">
          <div className="text-[8px] font-bold text-[#475569]">Neighbourhood</div>
          <div className="text-[9px] text-[#475569]">Pick hot deals from neighbourhood…</div>
        </div>
        <div className="self-end max-w-[85%] rounded-xl rounded-tr-sm bg-[#F5EEF8] px-2 py-1.5">
          <div className="text-[8px] font-bold text-[#683285] text-right">You</div>
          <div className="text-[9px] text-[#683285]">Get all needs from local store to home instantly.</div>
        </div>
        <div className="self-start max-w-[80%] rounded-xl rounded-tl-sm bg-[#F1F5F9] px-2 py-1.5">
          <div className="text-[8px] font-bold text-[#0284C7]">Local Business</div>
          <div className="text-[9px] text-[#475569]">Order received — packing your items now.</div>
        </div>
      </div>

      <div className="mt-2 rounded-2xl border border-[#D1FAE5] bg-[#ECFDF5] py-2 px-3 text-center">
        <div className="text-[7px] tracking-[0.16em] font-mono font-bold text-[#10B981]">GET READY NOW</div>
        <div className="text-[12px] font-extrabold text-[#111827] mt-0.5">Download Nearle</div>
      </div>
    </div>
  )
}

function Phone({
  variant,
  rotateY,
  translateX,
  translateY,
  translateZ,
  delay,
}: {
  variant: ScreenProps['variant']
  rotateY: number
  translateX: number
  translateY: number
  translateZ: number
  delay: number
}) {
  return (
    <div
      style={{
        transformStyle: 'preserve-3d',
        transform: `translate3d(${translateX}px, ${translateY}px, ${translateZ}px) rotateY(${rotateY}deg) translate(-50%, -50%)`,
      }}
      className="absolute top-1/2 left-1/2"
    >
      <motion.div
        initial={{ opacity: 0, y: 30 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.7, delay }}
        style={{ transformStyle: 'preserve-3d' }}
      >
        <motion.div
          animate={{ y: [0, -10, 0] }}
          transition={{
            duration: 5 + Math.abs(rotateY) * 0.05,
            repeat: Infinity,
            ease: 'easeInOut',
            delay,
          }}
          className="relative"
          style={{
            width: 198,
            height: 396,
            filter: 'drop-shadow(0 30px 50px rgba(104,50,133,0.18))',
          }}
        >
          {/* Phone frame */}
          <div
            className="absolute inset-0 rounded-[34px] bg-white"
            style={{
              border: '1.5px solid #DDD8E5',
              boxShadow: 'inset 0 0 0 6px #F5EEF8, 0 16px 40px -10px rgba(104,50,133,0.20)',
            }}
          />
          {/* Notch */}
          <div className="absolute top-2 left-1/2 -translate-x-1/2 w-14 h-2 rounded-full bg-[#1F1B2E]/85 z-10" />
          {/* Screen */}
          <div className="absolute inset-[10px] rounded-[26px] overflow-hidden bg-white">
            <PhoneScreen variant={variant} />
          </div>
        </motion.div>
      </motion.div>
    </div>
  )
}

export default function HeroPhones3D() {
  const ref = useRef<HTMLDivElement>(null)
  const [tilt, setTilt] = useState({ x: 0, y: 0 })

  useEffect(() => {
    const el = ref.current
    if (!el) return
    function onMove(e: MouseEvent) {
      if (!el) return
      const r = el.getBoundingClientRect()
      const nx = (e.clientX - r.left) / r.width - 0.5
      const ny = (e.clientY - r.top) / r.height - 0.5
      setTilt({ x: nx, y: ny })
    }
    function onLeave() {
      setTilt({ x: 0, y: 0 })
    }
    el.addEventListener('mousemove', onMove)
    el.addEventListener('mouseleave', onLeave)
    return () => {
      el.removeEventListener('mousemove', onMove)
      el.removeEventListener('mouseleave', onLeave)
    }
  }, [])

  return (
    <div
      ref={ref}
      className="relative w-full h-full"
      style={{ perspective: '1400px' }}
    >
      {/* Top-left tag */}
      <motion.div
        initial={{ opacity: 0, y: -10 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5, delay: 0.2 }}
        className="absolute top-2 left-2 z-20 flex items-center gap-2 bg-white border border-[#E7D3EF] rounded-full pl-2 pr-3 py-1.5 shadow-[0_4px_16px_rgba(164,103,183,0.10)]"
      >
        <span className="w-5 h-5 rounded-full bg-[#F5EEF8] flex items-center justify-center text-[10px]">🏅</span>
        <span className="font-display font-extrabold text-[#111827] text-[11px] leading-none">
          Convenient &amp; safe shopping locally
        </span>
      </motion.div>

      {/* Phones stage */}
      <div
        className="absolute inset-0"
        style={{
          transformStyle: 'preserve-3d',
          transform: `rotateY(${tilt.x * 6}deg) rotateX(${-tilt.y * 4}deg)`,
          transition: 'transform 0.25s ease-out',
        }}
      >
        <Phone variant="map" rotateY={16} translateX={-220} translateY={10} translateZ={-50} delay={0.05} />
        <Phone variant="home" rotateY={0} translateX={0} translateY={-10} translateZ={40} delay={0.18} />
        <Phone variant="chat" rotateY={-16} translateX={220} translateY={10} translateZ={-50} delay={0.3} />
      </div>
    </div>
  )
}
