import { FolderPlus, Pencil, Trash2, ChevronRight } from 'lucide-react'
import { useLocale } from '@meshkee/dashboard-ui'
import type { Category } from '../types/category'
import { useT } from '../i18n/useT'
import { Tooltip } from './Tooltip'
import styles from './CategoryRow.module.css'

interface BlogCategoryRowProps {
  category: Category
  depth: number
  hasChildren: boolean
  expanded: boolean
  onToggle: () => void
  onAddSub: (id: string) => void
  onEdit: (id: string) => void
  onRemove: (id: string) => void
}

export function BlogCategoryRow({
  category,
  depth,
  hasChildren,
  expanded,
  onToggle,
  onAddSub,
  onEdit,
  onRemove,
}: BlogCategoryRowProps) {
  const t = useT()
  const { locale } = useLocale()
  const isFa = locale === 'fa'
  const primaryName = isFa ? category.nameFa || category.nameEn : category.nameEn
  const secondaryName = isFa
    ? category.nameFa
      ? category.nameEn
      : ''
    : category.nameFa

  return (
    <div className={styles.row} style={{ marginLeft: depth * 8 }}>
      <div
        className={`${styles.info} ${hasChildren ? styles.clickable : ''}`}
        onClick={hasChildren ? onToggle : undefined}
        onKeyDown={
          hasChildren
            ? (e) => {
                if (e.key === 'Enter' || e.key === ' ') {
                  e.preventDefault()
                  onToggle()
                }
              }
            : undefined
        }
        role={hasChildren ? 'button' : undefined}
        tabIndex={hasChildren ? 0 : undefined}
        aria-expanded={hasChildren ? expanded : undefined}
      >
        <div className={styles.textBlock}>
          <div className={styles.names}>
            <span className={isFa ? styles.nameFa : styles.nameEn}>{primaryName}</span>
            {secondaryName ? (
              <>
                <span className={styles.separator}>·</span>
                <span className={isFa ? styles.nameEn : styles.nameFa}>{secondaryName}</span>
              </>
            ) : null}
            {hasChildren && (
              <span className={`${styles.chevron} ${expanded ? styles.chevronOpen : ''}`}>
                <ChevronRight size={18} />
              </span>
            )}
          </div>
          {category.description && <p className={styles.description}>{category.description}</p>}
        </div>
      </div>

      <div className={styles.controls}>
        <Tooltip label={t('categories.tooltip.addSub')}>
          <button
            type="button"
            className={styles.controlBtn}
            onClick={() => onAddSub(category.id)}
            aria-label={t('categories.tooltip.addSub')}
          >
            <FolderPlus size={17} />
          </button>
        </Tooltip>
        <Tooltip label={t('categories.tooltip.edit')}>
          <button
            type="button"
            className={styles.controlBtn}
            onClick={() => onEdit(category.id)}
            aria-label={t('categories.tooltip.edit')}
          >
            <Pencil size={17} />
          </button>
        </Tooltip>
        <Tooltip label={t('categories.tooltip.remove')}>
          <button
            type="button"
            className={`${styles.controlBtn} ${styles.danger}`}
            onClick={() => onRemove(category.id)}
            aria-label={t('categories.tooltip.remove')}
          >
            <Trash2 size={17} />
          </button>
        </Tooltip>
      </div>
    </div>
  )
}