import {
  CATALOGUE_VIEW_MODES,
  DIFFICULTIES,
  MACHINE_CATEGORIES,
  RELEASE_PHASES,
  SORT_OPTIONS,
  type CatalogueViewMode,
  type Difficulty,
  type MachineCategory,
  type ReleasePhase,
  type SortKey
} from '@/types/catalogue';
import type { FacetCounts } from '@/utils/search';
import { Badge } from '@/components/ui/Badge';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { Panel } from '@/components/ui/Panel';
import { SegmentedControl } from '@/components/ui/SegmentedControl';
import { Select } from '@/components/ui/Select';
import { ToggleSwitch } from '@/components/ui/ToggleSwitch';
import { cn } from '@/utils/classNames';
import { difficultyToTone, phaseLabel } from '@/utils/format';

export interface CatalogueFiltersProps {
  readonly query: string;
  readonly onQueryChange: (query: string) => void;
  readonly selectedCategories: readonly MachineCategory[];
  readonly onToggleCategory: (category: MachineCategory) => void;
  readonly selectedDifficulties: readonly Difficulty[];
  readonly onToggleDifficulty: (difficulty: Difficulty) => void;
  readonly selectedPhases: readonly ReleasePhase[];
  readonly onTogglePhase: (phase: ReleasePhase) => void;
  readonly sortKey: SortKey;
  readonly onSortChange: (sortKey: SortKey) => void;
  readonly favouritesOnly: boolean;
  readonly onFavouritesOnlyChange: (enabled: boolean) => void;
  readonly viewMode: CatalogueViewMode;
  readonly onViewModeChange: (viewMode: CatalogueViewMode) => void;
  readonly counts: FacetCounts;
  readonly activeFilterCount: number;
  readonly onClearFilters: () => void;
}

function SearchIcon() {
  return (
    <svg className="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <circle cx="11" cy="11" r="7" />
      <path d="m20 20-3.5-3.5" strokeLinecap="round" />
    </svg>
  );
}

function FilterSection({
  children,
  title
}: {
  readonly children: React.ReactNode;
  readonly title: string;
}) {
  return (
    <section className="space-y-3" aria-labelledby={`${title.toLowerCase().replace(/[^a-z0-9]+/g, '-')}-filter`}>
      <h3
        id={`${title.toLowerCase().replace(/[^a-z0-9]+/g, '-')}-filter`}
        className="text-xs font-black uppercase tracking-[0.22em] text-subtle"
      >
        {title}
      </h3>
      {children}
    </section>
  );
}

function Chip({
  active,
  children,
  count,
  onClick
}: {
  readonly active: boolean;
  readonly children: React.ReactNode;
  readonly count?: number;
  readonly onClick: () => void;
}) {
  return (
    <button
      type="button"
      aria-pressed={active}
      onClick={onClick}
      className={cn(
        'interactive-ring inline-flex items-center gap-2 rounded-full border px-3 py-2 text-xs font-semibold transition duration-200',
        active
          ? 'border-accent/55 bg-accent/14 text-foreground shadow-glow'
          : 'border-border/70 bg-surface/55 text-muted hover:border-accent/40 hover:text-foreground',
      )}
    >
      <span>{children}</span>
      {typeof count === 'number' ? (
        <span className={cn('tabular-nums', active ? 'text-accent' : 'text-subtle')}>{count}</span>
      ) : null}
    </button>
  );
}

export function CatalogueFilters({
  activeFilterCount,
  counts,
  favouritesOnly,
  onClearFilters,
  onFavouritesOnlyChange,
  onQueryChange,
  onSortChange,
  onToggleCategory,
  onToggleDifficulty,
  onTogglePhase,
  onViewModeChange,
  query,
  selectedCategories,
  selectedDifficulties,
  selectedPhases,
  sortKey,
  viewMode
}: CatalogueFiltersProps) {
  const sortOptions = SORT_OPTIONS.map((option) => ({
    value: option.value,
    label: option.label
  }));

  return (
    <Panel className="space-y-6 lg:sticky lg:top-24" aria-label="Catalogue filters">
      <div className="flex items-start justify-between gap-3">
        <div>
          <p className="text-xs font-black uppercase tracking-[0.24em] text-accent">Catalogue controls</p>
          <h2 className="mt-2 text-lg font-black tracking-[-0.02em] text-foreground">
            Refine machines
          </h2>
        </div>

        <Badge tone={activeFilterCount > 0 ? 'accent' : 'neutral'}>
          {activeFilterCount} active
        </Badge>
      </div>

      <Input
        label="Search catalogue"
        type="search"
        value={query}
        onChange={(event) => onQueryChange(event.currentTarget.value)}
        placeholder="Search by mechanism, part, or fact…"
        leftIcon={<SearchIcon />}
        hint="Search scans names, tags, applications, engineering facts, and component descriptions."
      />

      <FilterSection title="Category">
        <div className="flex flex-wrap gap-2">
          {MACHINE_CATEGORIES.map((category) => (
            <Chip
              key={category}
              active={selectedCategories.includes(category)}
              count={counts.categories[category]}
              onClick={() => onToggleCategory(category)}
            >
              {category}
            </Chip>
          ))}
        </div>
      </FilterSection>

      <FilterSection title="Difficulty">
        <div className="flex flex-wrap gap-2">
          {DIFFICULTIES.map((difficulty) => (
            <Chip
              key={difficulty}
              active={selectedDifficulties.includes(difficulty)}
              count={counts.difficulties[difficulty]}
              onClick={() => onToggleDifficulty(difficulty)}
            >
              <span className="inline-flex items-center gap-2">
                <span>{difficulty}</span>
                <Badge tone={difficultyToTone(difficulty)} size="sm" className="hidden sm:inline-flex">
                  {difficulty.slice(0, 3)}
                </Badge>
              </span>
            </Chip>
          ))}
        </div>
      </FilterSection>

      <FilterSection title="Release phase">
        <div className="flex flex-wrap gap-2">
          {RELEASE_PHASES.map((phase) => (
            <Chip
              key={phase}
              active={selectedPhases.includes(phase)}
              count={counts.phases[phase]}
              onClick={() => onTogglePhase(phase)}
            >
              {phaseLabel(phase)}
            </Chip>
          ))}
        </div>
      </FilterSection>

      <div className="grid gap-4">
        <Select
          label="Sort machines"
          value={sortKey}
          onChange={(event) => onSortChange(event.currentTarget.value as SortKey)}
          options={sortOptions}
          hint={SORT_OPTIONS.find((option) => option.value === sortKey)?.description}
        />

        <ToggleSwitch
          checked={favouritesOnly}
          onChange={onFavouritesOnlyChange}
          label="Favourites only"
          description="Show bookmarked machines stored on this device."
        />
      </div>

      <div className="flex flex-wrap items-center justify-between gap-3 border-t border-border/65 pt-5">
        <SegmentedControl
          label="Catalogue card density"
          value={viewMode}
          onChange={onViewModeChange}
          options={CATALOGUE_VIEW_MODES.map((mode) => ({
            value: mode,
            label: mode === 'comfortable' ? 'Comfort' : 'Compact'
          }))}
        />

        <Button
          variant="ghost"
          size="sm"
          onClick={onClearFilters}
          disabled={activeFilterCount === 0 && sortKey === 'name'}
        >
          Reset
        </Button>
      </div>
    </Panel>
  );
}