'use client';

/**
 * Filter Placeholder Component
 *
 * Checkbox/radio button group for sidebar filters.
 * Supports both single-select (radio) and multi-select (checkbox) modes.
 * Uses Shadcn UI components with custom slate styling.
 *
 * Features:
 * - Radio buttons for single selection (Shadcn RadioGroup)
 * - Checkboxes for multiple selection (Shadcn Checkbox)
 * - Option counts (e.g., "All (127)")
 * - Accessible keyboard navigation
 * - Focus indicators
 */

import { useState } from 'react';
import { Checkbox } from '@/components/ui/checkbox';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { Label } from '@/components/ui/label';

type FilterOption = {
  id: string;
  label: string;
  count?: number;
};

type FilterPlaceholderProps = {
  options: FilterOption[];
  multiSelect?: boolean;
  groupId: string;
};

export const FilterPlaceholder = ({
  options,
  multiSelect = false,
  groupId,
}: FilterPlaceholderProps) => {
  const [selected, setSelected] = useState<string[]>(multiSelect ? [] : [options[0]?.id || '']);

  const handleCheckboxChange = (optionId: string, checked: boolean) => {
    setSelected((prev) =>
      checked ? [...prev, optionId] : prev.filter((id) => id !== optionId)
    );
  };

  const handleRadioChange = (value: string) => {
    setSelected([value]);
  };

  const isSelected = (optionId: string) => selected.includes(optionId);

  if (multiSelect) {
    // Checkbox mode for multi-select
    return (
      <div className="mt-2 space-y-1" role="group" aria-label={`${groupId} filters`}>
        {options.map((option) => {
          const checked = isSelected(option.id);
          const inputId = `${groupId}-${option.id}`;

          return (
            <Label
              key={option.id}
              htmlFor={inputId}
              className="flex items-center gap-2 px-2 py-1.5 rounded-md text-sm cursor-pointer transition-colors hover:bg-white/5 group font-normal"
            >
              <Checkbox
                id={inputId}
                checked={checked}
                onCheckedChange={(checked) => handleCheckboxChange(option.id, checked === true)}
                className="border-slate-600 bg-slate-800 data-[state=checked]:bg-purple-600 data-[state=checked]:border-purple-600 data-[state=checked]:text-white focus-visible:ring-purple-500 focus-visible:ring-offset-0"
              />
              <span className={`flex-1 ${checked ? 'text-white font-medium' : 'text-gray-400 group-hover:text-gray-300'}`}>
                {option.label}
              </span>
              {option.count !== undefined && (
                <span className="text-xs text-gray-600">
                  {option.count}
                </span>
              )}
            </Label>
          );
        })}
      </div>
    );
  }

  // Radio mode for single-select
  return (
    <RadioGroup
      value={selected[0]}
      onValueChange={handleRadioChange}
      className="mt-2 space-y-1"
      aria-label={`${groupId} filters`}
    >
      {options.map((option) => {
        const checked = isSelected(option.id);
        const inputId = `${groupId}-${option.id}`;

        return (
          <Label
            key={option.id}
            htmlFor={inputId}
            className="flex items-center gap-2 px-2 py-1.5 rounded-md text-sm cursor-pointer transition-colors hover:bg-white/5 group font-normal"
          >
            <RadioGroupItem
              id={inputId}
              value={option.id}
              className="border-slate-600 bg-slate-800 text-purple-600 data-[state=checked]:border-purple-600 focus-visible:ring-purple-500 focus-visible:ring-offset-0"
            />
            <span className={`flex-1 ${checked ? 'text-white font-medium' : 'text-gray-400 group-hover:text-gray-300'}`}>
              {option.label}
            </span>
            {option.count !== undefined && (
              <span className="text-xs text-gray-600">
                {option.count}
              </span>
            )}
          </Label>
        );
      })}
    </RadioGroup>
  );
};
