import type { StyleCategory } from '../utils/style'
import { STYLE_CATEGORIES, CUSTOM_PREFIX } from '../utils/style'
import styles from './StyleSelector.module.css'

interface StyleSelectorProps {
  value: Record<string, string>
  onChange: (key: string, value: string) => void
  compact?: boolean
  categories?: StyleCategory[]
  customTags?: string[]
}

const CUSTOM_TAG_CATEGORY: StyleCategory = {
  key: '', // unused, pills use custom: prefix directly
  label: '自定义标签',
  options: [],
}

export default function StyleSelector({
  value,
  onChange,
  compact,
  categories,
  customTags,
}: StyleSelectorProps) {
  const cats = categories ?? STYLE_CATEGORIES
  return (
    <div className={`${styles.container} ${compact ? styles.compact : ''}`}>
      {cats.map(cat => (
        <div key={cat.key} className={styles.category}>
          <span className={styles.label}>{cat.label}</span>
          <div className={styles.options}>
            {cat.options.map(opt => (
              <button
                key={opt.value}
                type="button"
                className={`${styles.pill} ${
                  value[cat.key] === opt.value ? styles.pillActive : ''
                }`}
                onClick={() => onChange(cat.key, opt.value)}
              >
                {opt.label}
              </button>
            ))}
          </div>
        </div>
      ))}
      {customTags && customTags.length > 0 && (
        <div key="_custom" className={styles.category}>
          <span className={styles.label}>{CUSTOM_TAG_CATEGORY.label}</span>
          <div className={styles.options}>
            {customTags.map(tag => {
              const key = `${CUSTOM_PREFIX}${tag}`
              const isActive = value[key] === 'true'
              return (
                <button
                  key={tag}
                  type="button"
                  className={`${styles.pill} ${isActive ? styles.pillActive : ''}`}
                  onClick={() => onChange(key, isActive ? 'false' : 'true')}
                >
                  {tag}
                </button>
              )
            })}
          </div>
        </div>
      )}
    </div>
  )
}