'use client'

import { motion } from 'framer-motion'
import Image from 'next/image'
import Link from 'next/link'
import React, { useEffect, useRef, useState } from 'react'

const users = [
  {
    id: 0,
    name: '1 علی مصلحی',
    table: 12,
    avatar: '/assets/images/user-avatar.png'
  },
  {
    id: 1,
    name: '2 علی مصلحی',
    table: 10,
    avatar: '/assets/images/user-avatar.png'
  },
  {
    id: 2,
    name: '3 علی مصلحی',
    table: 11,
    avatar: '/assets/images/user-avatar.png'
  },
  {
    id: 3,
    name: '4 علی مصلحی',
    table: 5,
    avatar: '/assets/images/user-avatar.png'
  },
  {
    id: 4,
    name: '5 علی مصلحی',
    table: 2,
    avatar: '/assets/images/user-avatar.png'
  },
  {
    id: 5,
    name: '6 علی مصلحی',
    table: 1,
    avatar: '/assets/images/user-avatar.png'
  }
]

function ChatNearby () {
  const containerRef = useRef<HTMLElement>(null)
  const [positions, setPositions] = useState<{ top: number; left: number }[]>(
    []
  )

  useEffect(() => {
    if (containerRef.current) {
      const maxW = containerRef.current.offsetWidth - 50
      const maxH = containerRef.current.offsetHeight - 180
      const elementSize = 110 // approximate size of each user element
      const padding = 80 // minimum distance between elements

      const positions: { top: number; left: number }[] = []

      const isTooClose = (top: number, left: number) => {
        return positions.some(p => {
          const dx = p.left - left
          const dy = p.top - top
          const distance = Math.sqrt(dx * dx + dy * dy)
          return distance < padding
        })
      }

      users.forEach(() => {
        let top = 0
        let left = 0
        let tries = 0

        do {
          top = Math.random() * Math.abs(maxH - elementSize)
          left = Math.random() * Math.abs(maxW - elementSize)
          tries++
        } while (isTooClose(top, left) && tries < 100)

        positions.push({ top, left })
      })

      setPositions(positions)
    }
  }, [])

  return (
    <section ref={containerRef} className='h-svh relative'>
      <section className='relative h-full w-full mt-7'>
        <motion.div
          className='w-[1145px] h-[1145px] rounded-full fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 
             bg-[linear-gradient(180deg,#EAECF0_4.52%,#DBDEE8_95.02%)] 
             dark:bg-[linear-gradient(180deg,#1F2937_4.52%,#374151_95.02%)]'
          style={{ willChange: 'transform' }}
        ></motion.div>

        <motion.div
          animate={{ scale: [1, 0.95, 1] }}
          transition={{ repeat: Infinity, duration: 13 }}
          className='w-[824px] h-[824px] rounded-full fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 
             bg-[linear-gradient(180deg,#EBF0FC_4.52%,#EBF0FC_95.02%)] 
             dark:bg-[linear-gradient(180deg,#111827_4.52%,#1E293B_95.02%)]'
          style={{ willChange: 'transform' }}
        ></motion.div>

        <motion.div
          animate={{ scale: [0.9, 1] }}
          transition={{ repeat: Infinity, duration: 4, repeatType: 'reverse' }}
          className='w-[617px] h-[617px] rounded-full fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 
             bg-[linear-gradient(180deg,#E6EBFA_0%,#DFE2EC_100%)] 
             dark:bg-[linear-gradient(180deg,#1E293B_0%,#111827_100%)]'
          style={{ willChange: 'transform' }}
        ></motion.div>

        <motion.div
          animate={{ scale: [1.02, 0.95] }}
          transition={{ repeat: Infinity, duration: 2, repeatType: 'reverse' }}
          className='w-[425px] h-[425px] rounded-full fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 
             bg-[linear-gradient(180deg,#E1E5EF_0%,#D8DDE8_60.2%,#D2D7E3_100%)] 
             dark:bg-[linear-gradient(180deg,#1F2937_0%,#374151_60.2%,#1E293B_100%)]'
          style={{ willChange: 'transform' }}
        ></motion.div>

        <motion.div
          animate={{ scale: [1.05, 1] }}
          transition={{ repeat: Infinity, duration: 2, repeatType: 'reverse' }}
          className='w-[292px] h-[292px] rounded-full fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 
             bg-[linear-gradient(180deg,#EAEDF5_0%,#E4E7F0_46.52%,#DDDFEB_100%)] 
             dark:bg-[linear-gradient(180deg,#111827_0%,#1E293B_46.52%,#1F2937_100%)]'
          style={{ willChange: 'transform' }}
        ></motion.div>

        <motion.div
          animate={{ scale: [1, 1.05] }}
          transition={{ repeat: Infinity, duration: 2, repeatType: 'reverse' }}
          className='w-[174px] h-[174px] rounded-full fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 
             bg-[linear-gradient(180deg,#F3F7FF_0%,#F2F5FC_100%)] 
             dark:bg-[linear-gradient(180deg,#1E293B_0%,#111827_100%)]'
          style={{ willChange: 'transform' }}
        ></motion.div>

        <motion.div
          animate={{ scale: [0, 1.2], opacity: [1, 0] }}
          transition={{ repeat: Infinity, duration: 2 }}
          className='h-full w-[100dvh] rounded-full fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 
             outline outline-solid outline-blue-400'
          style={{ willChange: 'transform, opacity' }}
        ></motion.div>

        <div>
          {positions.length === users.length &&
            users.map((v, i) => (
              <Link
                href={`${v.id}`}
                prefetch={false}
                key={v.id}
                style={{
                  position: 'absolute',
                  top: positions[i].top,
                  left: positions[i].left
                }}
                className='justify-items-center'
              >
                <Image
                  height={46}
                  width={46}
                  alt='user avatar'
                  src={v.avatar}
                />
                <h6 className='mt-2 text-xs font-medium'>{v.name}</h6>
                <div className='mt-[3px] text-xs2 font-medium bg-disabled-text dark:bg-neutral-800 text-accent rounded-[5px] px-[5px] py-[3px]'>
                  میز {v.table}
                </div>
              </Link>
            ))}
        </div>
      </section>
    </section>
  )
}

export default ChatNearby
