'use client';

const KIND_TABS = [
  { id: 'all', label: 'All' },
  { id: 'connection', label: 'Connections' },
  { id: 'tool', label: 'Tools' },
  { id: 'skill', label: 'Skills' },
  { id: 'bundle', label: 'Bundles' },
  { id: 'agent', label: 'Agents' },
  { id: 'workflow', label: 'Workflows' },
];

const CATEGORY_LABEL = {
  github: 'GitHub',
  supabase: 'Supabase',
  vercel: 'Vercel',
  email: 'Email',
  web: 'Web',
  local_machine: 'Local machine',
  travel: 'Travel',
  calendar: 'Calendar',
  design: 'Design',
  review: 'Review',
  security: 'Security',
  engineering: 'Engineering',
  engine: 'Engines',
  integration: 'Integrations',
  channel: 'Channels',
  procurement: 'Procurement',
  legal: 'Legal',
  support: 'Support',
  workflow: 'Workflow',
};

function labelFor(category) {
  if (CATEGORY_LABEL[category]) return CATEGORY_LABEL[category];
  const raw = String(category).replaceAll('_', ' ');
  return raw.charAt(0).toUpperCase() + raw.slice(1);
}

/**
 * Kind tabs + category chip row.
 *
 * @param {{
 *   activeKind: string,
 *   onKindChange: (kind: string) => void,
 *   counts: Record<string, number>,
 *   categories: string[],
 *   categoryCounts?: Record<string, number>,
 *   scopeCount?: number,
 *   activeCategory: string | null,
 *   onCategoryChange: (category: string | null) => void,
 * }} props
 */
export default function MarketplaceFilters({
  activeKind,
  onKindChange,
  counts,
  categories,
  categoryCounts = {},
  scopeCount,
  activeCategory,
  onCategoryChange,
}) {
  return (
    <>
      <div className="mkt-tabs" role="tablist" aria-label="Marketplace kind">
        {KIND_TABS.map(tab => {
          const count = tab.id === 'all' ? counts.all : (counts[tab.id] || 0);
          const on = tab.id === activeKind;
          return (
            <button
              key={tab.id}
              type="button"
              role="tab"
              aria-selected={on}
              className={`mkt-tab ${on ? 'on' : ''}`}
              onClick={() => onKindChange(tab.id)}
            >
              {tab.label}
              <span className="mkt-tab-count">{count}</span>
            </button>
          );
        })}
      </div>
      {categories.length ? (
        <div className="mkt-filters" role="toolbar" aria-label="Category filters">
          <button
            type="button"
            className={`mkt-chip ${!activeCategory ? 'on' : ''}`}
            onClick={() => onCategoryChange(null)}
          >
            All categories
            {typeof scopeCount === 'number' ? (
              <span className="mkt-chip-count">{scopeCount}</span>
            ) : null}
          </button>
          {categories.map(category => (
            <button
              key={category}
              type="button"
              className={`mkt-chip ${activeCategory === category ? 'on' : ''}`}
              onClick={() =>
                onCategoryChange(activeCategory === category ? null : category)
              }
            >
              {labelFor(category)}
              {categoryCounts[category] ? (
                <span className="mkt-chip-count">{categoryCounts[category]}</span>
              ) : null}
            </button>
          ))}
        </div>
      ) : null}
    </>
  );
}
