const ConstraintInput = () => {
  const [promoCode, setPromoCode] = useState('');
  
  // 制約: アルファベットの大文字と数字しか入力できない
  // 小文字を入力しても自動で大文字になり、記号は無視される
  const handleChange = (e) => {
    const value = e.target.value;
    // 正規表現で、A-Zと0-9以外の文字を除去
    const formatted = value.toUpperCase().replace(/[^A-Z0-9]/g, '');
    
    // 最大文字数の制約（物理的制約に近い）
    if (formatted.length <= 6) {
      setPromoCode(formatted);
    }
  };

  return (
    <div className="p-8 flex flex-col items-center bg-muted/30 rounded-xl gap-6">
      <div className="w-full max-w-xs">
        <label className="block text-sm font-bold text-foreground mb-2">
          Enter Promo Code
          <span className="text-xs font-normal text-muted-foreground ml-2">(Max 6 chars, A-Z, 0-9)</span>
        </label>
        
        <div className="relative">
          <input
            type="text"
            value={promoCode}
            onChange={handleChange}
            placeholder="PROMO1"
            className="w-full text-2xl tracking-widest p-3 border-2 border-border rounded-lg focus:border-blue-500 focus:outline-none uppercase text-center font-mono"
          />
          
          {/* 視覚的なフィードバック（制約の状態） */}
          <div className="absolute right-3 top-1/2 transform -translate-y-1/2 text-sm text-muted-foreground">
            {promoCode.length}/6
          </div>
        </div>
      </div>

      <div className="text-sm text-muted-foreground bg-primary/10 p-4 rounded-lg border border-blue-100">
        <p className="font-bold mb-1">Constraints Applied:</p>
        <ul className="list-disc pl-5 space-y-1">
          <li>Lowercase → Uppercase (Auto-correction)</li>
          <li>Symbols/Spaces → Blocked (Prevention)</li>
          <li>Length {'>'} 6 → Blocked (Limit)</li>
        </ul>
      </div>
    </div>
  );
};

render(<ConstraintInput />);