import { ChevronLeft, ChevronRight, Pencil, Plus, Trash2 } from 'lucide-react'
import { useRef, type ReactNode } from 'react'
import controlStyles from './CategoryRow.module.css'
import { Tooltip } from './Tooltip'
import styles from './WebsiteGroupCarousel.module.css'

interface WebsiteGroupCarouselProps<T> {
  title: string
  items: T[]
  itemKey: (item: T) => string
  renderItem: (item: T) => ReactNode
  onAddItems: () => void
  onEditGroup: () => void
  onDeleteGroup: () => void
  addTooltip: string
  editTooltip?: string
  deleteTooltip?: string
}

export function WebsiteGroupCarousel<T>({
  title,
  items,
  itemKey,
  renderItem,
  onAddItems,
  onEditGroup,
  onDeleteGroup,
  addTooltip,
  editTooltip = 'Edit group',
  deleteTooltip = 'Delete group',
}: WebsiteGroupCarouselProps<T>) {
  const trackRef = useRef<HTMLDivElement>(null)

  function scrollBy(direction: -1 | 1) {
    const track = trackRef.current
    if (!track) return
    const amount = Math.max(track.clientWidth * 0.75, 240)
    track.scrollBy({ left: direction * amount, behavior: 'smooth' })
  }

  return (
    <section className={styles.section}>
      <div className={styles.header}>
        <h3 className={styles.title}>{title}</h3>
        <div className={styles.headerActions}>
          <Tooltip label={editTooltip}>
            <button
              type="button"
              className={controlStyles.controlBtn}
              onClick={onEditGroup}
              aria-label={editTooltip}
            >
              <Pencil size={16} />
            </button>
          </Tooltip>
          <Tooltip label={deleteTooltip}>
            <button
              type="button"
              className={`${controlStyles.controlBtn} ${controlStyles.danger}`}
              onClick={onDeleteGroup}
              aria-label={deleteTooltip}
            >
              <Trash2 size={16} />
            </button>
          </Tooltip>
          <Tooltip label="Scroll left">
            <button
              type="button"
              className={styles.navBtn}
              onClick={() => scrollBy(-1)}
              aria-label="Scroll left"
            >
              <ChevronLeft size={18} />
            </button>
          </Tooltip>
          <Tooltip label="Scroll right">
            <button
              type="button"
              className={styles.navBtn}
              onClick={() => scrollBy(1)}
              aria-label="Scroll right"
            >
              <ChevronRight size={18} />
            </button>
          </Tooltip>
        </div>
      </div>

      <div className={styles.trackWrap}>
        <div className={styles.track} ref={trackRef}>
          <div className={styles.cardSlot}>
            <Tooltip label={addTooltip}>
              <button
                type="button"
                className={styles.addCard}
                onClick={onAddItems}
                aria-label={addTooltip}
              >
                <span className={styles.addIcon}>
                  <Plus size={28} />
                </span>
              </button>
            </Tooltip>
          </div>

          {items.map((item) => (
            <div key={itemKey(item)} className={styles.cardSlot}>
              {renderItem(item)}
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}
