import { h } from 'preact';
import { useState } from 'preact/hooks';
import styles from '../NewGame.module.css';
import type { BreakRule } from '@lib/domain/types';

interface BreakRuleStepProps {
  onNext: (rule: BreakRule) => void;
  onCancel: () => void;
  initialValue?: BreakRule;
}

export const BreakRuleStep = ({ onNext, onCancel, initialValue = 'winnerbreak' }: BreakRuleStepProps) => {
  const [rule, setRule] = useState<BreakRule>(initialValue ?? 'winnerbreak');

  return (
    <form className={styles['new-game-form']} aria-label="Break-Regel wählen">
      <div className={styles['screen-title']}>Break-Regel wählen</div>
      <div className={styles['progress-indicator']} style={{ marginBottom: 24 }}>
        <span className={styles['progress-dot']} />
        <span className={styles['progress-dot']} />
        <span className={styles['progress-dot']} />
        <span className={styles['progress-dot']} />
        <span className={styles['progress-dot']} />
        <span className={styles['progress-dot'] + ' ' + styles['active']} />
        <span className={styles['progress-dot']} />
      </div>
      <div style={{ display: 'flex', gap: 12, marginTop: 12 }}>
        {[
          { key: 'winnerbreak', label: 'Winnerbreak' },
          { key: 'wechselbreak', label: 'Wechselbreak' },
        ].map(opt => (
          <button
            key={opt.key}
            type="button"
            className={`${styles['quick-pick-btn']} ${rule === (opt.key as BreakRule) ? styles['selected'] : ''}`}
            onClick={() => { setRule(opt.key as BreakRule); onNext(opt.key as BreakRule); }}
            aria-label={`Break-Regel wählen: ${opt.label}`}
          >
            {opt.label}
          </button>
        ))}
      </div>
      <div className={styles['arrow-nav']} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 48 }}>
        <button type="button" className={styles['arrow-btn']} aria-label="Zurück" onClick={onCancel} style={{ fontSize: 48, width: 80, height: 80, borderRadius: '50%', background: '#222', color: '#fff', border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', cursor: 'pointer' }}>
          &#8592;
        </button>
        <button type="button" className={styles['arrow-btn']} aria-label="Weiter" onClick={() => onNext(rule)} style={{ fontSize: 48, width: 80, height: 80, borderRadius: '50%', background: '#222', color: '#fff', border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', cursor: 'pointer' }}>
          &#8594;
        </button>
      </div>
    </form>
  );
};