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
  hiddenRules?: Set<keyof NuzlockeRules>
}

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 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>
    </div>
  )
}