const FrictionDeleteButton = () => {
  const [step, setStep] = useState('initial'); // initial, confirming, deleting, deleted

  const handleDeleteClick = () => {
    // 即実行せず、確認状態へ移行（摩擦）
    setStep('confirming');
  };

  const handleConfirm = () => {
    setStep('deleting');
    setTimeout(() => setStep('deleted'), 1500);
  };

  const handleCancel = () => {
    setStep('initial');
  };

  if (step === 'deleted') {
    return (
      <div className="p-8 text-center bg-muted/30 rounded-xl text-muted-foreground">
        Item deleted.
        <button onClick={() => setStep('initial')} className="ml-2 text-blue-500 hover:underline text-sm">Reset</button>
      </div>
    );
  }

  return (
    <div className="p-8 flex flex-col items-center justify-center bg-muted/30 rounded-xl gap-4">
      <h3 className="font-semibold text-foreground">Dangerous Zone</h3>
      
      {step === 'initial' ? (
        <button
          onClick={handleDeleteClick}
          className="bg-red-100 text-destructive px-4 py-2 rounded font-medium hover:bg-red-200 transition-colors"
        >
          Do not press (Delete All)
        </button>
      ) : (
        /* 
          [意図的な摩擦]
          別のUIを表示し、ユーザーに再考と明確な意思表示を求める。
          赤色と警告アイコンで重要性を強調。
        */
        <div className="bg-card p-4 rounded-lg shadow-lg border border-red-100 flex flex-col items-center animate-in fade-in zoom-in duration-200">
          <div className="text-destructive mb-2">
            <svg className="w-8 h-8 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
            </svg>
          </div>
          <p className="text-sm text-card-foreground font-bold mb-1">Are you absolutely sure?</p>
          <p className="text-xs text-muted-foreground mb-4 text-center">This action cannot be undone.</p>
          
          <div className="flex gap-2 w-full">
            <button
              onClick={handleCancel}
              className="flex-1 px-3 py-2 bg-muted hover:bg-muted text-foreground text-sm rounded transition-colors"
            >
              Cancel
            </button>
            <button
              onClick={handleConfirm}
              className={`flex-1 px-3 py-2 bg-destructive hover:bg-red-700 text-white text-sm rounded font-bold transition-colors flex items-center justify-center ${step === 'deleting' ? 'opacity-70 cursor-wait' : ''}`}
              disabled={step === 'deleting'}
            >
              {step === 'deleting' ? 'Deleting...' : 'Yes, Delete'}
            </button>
          </div>
        </div>
      )}
    </div>
  );
};

render(<FrictionDeleteButton />);