const PostelsInput = () => {
  const [input, setInput] = useState('');
  const [status, setStatus] = useState({ type: 'idle', msg: '' });

  // 寛容なパーサー関数
  // どんな形式の日付も、できるだけ解釈しようと試みる
  const parseDateLiberally = (str) => {
    if (!str) return;
    
    // 全角数字を半角に
    const normalized = str.replace(/[０-９]/g, s => String.fromCharCode(s.charCodeAt(0) - 0xFEE0));
    
    // YYYY/MM/DD, YYYY-MM-DD, YYYY.MM.DD などを許容
    const date = new Date(normalized);
    
    if (!isNaN(date.getTime())) {
      setStatus({ 
        type: 'success', 
        msg: `Accepted! Normalized to: ${date.toISOString().split('T')[0]}` 
      });
    } else {
      setStatus({ 
        type: 'error', 
        msg: 'Sorry, we could not understand that date format.' 
      });
    }
  };

  const handleChange = (e) => {
    const val = e.target.value;
    setInput(val);
    setStatus({ type: 'idle', msg: '' });
  };

  return (
    <div className="p-8 bg-card rounded-xl shadow-lg border-l-4 border-green-500">
      <h3 className="text-xl font-bold mb-2">Flexible Date Input</h3>
      <p className="text-muted-foreground text-sm mb-6">
       Try typing formats like: <code className="bg-muted px-1">2024-01-01</code>, <code className="bg-muted px-1">2024/1/1</code>, <code className="bg-muted px-1">Jan 1 2024</code>, or even full-width <code className="bg-muted px-1">２０２４年１月１日</code>.
      </p>

      <div className="flex gap-2">
        <input 
          type="text" 
          value={input}
          onChange={handleChange}
          onBlur={() => parseDateLiberally(input)}
          onKeyDown={(e) => e.key === 'Enter' && parseDateLiberally(input)}
          placeholder="Enter a date..."
          className="flex-1 p-3 border-2 border-border rounded-lg focus:border-green-500 outline-none text-lg transition-colors"
        />
        <button 
          onClick={() => parseDateLiberally(input)}
          className="bg-green-600 text-white px-6 py-2 rounded-lg font-bold hover:bg-green-700"
        >
          Submit
        </button>
      </div>

      {status.msg && (
        <div className={`mt-4 p-3 rounded-lg flex items-center ${
          status.type === 'success' ? 'bg-green-50 dark:bg-green-950 text-green-800 dark:text-green-200' : 'bg-destructive/10 text-red-800 dark:text-red-200'
        }`}>
          <span className="text-2xl mr-2">
            {status.type === 'success' ? '✅' : '🤔'}
          </span>
          {status.msg}
        </div>
      )}
    </div>
  );
};

render(<PostelsInput />);