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 playstyleRules = visibleRules.filter((r) => r.category === 'playstyle')

  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-text-primary">Rules Configuration</h2>
          <p className="text-sm text-text-tertiary">
            {enabledCount} of {totalCount} rules enabled
          </p>
        </div>
        <button
          type="button"
          onClick={handleResetToDefault}
          className="text-sm text-text-link hover:text-accent-300"
        >
          Reset to Default
        </button>
      </div>

      <div className="bg-surface-1 rounded-lg shadow">
        <div className="px-4 py-3 border-b border-border-default">
          <h3 className="text-lg font-medium text-text-primary">Core Rules</h3>
          <p className="text-sm text-text-tertiary">
            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-surface-1 rounded-lg shadow">
        <div className="px-4 py-3 border-b border-border-default">
          <h3 className="text-lg font-medium text-text-primary">Playstyle</h3>
          <p className="text-sm text-text-tertiary">
            Describe how you're playing — doesn't affect tracker behavior
          </p>
        </div>
        <div className="px-4">
          {playstyleRules.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>
  )
}