'use client'

import Image from 'next/image'
import Link from 'next/link'
import { useCallback, useEffect, useRef, useState } from 'react'
import type { Reference } from '@/lib/data'
import { IconArrowBack, IconArrowForward } from './Icons'

/**
 * Kiemelt vélemény: egyszerre egy pár, nagyban.
 *
 * A korábbi vízszintesen görgő kártyasor mobilon kilógott a képernyőből;
 * itt egyetlen elem van, ami 860px alatt egymás alá rendeződik — nincs
 * vízszintes görgetés, nincs levágott kártya.
 *
 * A fotó a saját méretarányában jelenik meg, tehát nem vág le fejeket.
 */
export default function Testimonials({ items }: { items: Reference[] }) {
  const [index, setIndex] = useState(0)
  const [dir, setDir] = useState<'next' | 'prev'>('next')
  const [paused, setPaused] = useState(false)
  const railRef = useRef<HTMLDivElement>(null)

  const go = useCallback(
    (d: 1 | -1) => {
      setDir(d === 1 ? 'next' : 'prev')
      setIndex((prev) => (prev + d + items.length) % items.length)
    },
    [items.length]
  )

  // automatikus léptetés, hover/fókusz/érintés alatt megáll
  useEffect(() => {
    if (paused || items.length < 2) return
    const id = setInterval(() => go(1), 7000)
    return () => clearInterval(id)
  }, [paused, go, items.length])

  useEffect(() => {
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) setPaused(true)
  }, [])

  // Az arcképsáv kövesse az aktuális párt.
  // Kizárólag a sáv saját vízszintes görgetését állítjuk: a scrollIntoView
  // `block: nearest`-tel a LAPOT is elgörgette, ezért betöltéskor a látogató
  // a referenciákhoz ugrott, és minden automata váltásnál újra megrándult.
  useEffect(() => {
    const rail = railRef.current
    const active = rail?.querySelector<HTMLElement>('.is-active')
    if (!rail || !active) return
    rail.scrollTo({
      left: active.offsetLeft - rail.clientWidth / 2 + active.clientWidth / 2,
      behavior: 'smooth',
    })
  }, [index])

  if (items.length === 0) return null
  const r = items[index]

  return (
    <div
      className="testimonial"
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
      onFocusCapture={() => setPaused(true)}
      onBlurCapture={() => setPaused(false)}
      onTouchStart={() => setPaused(true)}
    >
      <article className={`testimonial-card dir-${dir}`} key={r.id}>
        <div className="testimonial-photo">
          <Image
            src={`/images/reference/${r.picture}`}
            alt={`${r.name} esküvője`}
            width={r.w}
            height={r.h}
            sizes="(max-width: 860px) 260px, 380px"
            priority={index === 0}
          />
        </div>

        <div className="testimonial-body">
          <span className="testimonial-quote" aria-hidden="true">
            &ldquo;
          </span>
          <p className="testimonial-text">{r.content?.trim() || r.short_message}</p>
          <h3 className="testimonial-name">{r.name}</h3>
          <Link href={`/referenciak/${r.id}`} className="testimonial-link">
            Teljes vélemény →
          </Link>
        </div>
      </article>

      <div className="testimonial-nav">
        <button type="button" onClick={() => go(-1)} aria-label="Előző vélemény">
          <IconArrowBack />
        </button>
        <span className="testimonial-count" aria-live="polite">
          <b>{index + 1}</b> / {items.length}
        </span>
        <button type="button" onClick={() => go(1)} aria-label="Következő vélemény">
          <IconArrowForward />
        </button>
      </div>

      {items.length > 1 && (
        <div className="testimonial-rail" ref={railRef}>
          {items.map((it, i) => (
            <button
              key={it.id}
              type="button"
              className={`testimonial-avatar${i === index ? ' is-active' : ''}`}
              onClick={() => {
                setDir(i > index ? 'next' : 'prev')
                setIndex(i)
              }}
              aria-label={`${it.name} véleménye`}
              aria-current={i === index}
            >
              <Image src={`/images/reference/${it.picture}`} alt="" width={52} height={52} sizes="52px" />
            </button>
          ))}
        </div>
      )}
    </div>
  )
}