import { ChevronLeft, ChevronRight, Pencil, Plus, Trash2 } from 'lucide-react'
import { useRef, type ReactNode } from 'react'
import { useLocale } from '@meshkee/dashboard-ui'
import { useT } from '../i18n/useT'
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,
  deleteTooltip,
}: WebsiteGroupCarouselProps<T>) {
  const t = useT()
  const { locale } = useLocale()
  const isFa = locale === 'fa'
  const trackRef = useRef<HTMLDivElement>(null)
  const editLabel = editTooltip ?? t('website.editGroup')
  const deleteLabel = deleteTooltip ?? t('website.deleteGroup')

  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' })
  }

  const addCard = (
    <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>
  )

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

  return (
    <section className={styles.section}>
      <div className={styles.header}>
        <h3 className={styles.title}>{title}</h3>
        <div className={styles.headerActions}>
          <Tooltip label={editLabel}>
            <button
              type="button"
              className={controlStyles.controlBtn}
              onClick={onEditGroup}
              aria-label={editLabel}
            >
              <Pencil size={16} />
            </button>
          </Tooltip>
          <Tooltip label={deleteLabel}>
            <button
              type="button"
              className={`${controlStyles.controlBtn} ${controlStyles.danger}`}
              onClick={onDeleteGroup}
              aria-label={deleteLabel}
            >
              <Trash2 size={16} />
            </button>
          </Tooltip>
          <div className={styles.navPair} dir="ltr">
            <Tooltip label={t('website.scrollLeft')}>
              <button
                type="button"
                className={styles.navBtn}
                onClick={() => scrollBy(-1)}
                aria-label={t('website.scrollLeft')}
              >
                <ChevronLeft size={18} />
              </button>
            </Tooltip>
            <Tooltip label={t('website.scrollRight')}>
              <button
                type="button"
                className={styles.navBtn}
                onClick={() => scrollBy(1)}
                aria-label={t('website.scrollRight')}
              >
                <ChevronRight size={18} />
              </button>
            </Tooltip>
          </div>
        </div>
      </div>

      <div className={styles.trackWrap}>
        <div className={styles.track} ref={trackRef} dir={isFa ? 'rtl' : 'ltr'}>
          {isFa ? (
            <>
              {addCard}
              {itemCards}
            </>
          ) : (
            <>
              {itemCards}
              {addCard}
            </>
          )}
        </div>
      </div>
    </section>
  )
}
