// ── Globaler Bestätigungs-Dialog ─────────────────────────────────────────────
// Verwendung: const { confirm, ConfirmDialog } = useConfirm();
//             await confirm('Wirklich löschen?') && deleteFn();
import { useState, useCallback } from 'react';

export function useConfirm() {
  const [state, setState] = useState({ open:false, msg:'', resolve:null });

  const confirm = useCallback((msg='Wirklich fortfahren?') => {
    return new Promise(resolve => {
      setState({ open:true, msg, resolve });
    });
  }, []);

  const handle = yes => {
    state.resolve?.(yes);
    setState({ open:false, msg:'', resolve:null });
  };

  const ConfirmDialog = () => !state.open ? null : (
    <div style={{ position:'fixed', inset:0, background:'rgba(0,0,0,0.75)',
      zIndex:9000, display:'flex',
      alignItems: window.innerWidth>=768 ? 'center' : 'flex-end',
      justifyContent:'center', padding: window.innerWidth>=768 ? 24 : 0 }}
      onClick={() => handle(false)}>
      <div style={{ background:'#1a1a1e',
        borderRadius: window.innerWidth>=768 ? 16 : '16px 16px 0 0',
        width:'100%', maxWidth:500, padding:'20px 20px 32px',
        border:'1px solid rgba(255,255,255,0.15)',
        boxShadow: window.innerWidth>=768 ? '0 24px 80px rgba(0,0,0,0.6)' : 'none' }}
        onClick={e => e.stopPropagation()}>
      {window.innerWidth < 768 && <div style={{ width:36, height:4, background:'rgba(255,255,255,0.15)',
          borderRadius:2, margin:'0 auto 18px' }}/>}
        <p style={{ color:'#fff', fontFamily:'monospace', fontSize:14,
          textAlign:'center', marginBottom:20, lineHeight:1.6 }}>{state.msg}</p>
        <div style={{ display:'flex', gap:10 }}>
          <button onClick={() => handle(false)} style={{
            flex:1, padding:'12px 0', background:'rgba(255,255,255,0.06)',
            border:'1px solid rgba(255,255,255,0.1)', borderRadius:10,
            color:'rgba(255,255,255,0.7)', fontFamily:'monospace', fontSize:13, cursor:'pointer',
          }}>Abbrechen</button>
          <button onClick={() => handle(true)} style={{
            flex:1, padding:'12px 0', background:'rgba(255,107,157,0.15)',
            border:'1px solid rgba(255,107,157,0.4)', borderRadius:10,
            color:'#ff6b9d', fontFamily:'monospace', fontSize:13, cursor:'pointer', fontWeight:700,
          }}>Ja, löschen</button>
        </div>
      </div>
    </div>
  );

  return { confirm, ConfirmDialog };
}