/**
 * Toolbar Component
 * 
 * View mode toggle + Expand/Collapse + Checked Search + Column Config controls
 */

import React from 'react';
import { useTranslation } from 'react-i18next';
import { Settings2 } from 'lucide-react';

interface ToolbarProps {
  viewMode: 'flat' | 'grouped';
  onViewModeChange: (mode: 'flat' | 'grouped') => void;
  expandedCount: number;
  totalParents: number;
  onExpandAll: () => void;
  onCollapseAll: () => void;
  checkedSearch: boolean;
  onCheckedSearchChange: (checked: boolean) => void;
  hasAttributeFilter: boolean; // 🔥 NEW: Only show checkbox if attribute filter active
  onColumnConfig: () => void;
}

export default function Toolbar({
  viewMode,
  onViewModeChange,
  expandedCount,
  totalParents,
  onExpandAll,
  onCollapseAll,
  checkedSearch,
  onCheckedSearchChange,
  hasAttributeFilter,
  onColumnConfig,
}: ToolbarProps) {
  const { t } = useTranslation();

  return (
    <div className="px-3 py-1.5 bg-gray-50 border-b border-gray-200">
      <div className="flex items-center gap-3">
        {/* View Mode Toggle */}
        <div className="flex items-center gap-1 bg-white rounded-lg p-0.5 shadow-sm border border-gray-200">
          <button
            onClick={() => onViewModeChange('flat')}
            className={`px-3 py-1.5 text-xs font-semibold rounded-md transition ${
              viewMode === 'flat' 
                ? 'bg-indigo-100 text-indigo-700 shadow-sm' 
                : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50'
            }`}
            title={t('filter.flat_view')}
          >
            📋 {t('filter.flat')}
          </button>
          <button
            onClick={() => onViewModeChange('grouped')}
            className={`px-3 py-1.5 text-xs font-semibold rounded-md transition ${
              viewMode === 'grouped' 
                ? 'bg-indigo-100 text-indigo-700 shadow-sm' 
                : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50'
            }`}
            title={t('filter.grouped_view')}
          >
            📁 {t('filter.grouped')}
          </button>
        </div>
        
        {/* Expand/Collapse All (only in grouped mode) */}
        {viewMode === 'grouped' && (
          <>
            <div className="h-5 w-px bg-gray-300"></div>
            
            <div className="flex items-center gap-2">
              <button
                onClick={() => {
                  if (expandedCount === totalParents) {
                    onCollapseAll();
                  } else {
                    onExpandAll();
                  }
                }}
                className={`px-3 py-1.5 text-xs font-semibold rounded-lg transition border ${
                  expandedCount === totalParents
                    ? 'text-gray-600 hover:text-gray-900 bg-white hover:bg-gray-100 border-gray-300'
                    : 'text-blue-600 hover:text-blue-800 bg-blue-50 hover:bg-blue-100 border-blue-200'
                }`}
                title={expandedCount === totalParents ? t('filter.collapse_all') : t('filter.expand_all')}
                disabled={totalParents === 0}
              >
                {expandedCount === totalParents ? '▲' : '▼'} {expandedCount === totalParents ? t('filter.collapse_all') : t('filter.expand_all')}
              </button>
            </div>
            
            {/* Checked Search - Only show if attribute filter is active */}
            {hasAttributeFilter && (
              <>
                <div className="h-5 w-px bg-gray-300"></div>
                
                <label className="flex items-center gap-2 cursor-pointer px-3 py-1.5 bg-green-50 hover:bg-green-100 rounded-lg transition border border-green-200">
                  <input
                    type="checkbox"
                    checked={checkedSearch}
                    onChange={(e) => onCheckedSearchChange(e.target.checked)}
                    className="w-4 h-4 text-green-600 rounded focus:ring-2 focus:ring-green-300"
                  />
                  <span className="text-xs font-semibold text-green-700">☑ {t('filter.checked_search')}</span>
                </label>
              </>
            )}
          </>
        )}
        
        {/* Column Config button - MINDIG látható! */}
        <div className="h-5 w-px bg-gray-300"></div>
        
        <button
          onClick={onColumnConfig}
          className="flex items-center gap-2 px-3 py-1.5 text-xs font-semibold text-gray-700 hover:text-gray-900 bg-white hover:bg-gray-100 rounded-lg transition border border-gray-300"
          title={t('toolbar.column_settings')}
        >
          <Settings2 className="w-4 h-4" />
          {t('toolbar.columns')}
        </button>
        
        {/* Info badge */}
        {viewMode === 'grouped' && (
          <div className="ml-auto text-xs text-gray-500 font-medium">
            {expandedCount} / {totalParents} {t('filter.expanded')}
          </div>
        )}
      </div>
    </div>
  );
}