import { FolderPlus, Layers, ListTree, Trash2, ChevronRight, ClipboardList } from 'lucide-react'
import type { Category } from '../types/category'
import { Tooltip } from './Tooltip'
import styles from './CategoryRow.module.css'

interface CategoryRowProps {
  category: Category
  depth: number
  hasChildren: boolean
  expanded: boolean
  variationCount: number
  technicalFieldCount: number
  onToggle: () => void
  onAddSub: (id: string) => void
  onVariations: (id: string) => void
  onTechnicalForm: (id: string) => void
  onOptions: (id: string) => void
  onRemove: (id: string) => void
}

export function CategoryRow({
  category,
  depth,
  hasChildren,
  expanded,
  variationCount,
  technicalFieldCount,
  onToggle,
  onAddSub,
  onVariations,
  onTechnicalForm,
  onOptions,
  onRemove,
}: CategoryRowProps) {
  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={styles.nameEn}>{category.nameEn}</span>
            <span className={styles.separator}>·</span>
            <span className={styles.nameFa}>{category.nameFa}</span>
            {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="Add sub category">
          <button
            className={styles.controlBtn}
            onClick={() => onAddSub(category.id)}
            aria-label="Add sub category"
          >
            <FolderPlus size={17} />
          </button>
        </Tooltip>
        <Tooltip label="Manage variations">
          <button
            className={`${styles.controlBtn} ${styles.iconBtn}`}
            onClick={() => onVariations(category.id)}
            aria-label={`Variations (${variationCount})`}
          >
            <Layers size={17} />
            {variationCount > 0 && (
              <span className={styles.variationBadge}>{variationCount}</span>
            )}
          </button>
        </Tooltip>
        <Tooltip label="Technical data form">
          <button
            className={`${styles.controlBtn} ${styles.iconBtn}`}
            onClick={() => onTechnicalForm(category.id)}
            aria-label={`Technical data form (${technicalFieldCount})`}
          >
            <ClipboardList size={17} />
            {technicalFieldCount > 0 && (
              <span className={styles.technicalBadge}>{technicalFieldCount}</span>
            )}
          </button>
        </Tooltip>
        <Tooltip label="Category options">
          <button
            className={styles.controlBtn}
            onClick={() => onOptions(category.id)}
            aria-label="Options"
          >
            <ListTree size={17} />
          </button>
        </Tooltip>
        <Tooltip label="Remove category">
          <button
            className={`${styles.controlBtn} ${styles.danger}`}
            onClick={() => onRemove(category.id)}
            aria-label="Remove"
          >
            <Trash2 size={17} />
          </button>
        </Tooltip>
      </div>
    </div>
  )
}
