nuzlocke-tracker/frontend/src/components/RulesConfiguration.tsx

import type { NuzlockeRules } from '../types/rules'
import { RULE_DEFINITIONS, DEFAULT_RULES } from '../types/rules'
import { RuleToggle } from './RuleToggle'

interface RulesConfigurationProps {
  rules: NuzlockeRules
  onChange: (rules: NuzlockeRules) => void
  onReset?: (() => void) | undefined
  hiddenRules?: Set<keyof NuzlockeRules> | undefined
}

export function RulesConfiguration({
  rules,
  onChange,
  onReset,
  hiddenRules,
}: RulesConfigurationProps) {
  const visibleRules = hiddenRules
    ? RULE_DEFINITIONS.filter((r) => !hiddenRules.has(r.key))
    : RULE_DEFINITIONS
  const coreRules = visibleRules.filter((r) => r.category === 'core')
  const difficultyRules = visibleRules.filter((r) => r.category === 'difficulty')
  const completionRules = visibleRules.filter((r) => r.category === 'completion')

  const handleRuleChange = (key: keyof NuzlockeRules, value: boolean) => {
    onChange({ ...rules, [key]: value })
  }

  const handleResetToDefault = () => {
    onChange(DEFAULT_RULES)
    onReset?.()
  }

  const enabledCount = visibleRules.filter((r) => rules[r.key]).length
  const totalCount = visibleRules.length

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
            Rules Configuration
          </h2>
          <p className="text-sm text-gray-500 dark:text-gray-400">
            {enabledCount} of {totalCount} rules enabled
          </p>
        </div>
        <button
          type="button"
          onClick={handleResetToDefault}
          className="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
        >
          Reset to Default
        </button>
      </div>

      <div className="bg-white dark:bg-gray-800 rounded-lg shadow">
        <div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
          <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">Core Rules</h3>
          <p className="text-sm text-gray-500 dark:text-gray-400">
            The fundamental rules of a Nuzlocke challenge
          </p>
        </div>
        <div className="px-4">
          {coreRules.map((rule) => (
            <RuleToggle
              key={rule.key}
              name={rule.name}
              description={rule.description}
              enabled={rules[rule.key]}
              onChange={(value) => handleRuleChange(rule.key, value)}
            />
          ))}
        </div>
      </div>

      <div className="bg-white dark:bg-gray-800 rounded-lg shadow">
        <div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
          <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">
            Difficulty Modifiers
          </h3>
          <p className="text-sm text-gray-500 dark:text-gray-400">
            Optional rules to increase the challenge
          </p>
        </div>
        <div className="px-4">
          {difficultyRules.map((rule) => (
            <RuleToggle
              key={rule.key}
              name={rule.name}
              description={rule.description}
              enabled={rules[rule.key]}
              onChange={(value) => handleRuleChange(rule.key, value)}
            />
          ))}
        </div>
      </div>

      {completionRules.length > 0 && (
        <div className="bg-white dark:bg-gray-800 rounded-lg shadow">
          <div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
            <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">Completion</h3>
            <p className="text-sm text-gray-500 dark:text-gray-400">
              When is the run considered complete
            </p>
          </div>
          <div className="px-4">
            {completionRules.map((rule) => (
              <RuleToggle
                key={rule.key}
                name={rule.name}
                description={rule.description}
                enabled={rules[rule.key]}
                onChange={(value) => handleRuleChange(rule.key, value)}
              />
            ))}
          </div>
        </div>
      )}
    </div>
  )
}