"use client";

import { useEffect, useRef, useState } from "react";
import Image from "next/image";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { useSiteSettings } from '@/components/layout/site-settings';
import type { PartnerLogo } from "@/data/partners";

export function PartnerLogosSection({ partners: sourcePartners, demo = false }: { partners: PartnerLogo[]; demo?: boolean }) {
  const saved = useSiteSettings().partners;
  const partners = saved ? (saved.visible ? saved.rows : []) : sourcePartners;
  const track = useRef<HTMLUListElement>(null);
  const [edges, setEdges] = useState({ previous: false, next: false });
  function updateEdges() {
    const element = track.current;
    if (element) setEdges({ previous: element.scrollLeft > 2, next: element.scrollLeft + element.clientWidth < element.scrollWidth - 2 });
  }
  useEffect(() => {
    const element = track.current;
    if (!element) return;
    updateEdges();
    const observer = new ResizeObserver(updateEdges);
    observer.observe(element);
    return () => observer.disconnect();
  }, [partners]);
  function move(direction: number) {
    const element = track.current;
    if (!element) return;
    const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    element.scrollBy({ left: direction * element.clientWidth, behavior: reducedMotion ? "instant" : "smooth" });
  }
  if (!partners.length) return null;
  return <section className="work-with-us" aria-labelledby="partners-heading"><h2 id="partners-heading">{saved?.heading ?? 'Work with us today.'}</h2><p>{saved ? saved.description : 'The people and brands we work with.'}</p>{demo && !saved && <p className="partner-demo-note">Sample logos for preview</p>}<div className="partner-logo-carousel"><button type="button" className="partner-carousel-arrow" onClick={() => move(-1)} disabled={!edges.previous} aria-label="Show previous partner logos" aria-controls="partner-logo-track"><ChevronLeft size={22} /></button><ul ref={track} id="partner-logo-track" className="partner-logo-track" aria-label="Partner logos" aria-describedby="partner-browse-hint" tabIndex={0} onScroll={updateEdges} onKeyDown={(event) => { if (event.key === "ArrowLeft" || event.key === "ArrowRight") { event.preventDefault(); move(event.key === "ArrowRight" ? 1 : -1); } }}>
      {partners.map((partner) => <li key={partner.id} className="partner-logo-item"><Image src={partner.image} alt={partner.name} width={220} height={96} className="partner-logo-image" unoptimized /></li>)}
    </ul><button type="button" className="partner-carousel-arrow" onClick={() => move(1)} disabled={!edges.next} aria-label="Show next partner logos" aria-controls="partner-logo-track"><ChevronRight size={22} /></button></div><p id="partner-browse-hint" className="sr-only">Use the arrow buttons, keyboard arrow keys or swipe to browse more partner logos.</p></section>;
}