'use client';

import { useEffect, useRef, useState } from 'react';
import Image from 'next/image';
import Link from './site-link';
import { featuredBrands } from '../lib/featured-brands';

export function BrandCarousel() {
  const viewport = useRef<HTMLDivElement>(null);
  const section = useRef<HTMLElement>(null);
  const [paused, setPaused] = useState(false);
  const [reduced, setReduced] = useState(false);

  useEffect(() => {
    const area = viewport.current;
    const region = section.current;
    if (!area || !region) return;
    const media = window.matchMedia('(prefers-reduced-motion: reduce)');
    let reduce = media.matches;
    let visible = false;
    let hovered = false;
    let focused = false;
    let frame = 0;
    let previous = 0;
    let position = area.scrollLeft;
    const preference = () => { reduce = media.matches; setReduced(reduce); };
    preference();
    const enter = () => { hovered = true; };
    const leave = () => { hovered = false; };
    const focus = () => { focused = true; };
    const blur = (event: FocusEvent) => { focused = region.contains(event.relatedTarget as Node); };
    const observer = new IntersectionObserver(([entry]) => { visible = entry.isIntersecting; });
    observer.observe(region);
    area.addEventListener('mouseenter', enter);
    area.addEventListener('mouseleave', leave);
    region.addEventListener('focusin', focus);
    region.addEventListener('focusout', blur);
    media.addEventListener('change', preference);
    const tick = (time: number) => {
      const delta = previous ? Math.min(time - previous, 50) : 0;
      previous = time;
      if (!paused && !reduce && visible && !hovered && !focused && !document.hidden) {
        const cycle = area.querySelector<HTMLElement>('.pb-group')?.offsetWidth || 0;
        position += delta * .048;
        if (cycle && position >= cycle) position -= cycle;
        area.scrollLeft = position;
      } else position = area.scrollLeft;
      frame = requestAnimationFrame(tick);
    };
    frame = requestAnimationFrame(tick);
    return () => {
      cancelAnimationFrame(frame); observer.disconnect();
      media.removeEventListener('change', preference);
      area.removeEventListener('mouseenter', enter); area.removeEventListener('mouseleave', leave);
      region.removeEventListener('focusin', focus); region.removeEventListener('focusout', blur);
    };
  }, [paused]);

  function move(direction: number) {
    setPaused(true);
    const area = viewport.current;
    if (!area) return;
    const end = area.scrollWidth - area.clientWidth;
    const next = area.scrollLeft + direction * area.clientWidth * .75;
    area.scrollTo({left:next < 0 ? end : next > end ? 0 : next, behavior:reduced ? 'instant' : 'smooth'});
  }

  return <section className="pb-brands" ref={section} aria-labelledby="brands-title" aria-roledescription="carrossel">
    <div className="shell">
      <div className="pb-heading"><div><p className="ph-kicker"><span /> GRANDES MARCAS. NOVAS POSSIBILIDADES.</p><h2 id="brands-title">Quem entende de elétrica reconhece.</h2></div><div className="pb-controls"><button type="button" data-track-id="marcas_anterior" onClick={()=>move(-1)} aria-label="Marcas anteriores" aria-controls="brand-viewport">←</button><button type="button" data-track-id="marcas_reproducao" onClick={()=>setPaused(value=>!value)} disabled={reduced} aria-controls="brand-viewport">{reduced ? 'Sem animação' : paused ? 'Reproduzir' : 'Pausar'}</button><button type="button" data-track-id="marcas_proxima" onClick={()=>move(1)} aria-label="Próximas marcas" aria-controls="brand-viewport">→</button></div></div>
      <div className="pb-viewport" id="brand-viewport" ref={viewport} onPointerDown={()=>setPaused(true)} onWheel={()=>setPaused(true)}>
        <div className="pb-track">{[false,true].map(duplicate=><ul className={`pb-group${duplicate ? ' pb-group--copy' : ''}`} key={String(duplicate)} aria-hidden={duplicate || undefined}>{featuredBrands.map(brand=><li key={brand.slug}><a href={`/marcas/${brand.slug}`} tabIndex={duplicate ? -1 : undefined} aria-label={`Ver produtos ${brand.name}`}><Image unoptimized src={`/images/marcas/${brand.slug}.png`} width={280} height={100} alt={brand.name} sizes="150px" loading="lazy" /><span>Ver produtos ↗</span></a></li>)}</ul>)}</div>
      </div>
      <div className="pb-bottom"><p>Explore as marcas. Consulte modelos e disponibilidade com a equipe.</p><Link href="/marcas">Conhecer as marcas ↗</Link></div>
    </div>
  </section>;
}