import { ChevronLeft, ChevronRight, Pencil, Plus, Trash2 } from 'lucide-react'
import { useRef } from 'react'
import type { StoreSpecial } from '../types/storeSpecial'
import { specialItemsToListings } from '../utils/storeSpecialListings'
import type { StoreProductListing } from '../utils/storeProductGroups'
import controlStyles from './CategoryRow.module.css'
import { StoreItemCard } from './StoreItemCard'
import { Tooltip } from './Tooltip'
import styles from './StoreSpecialCarousel.module.css'

interface StoreSpecialCarouselProps {
  special: StoreSpecial
  onAddItems: (special: StoreSpecial) => void
  onEditSpecial: (special: StoreSpecial) => void
  onDeleteSpecial: (special: StoreSpecial) => void
  onOpenListing: (listing: StoreProductListing) => void
  onEditListing: (listing: StoreProductListing) => void
  onDiscountListing: (listing: StoreProductListing) => void
  onFestivalListing: (listing: StoreProductListing) => void
  onRemoveListing: (special: StoreSpecial, listing: StoreProductListing) => void
  onAddToCart: (listing: StoreProductListing) => void
}

export function StoreSpecialCarousel({
  special,
  onAddItems,
  onEditSpecial,
  onDeleteSpecial,
  onOpenListing,
  onEditListing,
  onDiscountListing,
  onFestivalListing,
  onRemoveListing,
  onAddToCart,
}: StoreSpecialCarouselProps) {
  const trackRef = useRef<HTMLDivElement>(null)
  const listings = specialItemsToListings(special.items)

  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}>{special.title}</h3>
        <div className={styles.headerActions}>
          <Tooltip label="Edit category">
            <button
              type="button"
              className={controlStyles.controlBtn}
              onClick={() => onEditSpecial(special)}
              aria-label="Edit category"
            >
              <Pencil size={16} />
            </button>
          </Tooltip>
          <Tooltip label="Delete category">
            <button
              type="button"
              className={`${controlStyles.controlBtn} ${controlStyles.danger}`}
              onClick={() => onDeleteSpecial(special)}
              aria-label="Delete category"
            >
              <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={`Add store items to ${special.title}`}>
              <button
                type="button"
                className={styles.addCard}
                onClick={() => onAddItems(special)}
                aria-label={`Add store items to ${special.title}`}
              >
                <span className={styles.addIcon}>
                  <Plus size={28} />
                </span>
              </button>
            </Tooltip>
          </div>

          {listings.map((listing) => (
            <div key={listing.storeItemId} className={styles.cardSlot}>
              <StoreItemCard
                listing={listing}
                onOpen={onOpenListing}
                onEdit={onEditListing}
                onDiscount={onDiscountListing}
                onFestival={onFestivalListing}
                onRemove={() => onRemoveListing(special, listing)}
                onAddToCart={onAddToCart}
                removeTooltip="Remove from special"
              />
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}
