// SwipeToDelete — iOS Mail style swipe-to-reveal-delete.

function SwipeToDelete({ onDelete, children }) {
  const startX = React.useRef(null);
  const currentX = React.useRef(0);
  const [offset, setOffset] = React.useState(0);
  const [swiping, setSwiping] = React.useState(false);
  const [deleting, setDeleting] = React.useState(false);
  const DELETE_THRESHOLD = 80;

  const onTouchStart = (e) => {
    startX.current = e.touches[0].clientX;
    currentX.current = offset;
    setSwiping(true);
  };
  const onTouchMove = (e) => {
    if (startX.current == null) return;
    const dx = e.touches[0].clientX - startX.current;
    setOffset(Math.min(0, Math.max(-120, currentX.current + dx)));
  };
  const onTouchEnd = () => {
    startX.current = null;
    setSwiping(false);
    if (offset < -DELETE_THRESHOLD) { setOffset(-90); }
    else { setOffset(0); }
  };
  const handleDelete = () => {
    setDeleting(true);
    setOffset(-400);
    setTimeout(() => onDelete && onDelete(), 300);
  };

  if (deleting) return <div style={{ height: 0, overflow: 'hidden', transition: 'height .3s ease' }} />;

  // Only show the red delete zone when actually swiped
  const showDelete = offset < -5;

  return (
    <div style={{ position: 'relative', overflow: 'hidden' }}>
      {/* Red delete zone — only rendered when swiping */}
      {showDelete && (
        <div style={{
          position: 'absolute', top: 0, bottom: 0, right: 0,
          width: Math.abs(offset) + 10,
          background: '#b91c1c',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <button onClick={handleDelete} style={{
            background: 'none', border: 'none', cursor: 'pointer',
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
            padding: '8px 16px', opacity: Math.min(1, Math.abs(offset) / 60),
          }}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
              <polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
            </svg>
            <span style={{ fontSize: 9, fontWeight: 600, color: '#fff', fontFamily: "'Inter Tight', sans-serif" }}>Supprimer</span>
          </button>
        </div>
      )}

      {/* Slidable content */}
      <div
        onTouchStart={onTouchStart}
        onTouchMove={onTouchMove}
        onTouchEnd={onTouchEnd}
        onMouseDown={(e) => { startX.current = e.clientX; currentX.current = offset; setSwiping(true); }}
        onMouseMove={(e) => {
          if (startX.current == null || !swiping) return;
          const dx = e.clientX - startX.current;
          setOffset(Math.min(0, Math.max(-120, currentX.current + dx)));
        }}
        onMouseUp={() => { onTouchEnd(); }}
        onMouseLeave={() => { if (swiping) onTouchEnd(); }}
        style={{
          position: 'relative',
          transform: `translateX(${offset}px)`,
          transition: swiping ? 'none' : 'transform .3s cubic-bezier(.2,.7,.2,1)',
          zIndex: 1,
        }}
      >
        {children}
      </div>
    </div>
  );
}

window.SwipeToDelete = SwipeToDelete;